HTML Tables: Creating and Structuring Data

    HTML-Logo

    In this tutorial, we will be learning about HTML tables and how we can structure data using them.

    What are HTML tables?

    HTML tables are a powerful tool for displaying complex data. From a semantic perspective, tables should be used to represent data in a tabular format (i.e., rows and columns). They shouldn't be used solely for page layout as this can create accessibility issues.

    Creating a Basic HTML Table

    Creating a basic HTML table involves using the following tags:

    • <table>: This is the container for the table.
    • <tr>: This defines a table row.
    • <td>: This defines a table data/cell.
    • <th>: This defines a table header.

    Example:

    <table>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
        </table>

    output:

    Header 1 Header 2
    Row 1 Data 1 Row 1 Data 2

    The above code will create a simple table with a single row of headers and a single row of data.

    Table Head, Body, and Footer

    You can further organize your tables with the following tags:

    • <thead>: This defines a set of rows defining the head of the columns of the table.
    • <tbody>: This defines a set of rows defining the main content of the table.
    • <tfoot>: This defines a set of rows summarizing the columns of the table.

    Example:

    <table>
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Footer 1</td>
                    <td>Footer 2</td>
                </tr>
            </tfoot>
        </table>

    output:

    Header 1 Header 2
    Row 1 Data 1 Row 1 Data 2
    Footer 1 Footer 2

    The above code will create a table with a header, body, and footer. This is a good way to organize and structure complex data in your tables.

    That's it for this tutorial! You should now have a good understanding of how to create and structure HTML tables. Happy coding!