I have a basic HTML table like so:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I want to add a toolbar above it. Would it be semantically acceptable to add a toolbar as a row in the thead?
<table>
<thead>
<tr>
<th colspan="2">
<!-- toolbar buttons -->
</th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
IMHO, since the toolbar is related to the tabular data, I see no semantic issue with having that toolbar live in a row in the thead.
Related
I need to design a HTML table as the attachment below but I seem to be struggling due to my lack of understanding in HTML table.
This is what I've come up with so far but as you can see, it's not even close to the end result. I hope that someone can point me in the right direction.
<section class="mb-5">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Heading -->
<h2 class="mb-3">
Task activities reports
</h2>
<div class="table-responsive border">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Service</th>
<th scope="col">Category</th>
<th scope="col">
<table>
<thead>
<tr>
<th colspan="10">Percent completed</th>
</tr>
<tr>
<th>10%</th>
<th>20%</th>
<th>30%</th>
<th>40%</th>
<th>50%</th>
<th>60%</th>
<th>70%</th>
<th>80%</th>
<th>90%</th>
<th>100%</th>
</tr>
</thead>
</table>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Clipping path</td>
<td>Category 1</td>
<td>
<table>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>2</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
You need to use the colspan and rowspan attributes, not nested tables. colspan tells a cell to span the width of two columns, and rowspan tells it to span the height of two rows.
I've rendered your header rows and the first three rows of content based on what I said here. The rest of the table content follows the same principles.
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
}
<table>
<thead>
<tr>
<th rowspan="2">Service</th>
<th rowspan="2">Category</th>
<th colspan="11">Percent completed</th>
</tr>
<tr>
<th>10%</th>
<th>20%</th>
<th>30%</th>
<th>40%</th>
<th>50%</th>
<th>60%</th>
<th>70%</th>
<th>80%</th>
<th>90%</th>
<th>100%</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="6">Clipping Path</td>
<td>Category 1</td>
<td></td>
<td>3</td>
<td></td>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1000</td>
<td>1005</td>
</tr>
<tr>
<td>Category 2</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td>1100</td>
<td>1105</td>
</tr>
<tr>
<td>Category 3</td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td></td>
<td></td>
<td>4</td>
<td></td>
<td></td>
<td>1200</td>
<td>1209</td>
</tr>
</tbody>
</table>
I've added CSS for borders so you can see the edges of the cells.
It's a little hard to get used to at first, because you have to ignore the presence of the cells in the rows where they "grow" to from where they were declared. Thus I've applied rowspan="2" to the Service heading, and that cell "grows" into the next row, along with Category. So that 10% heading shows up below Percent (since it only spans 1 row) because Service and Category are taking up space in the row though never declared in the <tr>.
i need to remove specific tr border in my table.
in bootstrap its come automaticly when i put "tr" element.
this is my table:
<div class="table-responsive">
<table class="table table-sm table-dark">
<thead>
</thead>
<tbody>
<tr>
<td>bbb</td>
<td>AAA</td>
<td>1</td>
<td>-</td>
<td>1</td>
<td>AAA</td>
<td>bbb</td>
</tr>
</tbody>
<tr>
<td></td>
<td></td>
<td>18:00</td>
<td></td>
<td>19/10/2018</td>
<td></td>
<td></td>
</tr>
<tbody>
<tr></tr>
</tbody>
</table>
i want the middle border of "tr" element not show. i cant success do taht
Try to inspect the regarding css items via F12 or just right click on item and choose "inspect element". Menue naming depends on your browser.
Lets say we got a table like this:
<table>
<tbody>
<tr>
<th>1</th>
<th>A</th>
</tr>
</tbody>
<tbody>
<tr>
<th>2</th>
<th>B</th>
</tr>
</tbody>
</table>
What would be the best way to make a wrapper around the <tbody> elements?
I would need to make a table with a fixed header/footer and a scrollable content. I'm already using the <tbody> tags to connect specific rows and i could not find a proper way to wrap my whole table content.
Thank you in advance!
You need to come up with a proper structure like below. tbody IS the wrapper you need.
<table>
<thead>
<tr>
<th>1</th>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>B</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer!</td>
</tr>
</tfoot>
</table>
If you need x2 tbody elements consider using x2 table elements instead - which you can nest within td elements, as the code snippet demonstrates below:
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th>1</th>
<th>A</th>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<th>2</th>
<th>B</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
You can use multiple <tbody> elements in a table. It's valid.
tbody:nth-child(3) {
background:yellow;
}
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
</table>
You can see the same example in w3 website.
I have created a table which loops from a database. Now I need to display this multiple table in a single row. Currently the loop display tables in columns. Please can someone suggest how to write the markup, so that it generates and displays table data in a single row?
For example, if there are 10 tables loops from the database, then there should be 10 cells in a single table row. The table should not contain anything below that row. It's ok for a horizontal scrollbar to display in the event that the table is longer than the screen width.
<table width="100%" class="table table-bordered table-striped">
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
Table inside table is not valid. You have to add table row then add all the tables under each table columns like below.
<table width="100%" class="table table-bordered table-striped">
<tr>
<td>
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
</td>
<td>
Your Second Table Goes here..
</td>
<td>
Your Third Table Goes here and so on.
</td>
</tr>
</table>
If I understand you right, you want the table shown above to be repeated multiple times such and to appear side by side in a single row.
What I would do is add the CSS property display: inline-table (use a class) to the relevant tables.
See the following example:
.tablePanel {
width: 300%;
word-break: nowrap;
border: 1px dotted blue;
}
.tablePanel table {
border: 1px dashed gray;
display: inline-table;
width: 200px;
}
<div class="tablePanel">
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table> <table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table> <table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
</div>
How can I make a table which has sub/nested tables scrollable if given a max height? I do not want the thead to scroll with it. What I'm really looking for is some valid tag that I can wrap my s in, or some other markup that will work just as well as the this:
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<!-- Insert valid tag here to wrap <tbody>s -->
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- Insert valid close tag here -->
</table>
If I understand your question correctly, maybe try something like this: http://jsfiddle.net/pPuXL/1/
You need to display the TBODY elements as "block" or "inline-block" in order for overflow to work on it, as in the CSS example I posted.