HTML Tables

📘 Introduction to HTML Tables

HTML tables allow you to arrange data into rows and columns, just like in spreadsheets. Tables are commonly used to present tabular data such as pricing, schedules, and reports.

>>"Tables turn raw data into readable, structured content." 🧠

🔧 Basic Table Structure

An HTML table is created using the <table> element along with child elements:

  • <table> – Defines the table
  • <tr> – Table row
  • <th> – Table header cell
  • <td> – Table data cell

Basic Table Example

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jane</td>
    <td>28</td>
  </tr>
  <tr>
    <td>John</td>
    <td>32</td>
  </tr>
</table>

💄 Adding Table Borders

You can add a border to make the table visually clearer:

Table with Border

<table border="1">
  <tr>
    <th>Country</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>India</td>
    <td>New Delhi</td>
  </tr>
</table>

Note

💡 Modern practice prefers using CSS for styling instead of the border attribute.

🧩 Advanced Table Elements

  • <thead> – Groups the header content
  • <tbody> – Groups the body content
  • <tfoot> – Groups the footer content
  • <caption> – Adds a title to the table

Structured Table Example

<table>
  <caption>Student Grades</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>B+</td>
    </tr>
  </tbody>
</table>

📐 Column and Row Span

Use colspan and rowspan attributes to merge cells:

Using Colspan and Rowspan

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Emma</td>
    <td>95</td>
    <td>88</td>
  </tr>
</table>

Note

⚠️ Use colspan and rowspan carefully to ensure accessibility and clarity.

🎨 Styling Tables with CSS

CSS Styling for Tables

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  border: 1px solid #ccc;
  text-align: left;
}

thead {
  background-color: #f5f5f5;
}

Applying these styles makes your table cleaner and more readable.

🧪 Use Case Example: Product List

ProductPriceStock
Laptop$999Available
Smartphone$499Out of Stock
Headphones$199Available

🔗 Learn More

>>“Good tables don’t just display data — they make it understandable.” 📈