HTML Tables

Written by

Aayushi Bansal

A table represents information in the grid format and each block in the grid is called a table cell.

In HTML tables are created using <table> tag. The contents of a table are written row by row.

Inside <table> tag, we have <tr>, <th> and <td> tags.

<tr> tag is for table row and is followed by <th> or <td> tags.

<th> tag is for table header and <td> tag is for table data.

Example:

<table>
<tr>
<th> First name</th>
<th> Last name</th>
</tr>
<tr>
<td> Ajay</td>
<td>Rai</td>
</tr>
</table>

Colspan:
Sometimes we need the entries in the table to stretch across more than one column.

The colspan attribute is used in this case which indicates that how many columns that cell should run across. For example:

<table>
<tr>
<th> Name </th>
<th colspan="2"> mobile no</th>
</tr>
<tr>
<td>Ashy</td>
<td>8563842xx</td>
<td>9822654xx</td>
</tr>
</table>

Rowspan:

We can also need entries in a table to stretch down across more than one row.

The rowspan attribute is used to indicate how many rows a cell should span down the table.

For example:

<table>
<tr>
<th>Name</th>
<td>Ashy</td>
</tr>
<tr>
<th rowspan="2">mobile no</th>
<td>8563842xx</td>
</tr>
<tr>
<td>9822654xx</td>
</tr>
</table>

HTML table borders:

We can add borders to the table using CSS property. For example:

<table style="border: 2px solid black">

We often need to use the cell padding property which specifies the space within the cell content and its borders.

For example:

th, td{
}
th{ text-align: left;}