In Module 5 of our HTML course, we'll explore the world of tables. Tables are a powerful tool for displaying data in a structured format, making it easier for users to read and understand.

Table Basics

A table is defined by the <table> element, which contains various table elements such as table rows, table headers, and table data.

Example:

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>

Syntax:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>

Table Elements

Here are some common table elements:

- <table>: defines a table
- <tr>: defines a table row
- <th>: defines a table header
- <td>: defines a table data cell
- <caption>: defines a table caption
- <thead>: defines a table header section
- <tbody>: defines a table body section
- <tfoot>: defines a table footer section

Table Headers

Table headers are defined by the <th> element and are used to display header information.

Example:

<th>Name</th>
<th>Age</th>
<th>City</th>

Table Data

Table data is defined by the <td> element and is used to display data.

Example:

<td>John</td>
<td>25</td>
<td>New York</td>

Captions

Captions are defined by the <caption> element and are used to display a brief summary of the table.

Example:

<caption>Person Information</caption>

Thead, Tbody, Tfoot

The <thead>, <tbody>, and <tfoot> elements are used to define sections of a table.

Example:

<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Summary</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tfoot>

Conclusion

In this module, we've explored the world of tables in HTML. By using tables, you can create structured data displays that make it easier for users to read and understand data. Remember to use table elements correctly to ensure your web pages are user-friendly and functional.