HTML Tables

HTML tables are used to display data in rows and columns.

What is a Table?

An HTML table is created using the <table> element and is made up of rows (<tr>) and cells (<td> or <th>).

Common Table Elements

<table>   - Defines a table
<tr>      - Table row
<th>      - Header cell (bold & centered)
<td>      - Data cell
<thead>   - Group of header content
<tbody>   - Group of body content
<tfoot>   - Group of footer content
<caption> - Table title

Basic Table Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Table Example</title>
</head>
<body>

  <h2>Student Data</h2>

  <table border="1">
    <caption>Student Information</caption>

    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Course</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Rahul</td>
        <td>20</td>
        <td>Web Development</td>
      </tr>
      <tr>
        <td>Anjali</td>
        <td>22</td>
        <td>Data Science</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td colspan="3">Total Students: 2</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

Table Attributes

border     - Adds border to table
colspan    - Merge columns
rowspan    - Merge rows

Why Use Tables?

Structured Data — Organizes information clearly
Readability — Easy to scan rows and columns
Comparison — Ideal for comparing data
Accessibility — Works well with screen readers when structured properly

💡 Rule of thumb: Use tables only for tabular data, not for page layout.