Advertisement
Google Ad Slot: content-top
Table
In HTML, a table is used to organize and display data in a grid format of rows and columns.
Explanation of Elements
<table>: The container for the entire table.<tr>: Defines a table row.<th>: Defines a header cell, which is typically bold and centered.<td>: Defines a standard data cell.
Basic Structure of an HTML Table
<table>
<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>
</table>
Additional Table Elements
<caption>: Adds a title to the table.<colspan>: Allows a cell to span multiple columns.<rowspan>: Allows a cell to span multiple rows.
Example with colspan and rowspan
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<td>John</td>
<td rowspan="2">Age: 22</td>
<td>City: Boston</td>
</tr>
<tr>
<td>Jane</td>
<td>City: Seattle</td>
</tr>
</table>
Styling Tables
Tables can be styled with CSS to improve their appearance.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color: #f5f5f5;}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<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>
</table>
</body>
</html>