HTML — Tables in HTML | Tutorials

Tables in HTML

HTML tables are used to present tabular data in rows and columns. They are useful when information has a meaningful relationship between different rows and columns.

Key Idea:

Use HTML tables for data, not for designing the overall layout of a webpage.

1. Creating a Basic HTML Table

A table is created using the <table> element. A row is created using <tr>, while a normal data cell is created using <td>.

Basic Structure

<table>
    <tr>
        <td>HTML</td>
        <td>Web Structure</td>
    </tr>

    <tr>
        <td>CSS</td>
        <td>Web Styling</td>
    </tr>
</table>

Output

HTML	Web Structure
CSS	Web Styling

2. Important Table Elements

Element	Meaning	Purpose
`<table>`	Table	Defines the complete table.
`<tr>`	Table Row	Creates a row in the table.
`<th>`	Table Header	Defines a header cell.
`<td>`	Table Data	Defines a normal data cell.
`<caption>`	Table Caption	Provides a title or description for the table.
`<thead>`	Table Head	Groups header rows.
`<tbody>`	Table Body	Groups the main data rows.
`<tfoot>`	Table Foot	Groups summary or footer rows.
`<colgroup>`	Column Group	Groups one or more columns.
`<col>`	Column	Represents a column within a column group.

3. Table Headings with <th>

The <th> element defines a header cell. Header cells identify what the corresponding rows or columns represent.

Example

<table>

    <tr>
        <th>Name</th>
        <th>Course</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>Alex</td>
        <td>HTML</td>
        <td>92</td>
    </tr>

</table>

Name	Course	Score
Alex	HTML	92

Important:

Use <th> for information that acts as a heading and <td> for ordinary table data.

4. Table Caption

The <caption> element provides a title or brief description of a table.

Example

<table>

    <caption>Course Completion Report</caption>

    <tr>
        <th>Course</th>
        <th>Completion</th>
    </tr>

    <tr>
        <td>HTML</td>
        <td>90%</td>
    </tr>

</table>

Best Practice:

A meaningful caption helps users understand the purpose of a table before reading its contents.

5. <thead>, <tbody> and <tfoot>

HTML allows a table to be divided into logical sections: the header, body and footer.

Example

<table>

    <caption>Course Scores</caption>

    <thead>
        <tr>
            <th>Student</th>
            <th>Score</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Alex</td>
            <td>90</td>
        </tr>

        <tr>
            <td>Maya</td>
            <td>95</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Average</th>
            <td>92.5</td>
        </tr>
    </tfoot>

</table>

Course Scores
Student	Score
Alex	90
Maya	95
Average	92.5

6. colspan — Combining Columns

The colspan attribute allows a cell to span across two or more columns.

Syntax

<td colspan="2">Content</td>

Example

<table>

    <tr>
        <th colspan="2">Student Information</th>
    </tr>

    <tr>
        <td>Name</td>
        <td>Alex</td>
    </tr>

</table>

Student Information
Name	Alex

Remember:

colspan combines cells horizontally across multiple columns.

7. rowspan — Combining Rows

The rowspan attribute allows a cell to span across two or more rows.

Syntax

<td rowspan="2">Content</td>

Example

<table>

    <tr>
        <th rowspan="2">Course</th>
        <th>Module</th>
    </tr>

    <tr>
        <td>HTML Basics</td>
    </tr>

</table>

Course	Module
Course	HTML Basics

Remember:

rowspan combines cells vertically across multiple rows.

8. colspan vs rowspan

Attribute	Direction	Purpose
`colspan`	Horizontal	Makes one cell span multiple columns.
`rowspan`	Vertical	Makes one cell span multiple rows.

Exam Shortcut:

COLspan → Columns
ROWspan → Rows

9. The scope Attribute

The scope attribute helps identify whether a header cell applies to a column, row, column group or row group.

Common Values

Value	Meaning
`col`	The header applies to a column.
`row`	The header applies to a row.
`colgroup`	The header applies to a group of columns.
`rowgroup`	The header applies to a group of rows.

Example

<table>

    <tr>
        <th scope="col">Student</th>
        <th scope="col">Score</th>
    </tr>

    <tr>
        <th scope="row">Alex</th>
        <td>92</td>
    </tr>

</table>

Accessibility Tip:

Using appropriate scope values makes relationships between headers and data clearer to assistive technologies.

10. Complete Semantic Table Example

A professional data table can combine caption, thead, tbody, tfoot, th, td and scope.

<table>

    <caption>Student Performance Report</caption>

    <thead>
        <tr>
            <th scope="col">Student</th>
            <th scope="col">HTML</th>
            <th scope="col">CSS</th>
            <th scope="col">JavaScript</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <th scope="row">Alex</th>
            <td>92</td>
            <td>88</td>
            <td>90</td>
        </tr>

        <tr>
            <th scope="row">Maya</th>
            <td>95</td>
            <td>91</td>
            <td>94</td>
        </tr>

    </tbody>

    <tfoot>
        <tr>
            <th scope="row">Average</th>
            <td>93.5</td>
            <td>89.5</td>
            <td>92</td>
        </tr>
    </tfoot>

</table>

11. <colgroup> and <col>

The <colgroup> element groups one or more columns, while <col> represents an individual column within that group.

Example

<table>

    <colgroup>
        <col>
        <col>
    </colgroup>

    <thead>
        <tr>
            <th>Course</th>
            <th>Duration</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>HTML</td>
            <td>4 Weeks</td>
        </tr>
    </tbody>

</table>

These elements are particularly useful when column-level structure or styling needs to be addressed.

12. Tables with Multiple Header Levels

Tables can contain multiple levels of headings using colspan and rowspan.

Example

<table>

    <thead>

        <tr>
            <th rowspan="2">Student</th>
            <th colspan="2">Programming</th>
        </tr>

        <tr>
            <th>HTML</th>
            <th>Python</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <th scope="row">Alex</th>
            <td>92</td>
            <td>89</td>
        </tr>

    </tbody>

</table>

Student	Programming
Student	HTML	Python
Alex	92	89

13. Understanding Table Structure

Component	Example	Role
Table	`<table>`	Complete table container.
Row	`<tr>`	Horizontal group of cells.
Header Cell	`<th>`	Identifies a row or column.
Data Cell	`<td>`	Contains table data.
Caption	`<caption>`	Identifies the table.
Header Group	`<thead>`	Contains header rows.
Body Group	`<tbody>`	Contains primary data.
Footer Group	`<tfoot>`	Contains totals or summaries.

14. Tables Are for Tabular Data

HTML tables should be used when information naturally forms a relationship between rows and columns.

Appropriate Use	Not Appropriate
Student marks	Page layout
Product comparison	Positioning a logo
Financial records	Creating website columns
Schedules	Building navigation layout

Best Practice:

Use semantic HTML elements and CSS layout techniques such as Flexbox and Grid for webpage layout instead of using tables as a layout mechanism.

15. Responsive Tables

Tables containing many columns may become difficult to read on small screens. A common approach is to place the table inside a horizontally scrollable container.

HTML Structure

<div class="csa-table-wrap">

    <table class="csa-table">

        <thead>
            <tr>
                <th>Student</th>
                <th>HTML</th>
                <th>CSS</th>
                <th>JavaScript</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Alex</td>
                <td>92</td>
                <td>88</td>
                <td>90</td>
            </tr>
        </tbody>

    </table>

</div>

CodeStep Academy Practice:

Keep the table inside the existing csa-table-wrap container and use the existing csa-table class rather than introducing inline or internal CSS.

16. Accessible HTML Tables

Tables should be structured so that users of assistive technologies can understand the relationship between headings and data.

Practice	Purpose
Use `<caption>`	Clearly identifies the purpose of the table.
Use `<th>`	Identifies headings instead of using ordinary data cells.
Use `scope`	Defines the relationship between headers and their data.
Use semantic sections	Separates the header, body and footer of complex tables.
Avoid unnecessary complexity	Makes the table easier to understand and navigate.

17. Common Mistakes

Mistake 1: Using <td> for Every Cell

Header cells should normally use <th> rather than <td>.

Mistake 2: Using Tables for Page Layout

Tables are intended for tabular data, not for constructing the overall layout of a website.

Mistake 3: Forgetting Table Structure

For complex tables, using <thead>, <tbody> and <tfoot> improves semantic structure.

Mistake 4: Incorrect colspan or rowspan

The specified number must correspond correctly to the number of columns or rows being spanned. Incorrect values can produce a broken table structure.

Mistake 5: Using CSS Attributes in HTML for Styling

Modern websites should generally separate structure from presentation. HTML should describe the data structure while CSS should control visual presentation.

18. Interview Questions

Q1. What is an HTML table?

An HTML table is a semantic structure used to present related tabular data in rows and columns.

Q2. What is the difference between <th> and <td>?

<th> represents a header cell, while <td> represents a normal data cell.

Q3. What is the purpose of <tr>?

The <tr> element creates a table row.

Q4. What is the purpose of <caption>?

It provides a title or description that identifies the purpose of the table.

Q5. What is the difference between colspan and rowspan?

colspan allows a cell to span multiple columns, whereas rowspan allows a cell to span multiple rows.

Q6. What is the purpose of <thead>?

It groups the header rows of a table.

Q7. What is the purpose of <tbody>?

It groups the main data rows of a table.

Q8. What is the purpose of <tfoot>?

It groups footer or summary rows, such as totals or averages.

Q9. Why should tables not be used for webpage layout?

Tables represent relationships between data. Using them for layout reduces semantic clarity and makes responsive design and accessibility more difficult.

Q10. What is the purpose of the scope attribute?

It identifies whether a table header applies to a row, column, row group or column group and improves accessibility.

19. Exam Questions

Multiple Choice Questions

1. Which HTML element is used to define a table row?

A. <td>
B. <tr>
C. <th>
D. <row>

Answer: B. <tr>

2. Which element defines a table header cell?

A. <head>
B. <header>
C. <th>
D. <thead>

Answer: C. <th>

3. Which attribute is used to make a cell span multiple columns?

A. rowspan
B. colspan
C. span
D. columns

Answer: B. colspan

4. Which element provides a title for a table?

A. <title>
B. <caption>
C. <heading>
D. <label>

Answer: B. <caption>

Short Answer Questions

Explain the purpose of the <table>, <tr> and <td> elements.
Differentiate between <th> and <td>.
Explain rowspan and colspan with examples.
What is the purpose of <thead>, <tbody> and <tfoot>?
Why is the <caption> element useful?
What is the purpose of the scope attribute?

20. Coding Challenge

Create a table titled Web Development Courses with the following requirements:

Use a <caption>.
Create a semantic <thead>.
Add columns for Course, Level, Duration and Mode.
Add at least five courses.
Use scope="col" for column headings.
Add a <tfoot> containing a summary.
Use colspan at least once.
Place the table inside csa-table-wrap.

Advanced Challenge:

Create a monthly course schedule where one instructor teaches multiple modules. Use both rowspan and colspan to create a multi-level table header.

21. Quick Revision

Concept	Remember
`<table>`	Creates the table.
`<tr>`	Creates a table row.
`<th>`	Creates a header cell.
`<td>`	Creates a data cell.
`<caption>`	Provides the table title/description.
`<thead>`	Groups header rows.
`<tbody>`	Groups main data rows.
`<tfoot>`	Groups summary/footer rows.
`colspan`	Spans multiple columns.
`rowspan`	Spans multiple rows.
`scope="col"`	Header applies to a column.
`scope="row"`	Header applies to a row.
`<colgroup>`	Groups columns.
`<col>`	Represents a column within a column group.

Golden Rule:

Table → Rows → Headers/Data

<table> → <tr> → <th> / <td>

colspan = multiple columns | rowspan = multiple rows