| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
HTML tables are used to display tabular data in a structured format, consisting of rows and columns. They are defined using the ‘<table>‘ tag and contain various child elements to define the table’s content and structure. Here’s a detailed breakdown with examples:
Basic Table Structure
- ‘
<table>‘: The container for the entire table. - ‘
<tr>‘ (table row): Defines a row in the table. - ‘
<th>‘ (table header): Defines a header cell in the table. - ‘
<td>‘ (table data): Defines a standard cell in the table.
Example of a Basic Table
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</table>
- ‘
<table border="1">‘ creates a table with a border. - ‘
<tr>‘ creates rows. - ‘
<th>‘ creates header cells. - ‘
<td>‘ creates standard cells.
Table with a Caption
You can add a caption to your table using the ‘<caption>‘ element.
<table border="1">
<caption>Employee Information</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</table>
Table with Colspan and Rowspan
You can merge cells horizontally using ‘colspan‘ and vertically using ‘rowspan‘.
<table border="1">
<tr>
<th colspan="2">Name</th>
<th rowspan="2">Age</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</table>
- ‘
<th colspan="2">Name</th>‘ merges two header cells horizontally. - ‘
<th rowspan="2">Age</th>‘ merges two header cells vertically.
Table with thead, tbody, and tfoot
For better structure and styling, tables can be divided into header, body, and footer sections using <thead>, <tbody>, and <tfoot> respectively.
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Footer Information</td>
</tr>
</tfoot>
</table>
Table with Styling
You can style tables using CSS to make them more visually appealing.
<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: #4CAF50;
color: white;
}
</style>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</tbody>
</table>
- The ‘
table‘ element is styled with ‘width: 100%‘ and ‘border-collapse: collapse‘. - The ‘
th‘ andtdelements are styled with padding, text alignment, and a bottom border. - Rows are styled with a hover effect to change the background color.
- The ‘
th‘ element has a background color and text color for the header cells.
