How can I add multiple columns below one column? - html

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

Related

Arrangements in Html Table

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>

How to use col and rowspan at the same time?

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>

Print HTML Table with Multiple Table Header

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/

Header with a rowspan

Does anyone here knows how to make a table header like this (refer to the image below)?
I tried:
<thead>
<tr>
<th>No.</th>
<th>Creation Date</th>
<th>Week Day</th>
<th>Log Type</th>
<th colspan="5" rowspan="1" style="text-align: center">Time</th>
<th>action</th>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</thead>
but sadly, no luck, the table head is missed up, any help, suggestions, clues, recommendations, suggestions, ideas?

That's supposed to be colspan="2" on the one column and rowspan="2" on others. Use this:
table, th {border: 1px solid #ccc; border-collapse: collapse; font-weight: normal; font-family: 'Segoe UI'; margin: 0; padding: 0;}
table {width: 100%;}
th {padding: 5px;}
<table>
<thead>
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Creation Date</th>
<th rowspan="2">Week Day</th>
<th rowspan="2">Log Type</th>
<th colspan="2" style="text-align: center">Time</th>
<th rowspan="2">action</th>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</thead>
</table>

Used to colspan="" and rowspan="" carefully as like this
Try to this
th{
border:solid 1px red;
padding:5px;
}
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Creation Date</th>
<th rowspan="2">Week Day</th>
<th rowspan="2">Log Type</th>
<th colspan="2" style="text-align: center">Time</th>
<th rowspan="2">action</th>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</thead>
</table>

Try with following, It will be helpfull
<table>
<tr>
<th>No.</th>
<th>Creation Date</th>
<th>Week Day</th>
<th>Log Type</th>
<th>
<table>
<tr>Time</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</table>
</th>
<th>action</th>
</tr>
</table>

No need to use colspan and rowspan use this simple code and add your css according to your need.
<table border="1">
<tr>
<th>No.</th>
<th>Creation Date</th>
<th>Week Day</th>
<th>Log Type</th>
<th>
<table border="1">
<tr>
<p style="text-align: center !important;">Time</p>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</table>
</th>
<th>action</th>
</tr>
</table>
have a fun.

You Should use rowspan and colspan properly.
Tutorial
and here I wrote some HTML Code here, I hope it will be helpful.
<table cellpadding="0" cellspacing="0" >
<tr>
<th rowspan="2">No</th>
<th rowspan="2">CREATION DATE</th>
<th rowspan="2">WEEK DAY</th
<th rowspan="2">LOG TYPE</th>
<th colspan="2">TIME</th>
<th rowspan="2">ACTION</th>
</tr>
<tr>
<th >IN/START</th>
<th >OUT/STOP</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>TBODY</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

html table header rowspan to center headers

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>