The <table> HTML element is used to create a structured grid or tabular data within an HTML document. It allows you to organize and present data in rows and columns, making it easier for users to read and understand the information.
Here’s an example of how to use the <table> element:
<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>London</td>
</tr>
</tbody>
</table>
In this example, a simple table is created with three columns: Name, Age, and City. The <thead> element is used to define the table header, which contains a single row (<tr>) with three table header cells (<th>). The <tbody> element is used to enclose the table body, which contains two rows (<tr>) with data cells (<td>) for each column.
You can add more rows and cells to the table by replicating the structure and populating it with the desired data.
The table structure is essential for accessibility and proper rendering. The <thead> element is used to group the header content, allowing assistive technologies and screen readers to identify the table header cells. The <tbody> element groups the main data rows, and additional sections like <tfoot> can be used to contain table footers if needed.
It’s important to note that the styling and formatting of tables can be customized using CSS to achieve a desired appearance, such as adding borders, applying alternate row colors, or adjusting cell spacing and alignment.
In summary, the <table> element is used to create structured grids or tabular data within an HTML document. By organizing data into rows and columns, the <table> element helps in presenting information in a readable and structured format. By using additional elements like <thead> and <tbody>, you can enhance the accessibility and semantics of the table.