I have nested table header and i'm working with the values, the value that im trying to set is setting outside to the html table. I don't know how to put values according their cells.
This is what i have tried so far,
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 30%;
}
tr, th, td {
border:1px solid black
}
span{
color:red;
}
<table>
<thead>
<tr>
<th rowspan="4">DEP'T</th>
</tr>
<tr>
<th colspan="4">Trainee L-Leader</th>
</tr>
<tr>
<td>REG</td>
<td>PROBI</td>
<td>SEAS'L</td>
<td>
<table style="width:100%">
<tr>
<th colspan="4">RANK</th>
</tr>
<tr>
<td>3B</td>
<td>3A</td>
<td>2A</td>
<td>1</td>
</tr>
</table></td>
</thead>
<tr>
<td>COIL</td>
<td>2</td>
<td>0</td>
<td>1</td>
<td>3</td>
<td>0</td>
<td>3</td>
<td>1</td>
</tr>
</table>
This is what i'm trying to do and expected output.
|--------------------------------------------------------|
| | |
| | TRAINEE L-LEADER |
| DEPT |---------------------------------------------|
| | REG | PROBI | SEAS'L | RANK |
| | | | |------------------|
| | | | | 3B | 3A | 2A | 1 |
|--------------------------------------------------------|
| COIL | 2 | 0 | 1 | 3 | 0 | 3 | 1 |
|--------------------------------------------------------|
My approach to this is to not try to embed one table inside another, as that can make things more complicated.
Instead, I count how many overall rows and columns there are - in this case: 4 rows and 8 columns.
Then I create one row at a time:
In the first row: The first cell containing DEPT occupies 1 column, and 3 rows. The next cell occupies 7 columns and 1 row. Therefore we need this:
<tr>
<th rowspan="3">DEP'T</th>
<th colspan="7">Trainee L-Leader</th>
</tr>
For the second row, we have already accounted for the first cell (from the DEPT data). The next 3 cells REG, PROBI and SEAS'L all occupy 2 rows. The final cell RANK occupies 4 columns. Therefore we need this:
<tr>
<td rowspan="2">REG</td>
<td rowspan="2">PROBI</td>
<td rowspan="2">SEAS'L</td>
<th colspan="4">RANK</th>
</tr>
...and so on.
Note how the third row starts with 3B - because the first 4 cells in row 3 have already been filled data we defined in the previous rows.
Overall, this approach just requires careful counting, starting from the top left cell and creating one row at a time.
The end result (with some CSS styling) is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexbox Demo</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 30%;
}
.center-align {
text-align: center;
}
tr, th, td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<thead class="center-align">
<tr>
<th rowspan="3">DEP'T</th>
<th colspan="7">Trainee L-Leader</th>
</tr>
<tr>
<td rowspan="2">REG</td>
<td rowspan="2">PROBI</td>
<td rowspan="2">SEAS'L</td>
<th colspan="4">RANK</th>
</tr>
<tr>
<td>3B</td>
<td>3A</td>
<td>2A</td>
<td>1</td>
</tr>
<tr>
<td>COIL</td>
<td>2</td>
<td>0</td>
<td>1</td>
<td>3</td>
<td>0</td>
<td>3</td>
<td>1</td>
</tr>
</thead>
</table>
</body>
</html>
You may need or want to make some additional adjustments for styling. You should be able to do that with more CSS - and also maybe by choosing where you want to use <th> tags (for bold) and where you want to use <td> tags.
Related
I'm looking for a way to check if text exists in a table cell.
I have no problem when there is only simple text in the cell, but my table cell has additional html tags and table.
I would like to check if the url exists (foo.bar.com) and then execute some logic or move to the next row.
Here is the one row snippet:
<tr bgcolor="#ffffff">
<td align="right" valign="top" nowrap="nowrap">99</td>
<td align="left" valign="top">
http://foo.bar.com<br>
<div style="margin-top: 8px">Show Details</div>
<div id="details_1" style="display: none;">
<table class="url-tracking-details">
<tbody>
<tr>
<td align="left" valign="top" nowrap="nowrap">Product:</td>
<td align="left" valign="top" nowrap="nowrap">- foo <br>- bar <br>- foobar</td>
</tr>
<tr>
<td align="left" valign="top" nowrap="nowrap">Version:</td>
<td align="left" valign="top" nowrap="nowrap">foo 4.2</td>
</tr>
<tr>
<td align="left" valign="top" nowrap="nowrap">Categorization:</td>
<td align="left" valign="top" nowrap="nowrap">- bar<br></td>
</tr>
</tbody>
</table>
</div>
</td>
<td align="center" valign="top" nowrap="nowrap">Closed</td>
<td align="center" valign="top" nowrap="nowrap">25/May/2022</td>
<td align="center" valign="top" nowrap="nowrap">25/May/2022</td>
</tr>
I've tried many things, including:
store | http://foo.bar.com | url
store text | xpath=//form/table/tbody/tr[2]/td[2] | cell
execute script | if (${cell}.startsWith(${url})) { return true; } else { return false }; | x
assert | x | true
but I'm getting 'Failed: Unexpected token in JSON at position 20'
So the full xpath for that url:
/html/body/div[2]/div[3]/div[2]/div[2]/div/div/div/div[2]/div1/div/div/form/table/tbody/tr[2]/td[2]/text()
How can I catch just this text?
I got it.
store | http://foo.bar.com | url
verify element present | xpath=//form/table/tbody/tr[2]/td[2][text()='${url}']
and here is an example with conditional logic:
the verify element present was changed to store xpath count and then assigned to the variable out (1 if true, 0 if false).
<table id="layouttable">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>
When Mobile Size Becomes
1 4
2
5
3
6
I want to list them in the order above.
flex - order was not available because of tr.
Does anyone know of a really simple solution like this?
A quick and very dirty solution:
#media only screen and (max-width: 600px) {
.desktop-table
{
display: none;
}
}
#media only screen and (min-width: 601px) {
.mobile-table
{
display: none;
}
}
<table id="layouttable" class="desktop-table">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>
<table id="layouttable-mobile" class="mobile-table">
<tr><td class='col1'>1</td></tr>
<tr><td class='col4'>4</td></tr>
<tr><td class='col2'>2</td></tr>
<tr><td class='col5'>5</td></tr>
<tr><td class='col3'>3</td></tr>
<tr><td class='col6'>6</td></tr>
</table>
My first non-aggregated table is like below with the first 3 columns.
I need to create a table with another column with the monthly earnings aggregated for the corresponding department as shown in the red-highlighted column:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Date</th>
<th>Department</th>
<th>Daily Earnings</th>
<th bgcolor="#ff6633">Dept Monthly Earnings</th>
</tr>
<tr>
<td>02-26-2018</td>
<td>1</td>
<td>10</td>
<td bgcolor="#ff6633">60</td>
</tr>
<tr>
<td>02-27-2018</td>
<td>2</td>
<td>40</td>
<td bgcolor="#ff6633">140</td>
</tr>
<tr>
<td>02-28-2018</td>
<td>1</td>
<td>50</td>
<td bgcolor="#ff6633">60</td>
</tr>
<tr>
<td>02-28-2018</td>
<td>2</td>
<td>100</td>
<td bgcolor="#ff6633">140</td>
</tr>
<tr>
<td>03-01-2018</td>
<td>1</td>
<td>150</td>
<td bgcolor="#ff6633">200</td>
</tr>
<tr>
<td>03-02-2018</td>
<td>1</td>
<td>50</td>
<td bgcolor="#ff6633">200</td>
</tr>
<tr>
<td>03-02-2018</td>
<td>2</td>
<td>100</td>
<td bgcolor="#ff6633">100</td>
</tr>
</table>
</body>
</html>
How do I create a table in the above format in Hive/SQL?
Appreciate your help
You can use window functions:
select t.*,
sum(daily_earnings) over (partition by department, trunc(date, 'MON')) as dept_monthly_earnings
from t;
I have this table of input fields and was wondering how to add new "cells" to specific columns. Just like this:
Is there a way to do this by simply adding a new <tr>. Or do I have to do this by adding input fields with labels outside of a <table> element. If I go this route, is there Bootstrap/CSS stylings I could add to "attach" these fields to those table columns so they would resize with them?
If I understand you question correctly, you can just add a new row. Use the colspan attribute on the td to specific how many column the cell will span. In your case, your first cell that contains "TOTAL" will span across 6 cells, which will be like <td colspan="6">TOTAL</td>, and apply some some css styles to remove the border and align the text to the right.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
th, td {
min-width: 70px;
height: 20px;
}
td.total {
text-align: right;
padding-right: 5px;
}
.no-border {
border: none;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="total">
<td colspan="6" class="total no-border">TOTAL</td>
<td></td>
<td class="total no-border">TOTAL</td>
<td></td>
<td class="no-border"></td>
</tr>
</table>
<tfoot>
<tr>
<th colspan="6" style="text-align:right">Total:</th>
<th></th>
<th colspan="1" style="text-align:right">Total:</th>
<th colspan="2" style="text-align:right"></th>
</tr>
</tfoot>
then please see this code
https://datatables.net/examples/advanced_init/footer_callback.html
This is my original table. I need to delimit the column segment. I have shown below what I want.
I did try later view explode but instead of string like ABC-DEF it is giving me A, B, C, -, D,... in separate rows.
<table border="1">
<caption>What I Have</caption>
<tr>
<th>Unique-Key </th>
<th>PNR </th>
<th>Segments </th>
</tr>
<tr>
<td>ABC-12345-BLAH1234</td>
<td>BLAH1234</td>
<td>ABC-DEF;GHI-JKL| JKL-GHI;DEF-ABC</td>
</tr>
</table>
<table border="1">
<caption>What I want</caption>
<tr>
<th>Unique-Key </th>
<th>PNR </th>
<th> New Segments </th>
</tr>
<tr>
<td>ABC-12345-BLAH1234</td>
<td>BLAH1234</td>
<td>ABC-DEF</td>
</tr>
<tr>
<td>ABC-12345-BLAH1234</td>
<td>BLAH1234</td>
<td>GHI-JKL</td>
</tr>
<tr>
<td>ABC-12345-BLAH1234</td>
<td>BLAH1234</td>
<td>JKL-GHI</td>
</tr>
<tr>
<td>ABC-12345-BLAH1234</td>
<td>BLAH1234</td>
<td>DEF-ABC</td>
</tr>
</table>
with t as (select 'ABC-DEF;GHI-JKL| JKL-GHI;DEF-ABC' as col)
select e.col as segments
from t lateral view explode (split(t.col,'\\s*[;|]\\s*')) e
;
+----------+
| segments |
+----------+
| ABC-DEF |
| GHI-JKL |
| JKL-GHI |
| DEF-ABC |
+----------+