In HTML, tables are used to organize and display data in rows and columns. A table is created using the <table>
tag, and each row in the table is created using the <tr>
tag. Within each row, cells are created using the <td>
tag.
For example, a table with two rows and two columns would look like this:
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
This would create a table that looks like this:
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
Tables can be customized using various attributes. The border
attribute can be used to add a border to the table, and the cellpadding
and cellspacing
attributes can be used to add padding and spacing to the cells.
Table headers can also be added using the <th>
tag instead of the <td>
tag. This is useful when the first row of a table is meant to serve as a header for the columns.
For example, a table with a header row would look like this:
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
This would create a table that looks like this:
Column 1 | Column 2 |
---|---|
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
You can specify a caption (or title) for your tables using the <caption>
element.
The <caption>
element must be placed directly after the opening <table>
tag. By default, caption appears at the top of the table, but you can change its position using the CSS caption-side
property.
The following example shows how to use this element in a table.
<table>
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
This would create a table that looks like this:
No. | Name | Age |
---|---|---|
1 | Peter Parker | 16 |
2 | Clark Kent | 34 |
Tables can also be made responsive using CSS, allowing them to adapt to different screen sizes and devices.
Sign in to your account