Practical Exercise 6: HTML Tables
In this practical exercise, you will learn to insert and configure a table with three rows and three columns using the <table> tag.
Activity
Create a table with three rows and three columns using the <table> tag.
Interactive Solution
Solution with Complete HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tables</title>
</head>
<body>
<h1>Table</h1>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 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>
</body>
</html>
Exercise Variants
Variant 1: Table with Full Semantic Structure
HTML5 tables have semantic tags that separate the header, body, and footer of the table. This improves accessibility and allows styling each section separately.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Semantic Table</title>
</head>
<body>
<h1>Monthly Sales</h1>
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptops</td>
<td>$12,000</td>
<td>$15,000</td>
<td>$18,000</td>
</tr>
<tr>
<td>Monitors</td>
<td>$8,000</td>
<td>$9,500</td>
<td>$11,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>$20,000</td>
<td>$24,500</td>
<td>$29,000</td>
</tr>
</tfoot>
</table>
</body>
</html>
<thead>: groups header rows. Screen readers identify it as column headers.<tbody>: contains the main data of the table.<tfoot>: summary or totals row at the table footer. Even if written before or after<tbody>, the browser always displays it at the end.
Variant 2: Combined Cells with colspan and rowspan
For more complex tables like schedules or calendars, colspan and rowspan allow a cell to span multiple columns or rows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Class Schedule</title>
</head>
<body>
<h1>Weekly Schedule</h1>
<table border="1">
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
</thead>
<tbody>
<tr>
<td>08:00 - 10:00</td>
<td>Math</td>
<td>Physics</td>
<td>Math</td>
</tr>
<tr>
<td>10:00 - 12:00</td>
<td colspan="3" align="center">Programming Workshop (all days)</td>
</tr>
<tr>
<td>12:00 - 14:00</td>
<td rowspan="2">Lab</td>
<td>English</td>
<td>Lab</td>
</tr>
<tr>
<td>14:00 - 16:00</td>
<td>Sports</td>
<td>English</td>
</tr>
</tbody>
</table>
</body>
</html>
colspan="3": the "Programming Workshop" cell spans 3 columns (Monday + Tuesday + Wednesday).rowspan="2": the "Lab" cell spans 2 rows in the Monday column.
Variant 3: Table Without HTML Borders
The border attribute is obsolete in HTML5. The correct approach is to let CSS handle borders and visual styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Table with CSS Styling</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 2px solid #333;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
color: #333;
}
</style>
</head>
<body>
<h1>CSS Styled Table</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Emily Davis</td>
<td>35</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Michael Brown</td>
<td>22</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
Separating structure (HTML) from presentation (CSS) is one of the most important best practices in web development.
Mini-Challenge: Put It to the Test
Create a weekly class schedule containing:
- A header row with days: "Time", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" (6 columns)
- At least 3 rows with different subjects
- A cell using
colspanfor a subject that spans two consecutive days - A cell using
rowspanfor a 2-hour activity - Use
<thead>and<tbody>
Don't copy and paste from Variant 2: adapt the layout to 6 columns and create your own schedule.
Common Mistakes with HTML Tables
| Mistake | Why It's a Problem |
|---|---|
Not closing <tr>, <td>, or <th> tags | The browser tries to guess the structure and may display disorganized cells |
| Using tables for page layout | Obsolete practice for 15+ years. Use CSS Grid or Flexbox for layouts. Tables are only for tabular data |
Not using <th> for headers | Screen readers can't associate data cells with their headers. <th> + scope attribute is mandatory for accessibility |
Using border="1" instead of CSS | The border attribute is obsolete in HTML5. Use border-collapse: collapse and border in CSS |
Forgetting <tbody> | Although the browser adds it automatically, without <tbody> you can't style the table body separately or apply scroll on long tables |
Frequently Asked Questions
Are tables bad for SEO?
No. Tables used correctly (for tabular data) are perfectly valid for SEO. Google interprets them as structured data and may display rich snippets if the data is relevant. What's bad for SEO is using tables for page layout, because it confuses crawlers about the real content structure.
When should I use tables vs CSS Grid?
Use HTML tables when you have data with row-column relationships (prices, schedules, rankings, numerical reports). Use CSS Grid for the visual layout of the page (header, sidebar, footer, galleries). The rule is simple: if you would export the content to Excel, it goes in a table. If it's visual design, it goes in Grid.
Have you mastered tables? Generate a page with tabular data using DivZone AI and analyze how tables are structured with thead, tbody, and tfoot in a real project. Seeing generated code is the best way to learn!
🔎 Check out the following sections for more information on this topic:
- Fundamental elements in HTML
- More about tables: MDN - The Table element