QuerySquish.com

In the previous lesson, we learned about HTML forms. Now, let's learn about HTML tables and how to use them to display tabular data.

Creating a Table

HTML tables are used to display data in a tabular format. Here is a basic example of a table:

    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>30</td>
            <td>Los Angeles</td>
        </tr>
    </table>
    

Table Elements

Here are some common table elements that you will use frequently:

• <table>: Defines a table
• <tr>: Defines a row in a table
• <th>: Defines a header cell in a table
• <td>: Defines a cell in a table
• <caption>: Defines a table caption
• <thead>: Groups the header content in a table
• <tbody>: Groups the body content in a table
• <tfoot>: Groups the footer content in a table

Example Usage

Let's see how to use some of these table elements in an HTML document:

    <table>
        <caption>Student Grades</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Math</th>
                <th>Science</th>
                <th>English</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>A</td>
                <td>B</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>B</td>
                <td>A</td>
                <td>C</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">End of Table</td>
            </tr>
        </tfoot>
    </table>