Lesson 9: HTML Tables
What are HTML Tables?
HTML tables allow you to organize data into rows and columns. Tables are useful for displaying structured information like schedules, price lists, comparison charts, and more.
Key Concepts:
- Tables are defined with the <table> tag
- Each table row is defined with <tr>
- Table headers are defined with <th>
- Table data/cells are defined with <td>
Basic Table Structure
Here's a simple example of a table:
HTML Code:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td>John</td>
<td>15</td>
<td>10th</td>
</tr>
<tr>
<td>Sarah</td>
<td>14</td>
<td>9th</td>
</tr>
</table>
Output:
| Name |
Age |
Grade |
| John |
15 |
10th |
| Sarah |
14 |
9th |
Table with Border
To add a border to your table, use the border attribute or CSS:
<table border="1">
<tr>
<th>Subject</th>
<th>Score</th>
</tr>
<tr>
<td>Math</td>
<td>95</td>
</tr>
<tr>
<td>Science</td>
<td>88</td>
</tr>
</table>
Table with Caption
Use the <caption> tag to add a title to your table:
<table border="1">
<caption>Student Grades</caption>
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>A</td>
</tr>
</table>
Spanning Columns and Rows
Column Span (colspan)
Use colspan to make a cell span multiple columns:
HTML Code:
<table border="1">
<tr>
<th colspan="3">Student Information</th>
</tr>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td>Mike</td>
<td>16</td>
<td>11th</td>
</tr>
</table>
Output:
| Student Information |
| Name |
Age |
Grade |
| Mike |
16 |
11th |
Row Span (rowspan)
Use rowspan to make a cell span multiple rows:
HTML Code:
<table border="1">
<tr>
<th>Day</th>
<th>Morning</th>
<th>Afternoon</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td>Math</td>
<td>Science</td>
</tr>
<tr>
<td>English</td>
<td>History</td>
</tr>
</table>
Output:
| Day |
Morning |
Afternoon |
| Monday |
Math |
Science |
| English |
History |
Table Sections: thead, tbody, tfoot
You can organize your table into logical sections:
HTML Code:
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<td>5</td>
<td>$2.50</td>
</tr>
<tr>
<td>Pen</td>
<td>10</td>
<td>$1.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>$22.50</td>
</tr>
</tfoot>
</table>
Output:
| Item |
Quantity |
Price |
| Notebook |
5 |
$2.50 |
| Pen |
10 |
$1.00 |
| Total |
$22.50 |
Common Table Attributes
| Tag |
Description |
| <table> |
Defines a table |
| <tr> |
Defines a table row |
| <th> |
Defines a table header cell (bold and centered by default) |
| <td> |
Defines a table data cell |
| <caption> |
Defines a table caption |
| <thead> |
Groups the header content |
| <tbody> |
Groups the body content |
| <tfoot> |
Groups the footer content |
| colspan |
Number of columns a cell should span |
| rowspan |
Number of rows a cell should span |
💡 Tips:
- Use <th> for header cells - they are bold and centered automatically
- Tables should be used for tabular data, not for page layout
- Always add borders or CSS styling to make tables more readable
- Use colspan and rowspan carefully - make sure your rows have the correct number of cells
Practice Exercise
Try This:
Create a weekly class schedule table with:
- Days of the week as columns (Monday to Friday)
- Time periods as rows (Period 1 to Period 4)
- Subject names in each cell
- A caption saying "My Class Schedule"
- Borders around all cells