Loading...
Loading...
Organize data into rows and columns with HTML tables
Tables display data in rows and columns ā like a spreadsheet. They're the right choice for data (schedules, prices, comparisons), NOT for page layout (use CSS for that).
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>| Element | What it does | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
`
How It WorksSpanning Columns and Rowshtml ļæ½ **Key insight:** Think of `colspan` like merging cells in a spreadsheet. The total columns in each row must match.
Table with Captionhtml Why Use Tables?Common Mistakes
Your Turn!Create a table with: š”Need a hint? (3 available)#1<th> is for header cells (bold), <td> is for data cells #2<tr> creates a row, <td>/<th> create cells in that row #3Use <thead> for header rows and <tbody> for data rows šShow solution (try it yourself first!)<table>
<caption>Weekly Schedule</caption>
<thead>
<tr>
<th>Day</th>
<th>Activity</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Study HTML</td>
<td>9:00 AM</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Practice CSS</td>
<td>10:00 AM</td>
</tr>
<tr>
<td>Friday</td>
<td>Build project</td>
<td>2:00 PM</td>
</tr>
</tbody>
</table> |