HTML Tables

HTML Tutorial

 HTML Tables

HTML Tables are used to display data in rows and columns, such as reports, price lists, timetables, and comparisons.

 1. Basic Table Structure

Tags Explained

  • <table> → table container

  • <tr> → table row

  • <th> → table header (bold & centered)

  • <td> → table data (cell)

2. Adding Borders (CSS Way)

  • border-collapse: collapse; removes double borders

 3. Table with Caption

 4. Colspan (Merge Columns)

 5. Rowspan (Merge Rows)

 6. Table Head, Body, Footer (Best Practice)


 

  • Improves readability & accessibility

 7. Cell Padding & Spacing (CSS)

 8. Responsive Table (Basic Idea)

 Scrolls on small screens

 Common Mistakes

  • Using tables for page layout (use CSS Grid/Flexbox instead)
  • Forgetting <th> for headings
  • No <caption> for important data tables
  • Inline borders instead of CSS

 Key Points to Remember

  • Tables are for tabular data only

  • Use <th> for headers

  • Use CSS for styling

  • <thead>, <tbody>, <tfoot> are best practice

  • Make tables responsive for mobile

You may also like...