I have a table like this:
<table border="1">
<thead>
<tr>
<th colspan="2">Items</th>
<th colspan="2">Type</th>
<th colspan="4">Values</th>
<th colspan="2">Date</th>
</tr>
<tr>
<th colspan="2"></th>
<th colspan="2"></th>
<th colspan="2">Before</th>
<th colspan="2">After</th>
<th colspan="2"></th>
</tr>
</thead>
<tbody></tbody>
In the header of the table, I would like to have the headers Items, Type and Date to be centered vertically. I tried using rowspan="2" on these headers, but that didn't work. Any idea please?
When using rowspan, you have to not add the columns in the next rows (or as much rows as the rowspan number minus one).
Your demo, updated:
<table border="1">
<thead>
<tr>
<th rowspan="2">Items</th>
<th rowspan="2">Type</th>
<th colspan="4">Values</th>
<th rowspan="2">Date</th>
</tr>
<tr>
<th colspan="2">Before</th>
<th colspan="2">After</th>
</tr>
</thead>
<tbody></tbody>
</table>
Note: If you remove the Before and After colspan, your Values colspan can be just 2.
<table border="1">
<thead>
<tr>
<th colspan="2" rowspan="2">Items</th>
<th colspan="2" rowspan="2">Type</th>
<th colspan="4">Values</th>
<th colspan="2" rowspan="2">Date</th>
</tr>
<tr>
<th colspan="2">Before</th>
<th colspan="2">After</th>
</tr>
</thead>
<tbody></tbody>
<table border="1">
<thead>
<tr>
<th rowspan="2">Items</th>
<th rowspan="2">Type</th>
<th colspan="2">Values</th>
<th rowspan="2">Date</th>
</tr>
<tr>
<th>Before</th>
<th>After</th>
</tr>
</thead>
<tbody></tbody>
Related
I want to extend the "Water Body Classification" column until to the top of the "D" column, can't figure out how to do it...
Here's the table code
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Unit</th>
<th scope="col" width="30px">Water Body Classification</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<th class="text-center" scope="col">AA</th>
<th class="text-center" scope="col">A</th>
<th class="text-center" scope="col">B</th>
<th class="text-center" scope="col">C</th>
<th class="text-center" scope="col">D</th>
</tr>
<tr>
<td>pH (Range)</td>
<td>mg/L</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-9.0</td>
<td class="text-center">6.5-9.0</td>
</tr>
</tbody>
</table>
You can use colspan in your CSS code. Like this:
colspan = "10"
The code below should show the result you want:
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Unit</th>
<th scope="col" width="30px" colspan="5">Water Body Classification</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<th class="text-center" scope="col">AA</th>
<th class="text-center" scope="col">A</th>
<th class="text-center" scope="col">B</th>
<th class="text-center" scope="col">C</th>
<th class="text-center" scope="col">D</th>
</tr>
<tr>
<td>pH (Range)</td>
<td>mg/L</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-9.0</td>
<td class="text-center">6.5-9.0</td>
</tr>
</tbody>
</table>
If you want to use the <table> tag. check the colspan and rowspan method
https://www.w3schools.com/html/html_table_colspan_rowspan.asp
And also you can use div as well
<th scope="col" width="30px" colspan='6'>Water Body Classification</th>
Change your th like this
I stumbled around this table ⤵️
Problem Description
Can someone tell me how do I get
"/" And "Time" below the Days Row?
Here is code:
<table border="2">
<tr>
<th rowspan="3">Days
</th>
<th rowspan="3">Monday</th>
<th rowspan="3">Tuesday</th>
<th rowspan="3">Wednesday</th>
<th rowspan="3">Thursday</th>
<th rowspan="3">Friday</th>
<th rowspan="3">Saturday</th>
</tr>
<tr>
<th>/</th>
</tr>
<tr>
<th>Time</th>
</tr>
</table>
You need to remove the rowspan from the "Days" column (or set it to 1):
<table border="2">
<tr>
<th>Days</th>
<th rowspan="3">Monday</th>
<th rowspan="3">Tuesday</th>
<th rowspan="3">Wednesday</th>
<th rowspan="3">Thursday</th>
<th rowspan="3">Friday</th>
<th rowspan="3">Saturday</th>
</tr>
<tr>
<th>/</th>
</tr>
<tr>
<th>Time</th>
</tr>
</table>
I'm trying to replicate this table:
I have trouble with the third table head, I don't know how to make that double row and those 5 columns and how to do the table rows and table data to make it fit the head.
I never used colgroup and rowspan before, I tried to mix some examples I've found but i'm not having success.
This is what I have so far:
<table border="1">
<caption>
Poster availability
</caption>
<col>
<colgroup span="5"></colgroup>
<col>
<thead>
<tr>
<th scope="col">Poster name</th>
<td rowspan="2"></td>
<th scope="colrow" colspan="5">Color</th>
<th scope="col">Sizes available</th>
</tr>
<tr>
<th>1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th>7</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
</tr>
</tbody>
This is the way I solved it, just in case other newbie like me has the same problem
<table border="1">
<col>
<col>
<colgroup span="5"></colgroup>
<col>
<tr>
<td rowspan="2">EVIDENCIA DE APRENDIZAJE</td>
<th rowspan="2">%</th>
<th colspan="5" scope="colgroup">INDICADOR DE ALCANCE</th>
<th rowspan="2">INSTRUMENTOS DE EVALUACIÓN</th>
</tr>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
<tr>
<td>EVIDENCIA 1</td>
<td>50%</td>
<td>A1</td>
<td>B2</tds>
<td>C3</td>
<td>D4</td>
<TD>E1</TD>
<td>Instrumento 1</td>
</tr>
</table>
Please help me, on How to Print HTML Table with Multiple Table Header?
Sample code of my table header below:
<table>
<thead>
<tr>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This is what i want to see in printable page for the Table Header:
<table border="2" >
<thead>
<tr>
<th colspan="2"></th>
<th colspan="6" ></th>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="2"></th>
<th colspan="6"></th>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
<th colspan="2">item</th>
<th colspan="6">Description</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
See below code..
<table border="2" >
<thead>
<tr>
<th colspan="6" ></th>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="6"></th>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
</tr>
<tr>
<th colspan="2">item</th>
<th colspan="4">Description</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
here is working example :: https://jsfiddle.net/deepakvaishnav/0L48mvcz/
how to fixed column no, area, category, sub category, and other column scroll left to right ?
<table class="table table-bordered table-sm">
<thead style="background:red;color:white">
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Area</th>
<th rowspan="2">Category</th>
<th rowspan="2">Sub Category</th>
<th rowspan="2">Risiko</th>
<th rowspan="2">Cause</th>
<th rowspan="2">Impact</th>
<th rowspan="1" colspan="6">Analisis</th>
<th rowspan="1" colspan="4">Evaluasi</th>
<th rowspan="1" colspan="2">Risk Treatment Options</th>
<th rowspan="2">Accountabel Unit</th>
<th rowspan="2">Sumber Daya</th>
<th rowspan="2">Deadline</th>
</tr>
<tr>
<th colspan="2">Probabilitas</th>
<th colspan="2">Impact</th>
<th colspan="2">Risk Level</th>
<th>PIC</th>
<th>Urgency</th>
<th>Existing Control</th>
<th>Risk Control<br>Assessment</th>
<th>Proaktif</th>
<th>Reaktif</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JsFiddle Link: http://jsfiddle.net/5p77f171/