Menu
I want to create an html table, which should look like this:
I know I will have to use colspan/rowspan attributes, but how? Can anyone help?
I have tried following :
<table>
<thead>
<tr>
<th>Evaluation</th><th>Approval</th>
<th colspan="2" >Points</th>
<th>Total</th>
<th>Date</th><th>Award Amount</th><th>Last Modified By</th>
</tr>
</thead>
<tbody>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
but is is giving me result as:
Clearly, I need to subheader in 3rd header (Points), how to achieve this?
738
To merge table columns in HTML use the colspan attribute in <td> tag. With this, merge cells with each other. For example, if your table is having 4 rows and 4 columns, then with colspan attribute, you can easily merge 2 or even 3 of the table cells.
HTML tables can have headers for each column or row, or for many columns/rows.
You can merge two or more table cells in a column using the colspan attribute in a <td> HTML tag (table data). To merge two or more row cells, use the rowspan attribute.
Like this:
<table>
<thead>
<tr>
<th rowspan="2">Evaluation</th>
<th rowspan="2">Approval</th>
<th colspan="2">Points</th> // <- note colspan here
<th rowspan="2">Total</th>
<th rowspan="2">Date</th>
<th rowspan="2">Award Amount</th>
<th rowspan="2">Last Modified By</th>
</tr>
<tr>
<th>Tangible</th>
<th>Intangible</th>
</tr>
</thead>
<tbody>
<tr>
<td>Al/GL</td>
<td>Select</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
</tbody>
</table>
this is the table fullstructure
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
thanks...
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
