HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

<table>
<tr>
<th>Sno</th>
<th>Name</th>
<th>Roll no</th>
</tr>
<tr>
<td>1</td>
<td>Ritesh</td>
<td>234</td>
</tr>
<tr>
<td>2</td>
<td>Firoz</td>
<td>456</td>
</tr>
</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

th stands for table header.

Key points about HTML tables include:

1. Basic Structure

• The main tag is <table>.
• Rows are created using <tr>.
• Cells are created using <td> for data and <th> for header cells.

2. Table Headers

• <th> defines header cells.
• By default, the content of <th> cells is bold and centered.

3. Table Data Cells

• <td> defines standard table cells (data)
• By default, the content of <td> cells is left-aligned

4. Table Borders

• Borders can be added using CSS or the border attribute (though the attribute is deprecated in favor of CSS).

5. Table Caption

• A table can have a <caption> element to describe the table’s purpose or content

6. Table Sections

• Tables can be divided into sections using <thead>, <tbody>, and <tfoot>.
• <thead> defines the header section.</li>
• <tbody> defines the body (main data).
• <tfoot> defines the footer.

7. Colspan and Rowspan

• colspan is used to make a cell span multiple columns.
• rowspan is used to make a cell span multiple rows.

8. Alignment and Spacing

• You can control alignment (horizontal/vertical) using CSS properties like text-align and vertical-align.
• Padding and spacing between cells can be controlled with CSS properties like padding and border-spacing.

9. Responsive Tables

• Tables can be made responsive by using CSS to ensure they adjust for smaller screens (using display: block, media queries, etc.).

10. Styling

• Tables can be styled with CSS for background color, borders, text alignment, hover effects, and more.