? HTML Tables

? Quick Overview

HTML tables are used to display structured data in rows and columns. A table is created using the <table> element along with <tr> (table row), <th> (table header), and <td> (table data).

Tables are ideal for showing reports, schedules, and comparison data. Modern HTML uses tables only for tabular data, not for general page layout.

? Key Concepts

<table>: Wraps the entire table structure.
<tr>: Defines a single row inside the table.
<th>: Table header cell, usually bold and centered by default.
<td>: Table data cell that stores actual values.
border: Attribute or CSS used to add borders to table cells.
colspan: Makes a cell span across multiple columns (horizontal merge).
rowspan: Makes a cell span across multiple rows (vertical merge).
border-collapse: CSS property that combines adjacent borders into a single border.

? Syntax and Structure

A basic HTML table needs a table element and at least one row of header cells followed by rows of data cells.

? Basic Table Structure

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

? Code Examples

? Example – Simple table with headers

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

? Example – Using colspan and rowspan

<table border="1">
  <tr>
    <th colspan="2">Employee</th>
  </tr>
  <tr>
    <td rowspan="2">John</td>
    <td>Manager</td>
  </tr>
  <tr>
    <td>IT Department</td>
  </tr>
</table>

? Example – Table styled with CSS

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
</style>

<table>
  <tr>
    <th>Country</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>India</td>
    <td>New Delhi</td>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington, D.C.</td>
  </tr>
</table>

? Live Output / Explanation

? Output – Simple Name and Age table

This table has two columns and two data rows. The first row contains headers, and the next rows contain values.

Name	Age
Alice	24
Bob	30

? Output – Colspan and Rowspan

The header spans two columns using colspan="2", and the cell with "John" spans two rows using rowspan="2".

Employee
John	Manager
John	IT Department

? Output – Styled Country/Capital table

The table below uses CSS for cleaner borders, padding, and a colored header row.

Country	Capital
India	New Delhi
USA	Washington, D.C.

? Tips & Best Practices

Use border-collapse: collapse; for clean, merged borders.
Always define headers with <th> for better accessibility and semantics.
Keep each row consistent (same number and order of cells).
Prefer CSS for styling instead of inline border attributes.
Use colspan and rowspan sparingly to avoid overly complex layouts.

? Try It Yourself

Create a table showing student names, marks, and grades.
Style your table with alternating row colors using CSS (zebra stripes).
Add a summary row at the bottom using colspan to merge cells.
Design a simple timetable using rows as days and columns as time slots.

? Summary

HTML tables display data in a grid using <table>, <tr>, <th>, and <td>.
colspan and rowspan let you merge cells horizontally and vertically.
Use CSS (borders, padding, backgrounds) to make tables more readable and attractive.
Reserve tables for tabular data, not for general layout.
Keep structure consistent and accessible with proper headers and clear labeling.