HTML Tables: Creating and Structuring Data
In this tutorial, we will be learning about HTML tables and how we can structure data using them.
What are HTML tables?
HTML tables are a powerful tool for displaying complex data. From a semantic perspective, tables should be used to represent data in a tabular format (i.e., rows and columns). They shouldn't be used solely for page layout as this can create accessibility issues.
Creating a Basic HTML Table
Creating a basic HTML table involves using the following tags:
<table>
: This is the container for the table.<tr>
: This defines a table row.<td>
: This defines a table data/cell.<th>
: This defines a table header.
Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
</table>
output:
Header 1 | Header 2 |
---|---|
Row 1 Data 1 | Row 1 Data 2 |
The above code will create a simple table with a single row of headers and a single row of data.
Table Head, Body, and Footer
You can further organize your tables with the following tags:
<thead>
: This defines a set of rows defining the head of the columns of the table.<tbody>
: This defines a set of rows defining the main content of the table.<tfoot>
: This defines a set of rows summarizing the columns of the table.
Example:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
output:
Header 1 | Header 2 |
---|---|
Row 1 Data 1 | Row 1 Data 2 |
Footer 1 | Footer 2 |
The above code will create a table with a header, body, and footer. This is a good way to organize and structure complex data in your tables.
That's it for this tutorial! You should now have a good understanding of how to create and structure HTML tables. Happy coding!