HTML Table
HTML tables are the arrangement of data using rows and columns. A table is represented by <table> tag.
The <table> tag contains various tags inside. Each row of the table is represented by <tr>. For table header <th> tag is used and for the table data <td> tag is used. HTML tables are always marked up using rows not columns.
A table can contain text, lists, images etc.
Example:
<tr>
<th> Name </th>
<th> Id </th>
</tr>
<tr>
<td> John </td>
<td> 53 </td>
</tr>
<tr>
<td> Mike </td>
<td> 54 </td>
</tr>
</table>
Run Example
Using Border in HTML Table
By default there is no border attribute of a table. For adding a border in a table there are two way.
- Using border attribute in HTML
- Using border property in CSS
Note: It is now recommended to using border property not border attribute.
Here is an example to using border property in css:
Example:
The border-collapse Property
By using border-collapse property you can collapse the border into one.
Example:
Using cell padding for HTML Table
The padding property makes the space between the contents and the border of the cell. By default the cell is displayed without padding.
Example:
The colspan Attribute
It is used to divide a cell more than one column.
Example:
<tr>
<th> Name: </th>
<th colspan="2"> Hobbies: </th>
</tr>
<tr>
<td> Jason Statham </td>
<td> Travelling </td>
<td> Gardening </td>
</tr>
</table>
Run Example
The rowspan Attribute
It is used to divide a cell more than one row.
Example:
<tr>
<th> Name: </th>
<td> Jason Statham </td>
</tr>
<tr>
<th rowspan="2"> Hobbies: </th>
<td> Travelling </td>
</tr>
<tr>
<td> Gardening </td>
</tr>
</table>
Run Example
Caption for HTML Table
To display a caption above the table <caption> tag is used after the <table> tag.
Example:
<caption> Information </caption>
<tr>
<td> This is first row. </td>
</tr>
<tr>
<td> This is second row. </td>
</tr>
</table>
Run Example