HTML Tables

HTML defines the table structure, while CSS controls borders, spacing, typography, colors and responsive presentation.

Example: Basic Table Styling

<style>
    .sales-table {
        width: 100%;
        border-collapse: collapse;
    }

    .sales-table th,
    .sales-table td {
        border: 1px solid #cccccc;
        padding: 10px;
        text-align: left;
    }

    .sales-table thead {
        background-color: #eeeeee;
    }

    .sales-table caption {
        text-align: left;
        font-weight: bold;
        padding-bottom: 10px;
    }
</style>

<table class="sales-table">
    <caption>Monthly Sales</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Revenue</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>₹50,000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>₹65,000</td>
        </tr>
    </tbody>
</table>

In a real application, place the CSS in a reusable stylesheet and use class names that describe the component.

Useful CSS Properties

• border-collapse: controls whether adjacent cell borders are collapsed.
• border-spacing: sets spacing between cell borders when borders are separate.
• padding: adds space inside cells.
• text-align: controls horizontal text alignment.
• vertical-align: controls vertical alignment of cell content.
• width and min-width: influence table sizing and minimum content width.
• caption-side: controls whether the caption is displayed at the top or bottom.

13. Responsive Tables

Tables with many columns can overflow narrow screens. A common solution is to place the table inside a horizontally scrollable container.

Example

<style>
    .table-wrapper {
        max-width: 100%;
        overflow-x: auto;
    }

    .data-table {
        width: 100%;
        min-width: 600px;
        border-collapse: collapse;
    }

    .data-table th,
    .data-table td {
        border: 1px solid #cccccc;
        padding: 8px;
        text-align: left;
    }
</style>

<div class="table-wrapper">
    <table class="data-table">
        <caption>Employee Report</caption>
        <thead>
            <tr>
                <th scope="col">Employee ID</th>
                <th scope="col">Name</th>
                <th scope="col">Department</th>
                <th scope="col">Email</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>101</td>
                <td>Rahul</td>
                <td>Development</td>
                <td>rahul@example.com</td>
                <td>Active</td>
            </tr>
        </tbody>
    </table>
</div>

The wrapper allows horizontal scrolling when the table is wider than the available viewport. Test keyboard access, zoom and touch interaction as well as visual layout.

For simpler tables, the layout may naturally fit the screen without scrolling. Avoid forcing every table to have a large minimum width when it is not necessary.

14. Accessibility Best Practices

Accessible tables help users understand the relationships between headings and values, including users who navigate with screen readers or other assistive technologies.

• Use tables for genuinely tabular information, not general page layout.
• Add a meaningful caption when it helps identify the table.
• Use th for header cells and td for ordinary data cells.
• Use scope="col" and scope="row" for straightforward column and row headers.
• Use id and headers when a complex table requires explicit associations.
• Keep header text descriptive and concise.
• Ensure that important meaning is not communicated by color alone.
• Check that tables remain usable at high zoom levels and on narrow screens.
• Do not use blank cells or merged cells unnecessarily to create visual spacing.
• Test complex tables with actual assistive technologies when possible.

Table Versus Page Layout

Do not use a table to arrange the general layout of a webpage, such as a header, sidebar and footer. Use semantic layout elements and CSS Grid or Flexbox for page layout.

Tables are appropriate when the relationship between rows and columns is part of the information itself, such as an invoice, a price comparison or a report.

15. Real-World Example: Invoice Table

Invoices often contain quantities, unit prices and line totals. The footer can summarize the amount due.

<table>
    <caption>Invoice #INV-1001</caption>

    <thead>
        <tr>
            <th scope="col">Item</th>
            <th scope="col">Quantity</th>
            <th scope="col">Unit Price</th>
            <th scope="col">Total</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Keyboard</th>
            <td>2</td>
            <td>₹1,200</td>
            <td>₹2,400</td>
        </tr>
        <tr>
            <th scope="row">Mouse</th>
            <td>1</td>
            <td>₹600</td>
            <td>₹600</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th scope="row" colspan="3">Grand Total</th>
            <td>₹3,000</td>
        </tr>
    </tfoot>
</table>

The Grand Total cell spans three columns. This example demonstrates a caption, column headers, row headers, a body and a footer.

In a real billing system, calculate totals using the application logic and validate the results on the server. HTML displays the data; it should not be the trusted source for financial calculations.

16. Common HTML Table Mistakes