HTML Tables

Lesson 1 of 16 Beginner Interactive

Tables display data in rows and columns. Use <table>, <tr>, <th>, and <td>.

Table Elements

<table> — the table container
<tr> — table row
<th> — table header (bold and centered by default)
<td> — table data (cell)
<thead>, <tbody>, <tfoot> — semantic groups

Tip: Use tables only for tabular data, not for page layout.

Syntax

HTML

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ali</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

Basic HTML Table

HTML

<!DOCTYPE html>
<html>
<body>
    <table border="1" cellpadding="8" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Language</th>
                <th>Level</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>JavaScript</td>
                <td>Advanced</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>Python</td>
                <td>Intermediate</td>
            </tr>
            <tr>
                <td>Charlie</td>
                <td>HTML/CSS</td>
                <td>Beginner</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Try It Yourself

Practice

Exercise

Create a table with 3 columns and 2 data rows.

Answer

<table border="1">
    <tr><th>A</th><th>B</th><th>C</th></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
</table>

Quick Quiz

Which tag defines a table row?

<td>

<tr>

<th>

<row>

<tr> defines a table row.

Interview Questions

No. Tables should only be used for tabular data. For page layout, use CSS Flexbox or Grid. Tables cause accessibility issues and are harder to maintain when used for layout.

Tutorial Complete

Back to HTML