Build a table of schedule using HTML5 table
Heggy Castaneda
Posted on May 1, 2020
Lessons learned while building Wine Festival Schedule using HTML5 table element.
- When adding table heading (
<th>) there is no need to add<td>element. This was confusing to me since any table data needs to be wrapped inside of<td>inside of table. But there is an exception for table heading<thead>. I can think of<th>acting as<td>in<thead>.
<table>
<thead>
<tr>
<th>Company Name</th>
<th>Number of Items to Ship</th>
<th>Next Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adam's Greenworks</td>
<td>14</td>
<td>Package Items</td>
</tr>
- To stretch a cell across the entire table, use
colspan
<thead>
<tr>
<th colspan="2"><h1>Wine Festival Schedule</h1></th>
</tr>
<tr>
<th><h2>Time</h2></th>
<th><h2>Event</h2></th>
</tr>
- Overall structure of table:
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
💖 💪 🙅 🚩
Heggy Castaneda
Posted on May 1, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
tailwindcss Implementing Dark Mode and Theme Switching using Tailwind v4 and Next.js
November 29, 2024
