HTML Tables
Written by
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">
Table cell padding:
We often need to use the cell padding property which specifies the space within the cell content and its borders.
For example:
th, td{
padding: 10px;
}
Left-align headings:
By default, table headings are bold and centered. To left-align, the table headings, use the CSS text-align property.
For example:
th{ text-align: left;}