HTML

HTML

πŸ“Œ HTML Table

1. Introduction β€” What is a Table ?

Tables are used to present data in a structured way using rows and columns.

In HTML, a table is built with the <table> tag, and its content is organized using:

  • <tr> β†’ table row
  • <th> β†’ header cell
  • <td> β†’ data cell
HTML

<!-- Basic table: 2 columns, 2 rows -->
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Michale</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Wayne</td>
        <td>25</td>
    </tr>
</table>

2. Table Headers (<th>) and Rows (<tr>)

Header cells (<th>) are typically displayed bold and centered by default, making them useful for labeling columns or rows.

Rows are created using (<tr>), and each row contains cells.

HTML

<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
    </tr>
    <tr>
        <td>Mouse</td>
        <td>200β‚Ί</td>
        <td>50</td>
    </tr>
</table>

3. Cells: <td> (Table Data)

Each piece of data inside the table is placed within a (<td>) element.

These cells form the main content of your table.

4. colspan and rowspan β€” Merging Cells

Sometimes you may want a cell to cover multiple columns or rows :

  • colspan β†’ merges columns
  • rowspan β†’ merges rows
HTML

<table border="1">
    <tr>
        <th>Name</th>
        <th colspan="2">Contact</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Email</td>
        <td>555 55 55</td>
    </tr>
    <tr>
        <td rowspan="2">Emily</td>
        <td>Address</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Birth Year</td>
        <td>1990</td>
    </tr>
</table>

5. Table Title and Structure

For larger or more complex tables, you can organize the structure using semantic tags :

  • <caption> β†’ adds a title
  • <thead> β†’ header section
  • <tbody> β†’ main content
  • <tfoot> β†’ footer section

This makes the table easier to read, style, and manage.

HTML

<table border="1">
     <caption>Employee List</caption>
    <thead>
            <tr><th>Name</th><th>Position</th></tr>
    </thead>
    <tbody>
            <tr><td>John</td><td>Developer</td></tr>
            <tr><td>Michael</td><td>Designer</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">Total: 2</td></tr>
    </tfoot>
</table>

6. Styling Tables with CSS

HTML defines the structure, but CSS controls the appearance.

Instead of using old HTML attributes like border, modern practice is to style tables with CSS.

HTML

<style>
table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #999; padding: 8px; text-align: left; }
    thead { background: #f4f4f4; }
    tr:nth-child(even) { background: #fafafa; }
</style>
<table>;
<thead><tr><th>Title</th><th>Value</th></tr></thead>
    <tbody>
        <tr><td>A</td><td>1</td></tr>
        <tr><td>B</td><td>2</td></tr>
    </tbody>
</table>

7. Accessibility

To make tables understandable for screen readers and assistive technologies :

  • Use scope="col", for column headers
  • Use scope="row", for row headers

This helps define clear relationships between headers and data.

HTML

<table>;
    <tr>
        <th scope="col">Product</th>
        <th scope="col">Price</th>
    </tr>
    <tr>
        <th scope="row">Keyboard</th>
        <td>300β‚Ί</td>
    </tr>
</table>

For more advanced cases, attributes like id, headers, or ARIA roles can be used.

8. Responsive (Mobile-Friendly) Tables

Tables can become too wide on small screens.

To improve usability on mobile devices :

  • Enable horizontal scrolling
  • Hide less important columns
  • Or transform the layout into card-style designs

Simple scrollable example :

HTML

<div style="overflow-x:auto;">
    <table>
        <!-- large table content -->
    </table>
</div>

For more advanced cases, attributes like id, headers, or ARIA roles can be used.

9. Example β€” Mini Project: Price List Table

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Price List</title>
        <style>
            table { border-collapse: collapse; width: 100%; }
                th, td { border: 1px solid #ddd; padding: 10px; }
                thead { background: #f2f2f2; }
                tr:hover { background: #f9f9f9; }
                @media (max-width:600px){
                table { font-size: 14px; }
            }
        </style>
    </head>
    <body>
        <h2>Price List</h2>
        <div style="overflow-x:auto;">
            <table>
                <caption>2025 Product Prices</caption>
                <thead>
                    <tr><th>Product</th><th>Category</th><th>Price</th><th>Stock</th></tr>
                </thead>
                <tbody>
                    <tr><td>Mouse</td><td>Accessory</td><td>200β‚Ί</td><td>120</td></tr>
                    <tr><td>Keyboard</td><td>Accessory</td><td>450β‚Ί</td><td>60</td></tr>
                    <tr><td>Monitor 24"</td><td>Display</td><td>3200β‚Ί</td><td>22</td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

  • Quick Tips / Best Practices

  • Use semantic tags like <caption>, <thead>, <tbody>, <tfoot>
  • Style tables with CSS instead of HTML attributes
  • For large data, consider pagination or filtering
  • Improve accessibility with proper labels and contrast
  • Always think about mobile usability

Html Favicon
Html List