HTML Tables

HTML Tables can be used to display data in tabular fashion. In earlier days, HTML tables for used for layout design. But with modern features like flexbox and grid, we don’t use HTML tables for layouts anymore.

<table></table> tag is used to create a table
A table has two parts
- <thead></thead> denotes the header part of a table
- <tbody></tbody> denotes the body of a table
We fill out a HTML table row by row. We use <tr></tr> tag for denoting a row inside a table
The border attribute to declare the thickness of border in HTML table
The <th></th> tag denotes heading data in a table
The <td></td> tag denotes data in row or a cell
We can use the rowspan and colspan attributes in <td></td> to make a cell take multiple rows and columns

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Tables</title>
</head>
<body>
    <table border="1">
        <thead bgcolor="#999121">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <h1>Hello</h1>
                </td>
                <td>30</td>
                <td rowspan="2">
                    <table border="1">
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <!-- <td>Los Angeles</td> -->
            </tr>
            <tr>
                <td>Mike Johnson</td>
                <td>35</td>
                <td>Chicago</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

It is not possible for us to cover all HTML tags in this small time, but please feel free to see - MDN for latest documentation regarding HTML tags.