Tables Exercise

Exercise: Master HTML Tables

Objectives

In this exercise, you will:

• Learn the structure of HTML tables (<table>, <tr>, <td>, <th>)
• Understand table sections (<thead>, <tbody>, <tfoot>)
• Practice creating headers and data cells
• Learn how to style tables with CSS
• Understand accessibility best practices for tables

What You’ll Learn

Table Structure:

• <table> - The container for all table content
• <tr> - Table row
• <td> - Table data cell
• <th> - Table header cell (automatically bold)
• <thead> - Groups header rows
• <tbody> - Groups body rows
• <tfoot> - Groups footer rows

Table Attributes:

• border - Adds borders (number = thickness)
• cellpadding - Space inside cells
• cellspacing - Space between cells
• colspan - Merge columns
• rowspan - Merge rows

Styling Tables:

• Add borders with CSS border property
• Stripe rows with :nth-child() selector
• Highlight headers with background color
• Make tables responsive on mobile

Challenges in This Exercise

1. Add more rows - Add more students to the table
2. Improve styling - Add CSS to make the table look better
3. Add a footer - Use <tfoot> to add average marks
4. Make responsive - Handle table on smaller screens

Tips for Success

• Always use <th> for headers, not <td>
• Use <thead>, <tbody>, and <tfoot> for semantic structure
• Avoid using tables for layout - use only for data
• Always provide meaningful table captions
• Test table readability on mobile devices
• Make sure headers clearly describe each column

Next Steps

After completing this exercise:

1. Add more data to the table
2. Practice using colspan and rowspan
3. Try creating different table styles with CSS
4. Move on to the Forms exercises!