Is that possible not to indent cells in th?
http://jsfiddle.net/kWTte/1/
HTML
<table>
<th>
<td></td>
<td></td>
</th>
<tr>
<td></td>
<td></td>
</tr>
</table>
You can think of th as the equivalent of td, but for table's header.
So ths should be contained into a tr element.
The correct form is:
<table>
<tr>
<th>Header one</th>
<th>Header two</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
If you need to wrap the table header you could use thead.
Similarly you could use tbody for the body of the table (note that you can have more than one tbody in the same table).
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 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.
Like in Excel sheet can I have
2 columns in 1st row
1 long column in the 2nd row
is this possible in html ?
On the realisation that you're unfamiliar with colspan, I presumed you're also unfamiliar with rowspan, so I thought I'd throw that in for free.
One important point to note, when using rowspan: the following tr elements must contain fewer td elements, because of the cells using rowspan in the previous row (or previous rows).
table {
border: 1px solid #000;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
<table>
<thead>
<tr>
<th colspan="2">Column one and two</th>
<th>Column three</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2">A large cell</td>
<td>a smaller cell</td>
</tr>
<tr>
<!-- note that this row only has _one_ td, since the preceding row
takes up some of this row -->
<td>Another small cell</td>
</tr>
</tbody>
</table>
Colspan:
<table>
<tr>
<td> Row 1 Col 1</td>
<td> Row 1 Col 2</td>
</tr>
<tr>
<td colspan=2> Row 2 Long Col</td>
</tr>
</table>
yes, simply use colspan.
If you need different column width, do this:
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="9">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>