Advanced HTML Tables - Complete Reference

📊 HTML Tables Overview

What are HTML Tables?

HTML tables are used to display data in rows and columns. They consist of table elements that define the structure, headers, and content of tabular data.

Table Structure Elements

Element	Purpose	Description
<table>	Container	Defines the table structure
<caption>	Table Title	Provides a caption for the table
<thead>	Header Section	Groups header content
<tbody>	Body Section	Groups body content
<tfoot>	Footer Section	Groups footer content
<tr>	Table Row	Defines a table row
<th>	Header Cell	Defines a header cell
<td>	Data Cell	Defines a data cell

🏗️ Basic Table Structure

Simple Table Example

**Student Information**
ID	Name	Department	Grade
232002256	Majharul Islam	CSE	A+
232002257	John Doe	CSE	A
232002258	Jane Smith	EEE	A-

<table>
    <caption>Student Information</caption>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Department</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>232002256</td>
            <td>Majharul Islam</td>
            <td>CSE</td>
            <td>A+</td>
        </tr>
        <tr>
            <td>232002257</td>
            <td>John Doe</td>
            <td>CSE</td>
            <td>A</td>
        </tr>
    </tbody>
</table>
                

⚙️ Table Attributes

Colspan Attribute

Merges cells horizontally across multiple columns.

<td colspan="2">Spans 2 columns</td>
<td colspan="3">Spans 3 columns</td>
                    

Use for: Merging header cells, spanning data across columns

Rowspan Attribute

Merges cells vertically across multiple rows.

<td rowspan="2">Spans 2 rows</td>
<td rowspan="3">Spans 3 rows</td>
                    

Use for: Merging cells vertically, creating side headers

Scope Attribute

Specifies which cells a header applies to.

<th scope="col">Column header</th>
<th scope="row">Row header</th>
<th scope="colgroup">Column group</th>
                    

Use for: Accessibility, screen reader support

Headers Attribute

Links a cell to specific header cells.

<td headers="col1 col2">Cell content</td>

Use for: Complex tables, accessibility

🎯 Advanced Table Examples

Table with Colspan and Rowspan

**CSE Department Schedule**
Computer Science & Engineering
Student ID	Name	Program
Student ID	Name	Day	Evening
232002256	Majharul Islam	Yes	No
232002257	John Doe	No	Yes

<table>
    <caption>CSE Department Schedule</caption>
    <tr>
        <th colspan="4">Computer Science & Engineering</th>
    </tr>
    <tr>
        <th rowspan="2">Student ID</th>
        <th rowspan="2">Name</th>
        <th colspan="2">Program</th>
    </tr>
    <tr>
        <th>Day</th>
        <th>Evening</th>
    </tr>
    <tr>
        <td>232002256</td>
        <td>Majharul Islam</td>
        <td>Yes</td>
        <td>No</td>
    </tr>
</table>
                

Table with Footer Section

**Monthly Sales Report**
Product	January	February	March
Laptop	50	65	70
Mouse	120	110	130
Total	170	175	200

<table>
    <caption>Monthly Sales Report</caption>
    <thead>
        <tr>
            <th>Product</th>
            <th>January</th>
            <th>February</th>
            <th>March</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>50</td>
            <td>65</td>
            <td>70</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <th>170</th>
            <th>175</th>
            <th>200</th>
        </tr>
    </tfoot>
</table>
                

📅 Class Schedule Table Example

Professional Class Routine Table

**Teacher: Tanpia Tasnim - Class Routine**
Time	08:30-10:00	10:00-11:30	11:30-01:00	03:00-04:30
Monday	CSE 300 B-1005		Counseling Hour	Various committee meetings
Tuesday		Counseling Hour	Meeting with Thesis Project Students
Wednesday	CSE 201 B-411		CSE 301 D-702	Various committee meetings
Thursday			Meeting with Thesis Project Students	Weekly AC Meeting
Friday	CSE 312 B-802		CSE 311 B-411	Counseling Time

<table>
    <caption>Teacher: Tanpia Tasnim - Class Routine</caption>
    <thead>
        <tr>
            <th>Time</th>
            <th>08:30-10:00</th>
            <th>10:00-11:30</th>
            <th>11:30-01:00</th>
            <th>01:30-03:00</th>
            <th>03:00-04:30</th>
            <th>04:30-06:00</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Monday</th>
            <td>CSE 300<br>B-1005</td>
            <td></td>
            <td>Counseling Hour</td>
            <td></td>
            <td colspan="2">Various committee meetings</td>
        </tr>
    </tbody>
</table>
                

🎨 Table Styling with CSS

CSS Table Properties

Property	Description	Example
border-collapse	How borders are handled	border-collapse: collapse;
border-spacing	Space between cells	border-spacing: 5px;
table-layout	Table layout algorithm	table-layout: fixed;
empty-cells	Show/hide empty cells	empty-cells: hide;
caption-side	Caption position	caption-side: bottom;

/* Professional Table Styling */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
    vertical-align: middle;
}

th {
    background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

tr:nth-child(even) {
    background-color: #f8f9fa;
}

tr:hover {
    background-color: #e8f4fd;
    transition: background-color 0.3s ease;
}

caption {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #2c3e50;
}
            

📱 Responsive Tables

Making Tables Mobile-Friendly

/* Responsive Table Techniques */

/* 1. Horizontal Scroll */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 2. Stacked Layout for Mobile */
@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }
    
    td {
        border: none;
        position: relative;
        padding-left: 50%;
    }
    
    td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
    }
}

/* 3. Card Layout for Mobile */
@media (max-width: 600px) {
    .table-card {
        display: block;
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
    }
}
                

♿ Table Accessibility

                ✅ Accessibility Best Practices:
                Use Table Headers: Always include <th> elements
Provide Captions: Use <caption> for table titles
Use Scope: Specify header scope (col, row, colgroup)
Headers Attribute: Link cells to headers in complex tables
Semantic Structure: Use thead, tbody, tfoot
Descriptive Text: Provide alternative text for data

            

Accessible Table Example

<table>
    <caption>Student Grade Report for Fall 2025 Semester</caption>
    <thead>
        <tr>
            <th scope="col">Student ID</th>
            <th scope="col">Name</th>
            <th scope="col">Course</th>
            <th scope="col">Grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">232002256</th>
            <td>Majharul Islam</td>
            <td>Web Programming</td>
            <td>A+</td>
        </tr>
    </tbody>
</table>
                

✅ Table Best Practices

                ✅ Good Practices:
                Use for Tabular Data: Only use tables for data that belongs in rows and columns
Proper Structure: Use thead, tbody, tfoot for organization
Clear Headers: Always include descriptive headers
Consistent Formatting: Maintain consistent cell formatting
Responsive Design: Make tables work on all devices
Accessibility: Ensure screen reader compatibility

            

❌ Common Mistakes:

Layout Tables: Don't use tables for page layout
Missing Headers: Always include table headers
Complex Nesting: Avoid overly complex table structures
Poor Accessibility: Don't ignore accessibility requirements
Fixed Widths: Avoid fixed pixel widths for responsiveness

🌍 Real-World Table Examples

Financial Report Table

<table>
    <caption>Quarterly Financial Report 2025</caption>
    <thead>
        <tr>
            <th scope="col">Quarter</th>
            <th scope="col">Revenue</th>
            <th scope="col">Expenses</th>
            <th scope="col">Profit</th>
            <th scope="col">Growth %</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Q1</th>
            <td>$50,000</td>
            <td>$30,000</td>
            <td>$20,000</td>
            <td>+5.2%</td>
        </tr>
        <tr>
            <th scope="row">Q2</th>
            <td>$55,000</td>
            <td>$32,000</td>
            <td>$23,000</td>
            <td>+15.0%</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>$105,000</td>
            <td>$62,000</td>
            <td>$43,000</td>
            <td>+20.2%</td>
        </tr>
    </tfoot>
</table>
                

Product Comparison Table

<table>
    <caption>Smartphone Comparison 2025</caption>
    <thead>
        <tr>
            <th scope="col">Feature</th>
            <th scope="col">iPhone 15</th>
            <th scope="col">Samsung S24</th>
            <th scope="col">Pixel 8</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Price</th>
            <td>$799</td>
            <td>$699</td>
            <td>$599</td>
        </tr>
        <tr>
            <th scope="row">Camera</th>
            <td>48MP</td>
            <td>50MP</td>
            <td>50MP</td>
        </tr>
        <tr>
            <th scope="row">Battery</th>
            <td>3349mAh</td>
            <td>4000mAh</td>
            <td>4575mAh</td>
        </tr>
    </tbody>
</table>
                

📊 Advanced HTML Tables

Complete Guide to HTML Table Elements and Techniques