Table of contents
Tables are like the superheroes of organizing information on a webpage. Imagine neatly arranging data in rows and columns—perfect for displaying everything from schedules to product details. In HTML, creating tables is a breeze, and I'll guide you through the basics.
Creating a Table
To start, use the <table>
tag to signify the beginning of your table. Inside this tag, you'll have rows represented by <tr>
(table row). Each row contains cells represented by <td>
(table data).
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
Table Headers
Sometimes, you want to highlight the headers of your table. Use <th>
(table header) instead of <td>
for these special cells.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
</tr>
</table>
Adding a Caption
Want to give your table a title? Use the <caption>
tag just after the <table>
tag.
<table>
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
<tr>
<td>Alex Johnson</td>
<td>Developer</td>
</tr>
<tr>
<td>Emily Davis</td>
<td>Designer</td>
</tr>
</table>
And there you have it! Tables in HTML provide a structured way to present data, making your webpage organized and visually appealing.
You may be interested in reading more about table in HTML, follow the link below.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table