How would I get a table with both horizontal and vertical headers?
So e.g.
header1 header2 header3
header1 1 1 1
header2 2 2 2
header3 3 3 3
Like #UlrichSchwarz said, you can just use <th> instead of <td> in the first column. Using scope, you can make it more semantically descriptive:
<table>
<tr>
<th></th>
<th scope="col">header1</th>
<th scope="col">header2</th>
<th scope="col">header3</th>
</tr>
<tr>
<th scope="row">header 1</th>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th scope="row">header 2</th>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<th scope="row">header 3</th>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
While you can still just <th> the entries in the first column, there is no column-equivalent of <thead>/<tbody> that I'm aware of.
easy. Just leave the first td in the first tr - empty
You can make it with quite elementary HTML and CSS classes:
table{border-collapse:collapse}
td{text-align:center;padding:5px;border:1px solid #000}
td.empty{border:0}
td.headt{font-weight:bold;background-color:#b7f926}
<table>
<tr>
<td class="empty"> </td>
<td class="headt">Header 1</td>
<td class="headt">Header 2</td>
<td class="headt">Header 3</td>
</tr>
<tr>
<td class="headt">Header 1</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="headt">Header 2</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="headt">Header 3</td><td>1</td><td>2</td><td>3</td>
</tr>
</table>
This is just a sketch/suggestion, but hopefully useful to compare for future readers :)
Related
I am trying to create a table with the following custom format that has three rows under a column at the end:
.table th, td {
border: 1px solid black;
}
<table class="table">
<thead>
<tr>
<td rowspan="2">Discipline</td>
<th colspan="3">Weight Type 1</th>
<th colspan="1" rowspan="2">Weight Percentage (%)</th>
<th colspan="3">Weight Type 2</th>
</tr>
<tr>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 4</th>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 4</th>
</tr>
</thead>
<tbody>
<tr style="background-color: white;">
<th>Discipline 1</th>
<td>10</td>
<td>20</td>
<td>30</td>
<td colspan="1">100</td>
<td>2</td>
<td>1</td>
<td>3</td>
</tr>
<tr style="background-color: white;">
<th>Discipline 2</th>
<td>20</td>
<td>40</td>
<td>60</td>
<td colspan="1">100</td>
<td>4</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td rowspan="2">
<b>Summation</b>
</td>
<td rowspan="2">30</td>
<td rowspan="2">60</td>
<td rowspan="2">90</td>
<td style="width: 20px;">Weight 1</td>
<td style="width: 20px;">X</td>
<td rowspan="2">6</td>
<td rowspan="2">3</td>
<td rowspan="2">9</td>
</tr>
<tr>
<td>Weight 2</td>
<td>Y</td>
</tr>
</tfoot>
</table>
What I want, under Weight Percentage column there will be three rows at a time. That means, it'll have something as follows:
Weight 1 - 20
Weight 2 - 40
Weight 4 - 60
For now, under Weight Type 2 area, one of the column Weight 4 is bound out of the table. That has to be adjusted to Weight 4 column. Tried myself, but unable to do it. Anything that I missed?
You have used colspan="1" instead of colspan="2" for the cells of Weight Percentage (%), which causes the 9 to be displayed outside the table since the last rows (since they are merged) now have one more column than the rest. Adjust the three colspan="1" and that problem should be fixed.
As for the third row, you need to actually add a third row (<tr>...</tr>) and then adjust the rowspan for the rows you want to merge in your tfoot.
.table th,
td {
border: 1px solid black;
}
<table class="table">
<thead>
<tr>
<td>Discipline</td>
<th colspan="3">Weight Type 1</th>
<th colspan="2" rowspan="2">Weight Percentage (%)</th>
<th colspan="3">Weight Type 2</th>
</tr>
<tr>
<th></th>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 4</th>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 4</th>
</tr>
</thead>
<tbody>
<tr style="background-color: white;">
<th>Discipline 1</th>
<td>10</td>
<td>20</td>
<td>30</td>
<td colspan="2">100</td>
<td>2</td>
<td>1</td>
<td>3</td>
</tr>
<tr style="background-color: white;">
<th>Discipline 2</th>
<td>20</td>
<td>40</td>
<td>60</td>
<td colspan="2">100</td>
<td>4</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td rowspan="3">
<b>Summation</b>
</td>
<td rowspan="3">30</td>
<td rowspan="3">60</td>
<td rowspan="3">90</td>
<td style="width: 100px;">Weight 1</td>
<td style="width: 100px;">20</td>
<td rowspan="3">6</td>
<td rowspan="3">3</td>
<td rowspan="3">9</td>
</tr>
<tr>
<td>Weight 2</td>
<td>40</td>
</tr>
<tr>
<td>Weight 4</td>
<td>60</td>
</tr>
</tfoot>
</table>
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 have a table that has a caption. To group related information together, I used colspan on the <th> rows (Total divisions and Elevation) so that they serve as "captions" for the cells below them. However, I am not sure if this is the appropriate way of doing it semantically. Particularly, how will I make sure that Total divisions and Elevation would only refer to the rows below them?
<table>
<caption>Summary</caption>
<tr>
<th>Name</th>
<td>Santo Cristo</td>
</tr>
<tr>
<th>Area</th>
<td>67.99 km<sup>2</sup></td>
</tr>
<tr>
<th scope="row" colspan="2">Total divisions</th>
</tr>
<tr>
<th scope="row">Cities</th>
<td>4</td>
</tr>
<tr>
<th scope="row">Villages</th>
<td>45</td>
</tr>
<tr>
<th scope="row" colspan="2">Elevation (masl)</th>
</tr>
<tr>
<th scope="row">Highest point</th>
<td>12 meters</td>
</tr>
<tr>
<th scope="row">Lowest point</th>
<td>0 meters</td>
</tr>
</table>
Group your rows into <tbody> elements and scope each summary <th> to its parent <tbody> with scope="rowgroup" in lieu of scope="row", like so:
<table>
<caption>Summary</caption>
<thead>
<tr>
<th>Name</th>
<td>Santo Cristo</td>
</tr>
<tr>
<th>Area</th>
<td>67.99 km<sup>2</sup></td>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" colspan="2">Total divisions</th>
</tr>
<tr>
<th scope="row">Cities</th>
<td>4</td>
</tr>
<tr>
<th scope="row">Villages</th>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" colspan="2">Elevation (masl)</th>
</tr>
<tr>
<th scope="row">Highest point</th>
<td>12 meters</td>
</tr>
<tr>
<th scope="row">Lowest point</th>
<td>0 meters</td>
</tr>
</tbody>
</table>
(The first group can be either a <thead> or another <tbody> depending on your preference, but what's important are the two groups you're trying to scope the <th> elements to.)
Hello, I want to make ACTIONS equal to three columns
As shown in image, I want ACTIONS in center of Detail Update Delete
Please help.
<table border=1>
<tr>
<th>NAME</th>
<th>AGE</th>
<th colspan="3">ACTIONS</th>
</tr>
<tr>
<td>Salman Mushtaq</td>
<td>27</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
<tr>
<td>Muhanmmad Awais</td>
<td>32</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</tr>
<tr>
<td>Imran Hassan</td>
<td>38</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</tr>
<tr>
<td>Muhammad Asad</td>
<td>33</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</table>
Try to search about colspan and rowspan
Use colspan attribute in TH tag (ie. colspan="3")
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th colspan="3">Action (spanned 3 cols)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>action 1</td>
<td>Action 2</td>
<td>Action 3</td>
</tr>
</tbody>
</table>
So I had an assignment but I cant really make such table:
You have to use rowspan and colspan to merge cells
<table>
<tr>
<th rowspan="2">Name<br></th>
<th rowspan="2">Course</th>
<th colspan="2">hours<br></th>
</tr>
<tr>
<td>credit</td>
<td>contact</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>cc</td>
<td>dd</td>
<td>3</td>
<td>4</td>
</tr>
</table>