Techcss
Untitled Document

HTML Tables

The HTML table is a display element to arrange and display data in tabular formation.


<th> element


<tr> element


<td> element


<caption> element


A simple table example
Code:
<table border="1">
<caption>A table sample</caption>
<tr>
<th>Name</th>
<th>Roll No.</th>
<th>% of Marks</th>
</tr>
<tr>
<td>Manish Gupta</td>
<td>99260</td>
<td>86%</td>
</tr>
<tr>
<td>Alex Fournier</td>
<td>99014</td>
<td>79%</td>
</tr>
<tr>
<td>Simia Acer</td>
<td>99124</td>
<td>67%</td>
</tr>
<tr>
<td>Asif Iqbal</td>
<td>99150</td>
<td>70%</td>
</tr>
<tr>
<td>Prognya Mohanty</td>
<td>99208</td>
<td>82%</td>
</tr>
<tr>
<td>Soumen Sinha</td>
<td>99345</td>
<td>68%</td>
</tr>
</table>
Output:
A table sample
Name Roll No. % of Marks
Manish Gupta 99260 86%
Alex Fournier 99014 79%
Simia Acer 99124 67%
Asif Iqbal 99150 70%
Prognya Mohanty 99208 82%
Soumen Sinha 99345 68%

Expanding cell with multiple rows or columns using the "rowspan" or "colspan" attribute of <td> element

Using 'rowspan' and 'colspan'
Example:
<table border="1">
<tr>
<th width="38">&nbsp;</th>
<th colspan="2">Nonmetals</th>
</tr>
<tr>
<th></th>
<th>Symbol</th>
<th>Name</th>
</tr>
<tr>
<th>Solid</th>
<td width="81">C</td>
<td width="81">Carbon</td>
</tr>
<tr>
<th rowspan="2">Gas</th>
<td>N</td>
<td>Nitrogen</td>
</tr>
<tr>
<td>O</td>
<td>Oxygen</td>
</tr>
<tr>
<th rowspan="3">Solid</th>
<td>P</td>
<td>Phosphorus</td>
</tr>
<tr>
<td>S</td>
<td>Sulfur</td>
</tr>
<tr>
<td>Se</td>
<td>Selenium</td>
</tr>
</table>
Output:
  Nonmetals
Symbol Name
Solid C Carbon
Gas N Nitrogen
O Oxygen
Solid P Phosphorus
S Sulfur
Se Selenium