Mistake 1: Using td for Every Heading
Using td for every cell can make it harder to communicate which cells identify rows or columns. Use th for actual header cells.
Mistake 2: Forgetting Header Associations
A table may look correct but still be difficult to understand if its row and column relationships are unclear. Use scope or explicit header associations as appropriate.
Mistake 3: Incorrect colspan Values
When a cell spans multiple columns, the remaining cells in that row must fit the resulting grid. Incorrect spans can cause the table structure to become confusing or misaligned.
Mistake 4: Incorrect rowspan Structure
A cell spanning multiple rows occupies grid positions in each of those rows. Do not add another cell in a position already occupied by the spanning cell.
Mistake 5: Using Tables for General Layout
Use CSS Grid or Flexbox for page layout. Use HTML tables for tabular data.
Mistake 6: Missing Captions or Meaningful Headings
When a table has a purpose that is not obvious from its context, add a descriptive caption and clear headers.
Mistake 7: Making Tables Too Wide
Very wide tables can become difficult to read on small screens. Consider horizontal scrolling, clearer column labels or presenting a smaller set of columns when appropriate.
Mistake 8: Confusing Styling with Semantics
Making a td cell bold does not turn it into a header cell. Use the correct HTML element to communicate meaning, then style it with CSS.
17. Practical Exercises
Exercise 1: Student Marks Table
Create a table showing five students and their marks in HTML, CSS and JavaScript. Add a caption, column headers and row headers.
Exercise 2: Monthly Sales Report
Create a report for three months. Use thead, tbody and tfoot, and include a total row.
Exercise 3: Product Comparison
Compare two products using a table. Use colspan for a grouped heading that spans both products.