HTML Tables

📊 HTML Tables

HTML Tables are used to display data in rows and columns, making them ideal for organizing schedules, reports, comparisons, and structured content. With proper semantics and styling, tables become accessible and easy to read.

🧱 Basic Table Structure

Use these tags to create tables:

• <table>: Table container
• <tr>: Table row
• <th>: Header cell (bold by default)
• <td>: Data cell

🎨 Example: Simple Table with Styling

➕ Spanning Rows and Columns

✅ colspan (Merge columns):

✅ rowspan (Merge rows):

📌 Example:

🔧 Table Sections

Use table sections for semantic clarity:

• <thead>: Header row(s)
• <tbody>: Main data
• <tfoot>: Footer (totals or summaries)

✅ Example:

♿ Accessibility & Semantics

• Use <th> for headers and <td> for data
• Add scope="col" or scope="row" to <th>
• Include a <caption> to describe the table:

📱 Responsive Tables (for Mobile)

✅ Key Takeaways

• Use <table>, <tr>, <th>, <td> for tabular data
• Enhance readability with CSS styling
• Use colspan and rowspan to merge cells
• Use <thead>, <tbody>, <tfoot> for structure
• Add <caption> and scope for accessibility
• Make tables responsive using overflow-x and media queries