HTML tables are used to display tabular data in rows and columns. They are constructed using the `<table>`, `<tr>`, `<th>`, and `<td>` elements. Here's a basic example of an HTML table:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>
</body>
</html>
Explanation:
- The `<table>` element defines the table.
- Each row in the table is defined by the `<tr>` (table row) element.
- Table headers are defined using the `<th>` (table header) element within the `<tr>` element.
- Table data cells are defined using the `<td>` (table data) element within the `<tr>` element.
We can use additional attributes like `border`, `cellpadding`, `cellspacing`, and CSS styling to customize the appearance of the table. Additionally, we can span rows or columns using the `rowspan` and `colspan` attributes respectively within the `<td>` or `<th>` elements.