HTML Tables

Tabular structures organize data into grid-based rows and columns, enabling systematic presentation through table, tr, th, and td elements with header annotations and caption support.

Table elements arrange information into organized matrices, facilitating clear presentation of datasets including financial records, comparative analyses, schedules, and statistical reports through structured row-column layouts.

Defining Tabular Data Structures

Table constructs render data within grid frameworks utilizing intersecting rows and columns. These organizational tools prove indispensable for displaying systematically arranged information with clarity.

Strategic Table Applications

  • Monetary summaries and analytical datasets
  • Side-by-side product evaluations
  • Temporal planning grids and calendars
  • Survey results and research metrics
  • Personnel registries and contact databases
  • Cost breakdowns and capability matrices

Foundational Table Architecture

Table construction employs coordinated elements: <table> containers, <tr> (row definitions), <th> (header cells), and <td> (data cells).

Elementary Table Construction

<h2>Learning Path Investment Overview</h2>

<!-- Fundamental table pattern -->
<table>
    <tr>
        <th>Program</th>
        <th>Timeline</th>
        <th>Investment</th>
    </tr>
    <tr>
        <td>Markup Fundamentals</td>
        <td>4 weeks</td>
        <td>No charge</td>
    </tr>
    <tr>
        <td>Stylesheet Mastery</td>
        <td>6 weeks</td>
        <td>No charge</td>
    </tr>
    <tr>
        <td>Scripting Proficiency</td>
        <td>8 weeks</td>
        <td>No charge</td>
    </tr>
</table>

<p>Learn web development at <strong>htmlfreecodes.com</strong></p>

Result:

HTML Free Codes Course Pricing

Course Duration Price
HTML Basics 4 weeks Free
CSS Styling 6 weeks Free
JavaScript 8 weeks Free

Learn web development at htmlfreecodes.com

Advanced Table Structure

HTML tables can include additional structural elements like <thead>, <tbody>, <tfoot>, and <caption> for better organization and accessibility.

Structured Table with Header, Body, and Footer

<table>
    <caption>HTML Free Codes Tutorial Statistics</caption>

    <thead>
        <tr>
            <th>Tutorial Topic</th>
            <th>Lessons</th>
            <th>Examples</th>
            <th>Exercises</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>HTML Elements</td>
            <td>15</td>
            <td>45</td>
            <td>30</td>
        </tr>
        <tr>
            <td>CSS Styling</td>
            <td>20</td>
            <td>60</td>
            <td>40</td>
        </tr>
        <tr>
            <td>JavaScript Basics</td>
            <td>25</td>
            <td>75</td>
            <td>50</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td><strong>Total</strong></td>
            <td><strong>60</strong></td>
            <td><strong>180</strong></td>
            <td><strong>120</strong></td>
        </tr>
    </tfoot>
</table>

Result:

HTML Free Codes Tutorial Statistics
Tutorial Topic Lessons Examples Exercises
HTML Elements 15 45 30
CSS Styling 20 60 40
JavaScript Basics 25 75 50
Total 60 180 120

Table Cell Spanning

Use colspan and rowspan attributes to make cells span multiple columns or rows, creating more complex table layouts.

Table with Column and Row Spanning

<table>
    <caption>HTML Free Codes Web Development Roadmap</caption>

    <tr>
        <th colspan="3">Frontend Development Path</th>
    </tr>

    <tr>
        <th>Stage</th>
        <th>Technology</th>
        <th>Timeline</th>
    </tr>

    <tr>
        <td rowspan="2">Beginner</td>
        <td>HTML</td>
        <td>2-4 weeks</td>
    </tr>

    <tr>
        <td>CSS</td>
        <td>4-6 weeks</td>
    </tr>

    <tr>
        <td rowspan="2">Intermediate</td>
        <td>JavaScript</td>
        <td>8-12 weeks</td>
    </tr>

    <tr>
        <td>React/Vue</td>
        <td>6-8 weeks</td>
    </tr>

    <tr>
        <td colspan="3"><em>Continue learning at htmlfreecodes.com</em></td>
    </tr>
</table>

Result:

HTML Free Codes Web Development Roadmap
Frontend Development Path
Stage Technology Timeline
Beginner HTML 2-4 weeks
CSS 4-6 weeks
Intermediate JavaScript 8-12 weeks
React/Vue 6-8 weeks
Continue learning at htmlfreecodes.com

Responsive Table Design

Make tables responsive for mobile devices using CSS techniques like horizontal scrolling, stacking, or hiding columns on smaller screens.

Responsive Table Techniques

<style>
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.responsive-table th,
.responsive-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.responsive-table th {
    background-color: #f39c12;
    color: white;
}

/* Mobile responsive */
@media screen and (max-width: 600px) {
    .responsive-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.table-container {
    overflow-x: auto;
    margin: 20px 0;
}
</style>

<h3>HTML Free Codes Tutorial Progress</h3>

<div class="table-container">
    <table class="responsive-table">
        <thead>
            <tr>
                <th>Student Name</th>
                <th>HTML Progress</th>
                <th>CSS Progress</th>
                <th>JavaScript Progress</th>
                <th>Overall Score</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice Johnson</td>
                <td>95%</td>
                <td>87%</td>
                <td>78%</td>
                <td>87%</td>
            </tr>
            <tr>
                <td>Bob Smith</td>
                <td>88%</td>
                <td>92%</td>
                <td>85%</td>
                <td>88%</td>
            </tr>
            <tr>
                <td>Carol Davis</td>
                <td>92%</td>
                <td>89%</td>
                <td>91%</td>
                <td>91%</td>
            </tr>
        </tbody>
    </table>
</div>

Result:

HTML Free Codes Tutorial Progress

Student Name HTML Progress CSS Progress JavaScript Progress Overall Score
Alice Johnson 95% 87% 78% 87%
Bob Smith 88% 92% 85% 88%
Carol Davis 92% 89% 91% 91%

Table scrolls horizontally on mobile devices

Table Accessibility

Proper table markup with headers, captions, and scope attributes ensures tables are accessible to screen readers and other assistive technologies.

Accessible Table Implementation

<table>
    <caption>
        Monthly Website Statistics for HTML Free Codes
        <br><small>Data updated: January 2024</small>
    </caption>

    <thead>
        <tr>
            <th scope="col">Metric</th>
            <th scope="col">This Month</th>
            <th scope="col">Last Month</th>
            <th scope="col">Change</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Page Views</th>
            <td>245,000</td>
            <td>220,000</td>
            <td>+11.4%</td>
        </tr>
        <tr>
            <th scope="row">Unique Visitors</th>
            <td>85,000</td>
            <td>78,000</td>
            <td>+9.0%</td>
        </tr>
        <tr>
            <th scope="row">Tutorial Completions</th>
            <td>12,500</td>
            <td>11,200</td>
            <td>+11.6%</td>
        </tr>
    </tbody>
</table>

<p>Learn more web development at <strong>htmlfreecodes.com</strong></p>

♿ Table Accessibility Features

  • Caption: Describes table purpose and content
  • Scope attributes: Define header relationships (col/row)
  • Header elements: Use <th> for all headers
  • Logical structure: Group related content with thead/tbody/tfoot
  • Clear labeling: Descriptive header text
  • Summary information: Additional context when needed

Test Your Knowledge

Previous HTML Page Title
Next HTML Lists