Introduction to the table Element In HTML5

The <table> element is one of the most commonly used HTML elements for creating tables on web pages. Tables are essential for organizing data into rows and columns, making it easy for users to read and understand information. In this article, we’ll explore how to use the <table> element in detail, including code examples and a list of its attributes with explanations.

Table Structure

A basic table consists of three main parts:

1. Table Header (<thead>): This section contains the column headers for the table.
2. Table Body (<tbody>): The body contains all the data rows in the table.
3. Table Footer (<tfoot>): Optionally, a footer can be added to display additional information or summary data about the table.

Here’s an example of a simple table structure:

<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<!-- More rows here... -->
</tbody>
</table>

Table Attributes

The <table> element supports several attributes that can be used to customize its appearance and behavior. Here’s a list of all the applicable attributes with explanations:

• align: Specifies the horizontal alignment of the table within its parent container. Allowed values are “left”, “center”, or “right”.
• border: Determines whether or not the table should have a visible border. If set to 0, no border will be displayed.
• cellpadding and cellspacing: These attributes control the spacing between cells in the table. cellpadding Defines the space inside each cell while cellspacing defining the space between adjacent cells. Both attributes accept integer values representing pixels.
• width: Specifies the width of the table as a percentage or fixed value (in pixels).

Here’s an example of how to use some of these attributes:

<table align="center" border="1" cellpadding="5" cellspacing="2">
<thead>
<!-- Table header here... -->
</thead>
<tbody>
<!-- Table body here... -->
</tbody>
</table>

Conclusion

The <table> element is a powerful tool for organizing and presenting data on web pages. By using the appropriate attributes, you can create visually appealing, easy-to-read and understandable tables.