Tables are a powerful tool in HTML for organizing and displaying data in an easy-to-read format.
Creating a Table
To create a table in HTML, you need to use the <table> tag.
The <table> tag is a container tag that holds all the rows and columns of the table
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
Here have created a table with three columns and two rows.
The <tr> tag is used to define each row
The <th> tag is used to define the header cells of the table.
The <td> tag is used to define the data cells of the table.
Table Headers and Footers
We can add header and footer sections to your table using the <thead>, <tfoot>, and <tbody> tags.
The <thead> tag is used to define the header section of the table,
The <tfoot> tag is used to define the footer section
The <tbody> tag is used to group the body section of the table.
<table>
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$1000</td>
</tr>
<tr>
<td>February</td>
<td>$1500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$2500</td>
</tr>
</tfoot>
</table>
| Month | Sales |
|---|---|
| January | $1000 |
| February | $1500 |
| Total | $2500 |
Here, we have created a table with a header, body, and footer section.
The header section contains the column headers, the body section contains the data rows, and the footer section contains the total sales.
Conclusion
In this blog, we have shown how to create tables in HTML. Tables are an important tool for organizing and displaying data in an easy-to-read format. By using the <table>, <th>, <tr>, and <td> tags, you can create tables that are easy to understand and visually appealing
