HTML <table> structure

I have always LOVED HTML <table>’s structure and been facinated how clever TABLES actually are.

The simplest way to build a table is just to use <table> & <tr> and <td> tags. But better tables acutally have more very useful tags like <thead – table header tag> with <tr – table row> and <th – table header data tag>. But there is also <tbody> and even <tfoot> tags.

The reason why to use independent tags for all TABLE parts is simple.

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

That’s why you should also use <thead>, <tbody> and <tfoot> inside the <table> tag. It gives more info to the browser about your table structure.

HTML <table> also has colspan and cellspan tags to merge columns and cells.

input

<table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>James</td>
                <td>34</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane</td>
                <td>44</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Julia</td>
                <td>44</td>
            </tr>
        </tbody>
        
    </table>

output

ID Name Age
1 James 34
2 Jane 44
3 Julia 44