Tables for Data Display in HTML

Introduction to HTML Tables Tables are used to organize and display data in rows and columns. Basic Table Structure Explanation of Table Elements Table Styling & Accessibility Adding Borders and Spacing Adding Captions for Accessibility Merging Cells Colspan (Merge Columns) Rowspan (Merge Rows) Responsive Tables HTML tables help display structured data effectively. Next, we’ll cover […]

  • Post author:
  • Post category: HTML
  • Reading time: 34 mins read
  • Post last modified: April 3, 2025

Introduction to HTML Tables

Tables are used to organize and display data in rows and columns.

Basic Table Structure

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>
HTML

Explanation of Table Elements

  • <table>: Defines a table.
  • <tr>: Represents a row.
  • <th>: Defines a header cell (bold & centered by default).
  • <td>: Represents a standard table cell.

Table Styling & Accessibility

Adding Borders and Spacing

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: left;
    }
</style>
HTML

Adding Captions for Accessibility

<table>
    <caption>Monthly Sales Data</caption>
    <tr>
        <th>Month</th>
        <th>Sales</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$5000</td>
    </tr>
</table>
HTML

Merging Cells

Colspan (Merge Columns)

<td colspan="2">Merged Columns</td>
HTML

Rowspan (Merge Rows)

<td rowspan="2">Merged Rows</td>
HTML

Responsive Tables

<style>
    table {
        width: 100%;
        overflow-x: auto;
        display: block;
    }
</style>
HTML

HTML tables help display structured data effectively. Next, we’ll cover HTML forms.

Tags:

Leave a Reply