HTML Tables:
HTML tables are used to display data in rows and columns. The basic structure of an HTML table involves the use of the `<table>` element to define the table, `<tr>` (table row) elements to define rows, `<th>` (table header) elements to define header cells, and `<td>` (table data) elements to define regular cells.
Here is an example of a simple HTML table:
html
<!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>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Sample Table</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>40</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</body>
</html>
 |
| HTML Tables |
In this example:
– The `<table>` element defines the table.
– The `<thead>` element contains header row(s) with `<th>` elements representing column headers.
– The `<tbody>` element contains the table’s body with rows defined by `<tr>` elements and cells defined by `<td>` elements.
The CSS style is used to provide some basic styling to the table, such as border-collapse, cell padding, and background color for header cells.
Tables can be customized further using additional HTML attributes and CSS styles to meet specific design requirements. Additionally, responsive design practices and accessibility considerations should be taken into account when using tables in web development.