Tutorials


Table Tags


Table tags in HTML are used to create and structure data in tabular form. Tables are useful for displaying information in rows and columns, making it easier to read and understand structured data such as schedules, pricing charts, or comparisons.

Key Table Tags in HTML

  1. <table> (Table Tag)

    • Description: The <table> tag is the container for all table-related tags. It defines the beginning and end of a table.
    • Usage: Used to enclose all rows, columns, headers, and other table elements.
    • Example:
      <table>
    <!-- Table content goes here -->
</table>

  2. <tr> (Table Row Tag)

    • Description: The <tr> tag defines a single row within a table. Each <tr> tag contains one or more cells, represented by <td> or <th> tags.
    • Usage: Used to create rows in the table, where data will be organized horizontally.
    • Example:
      <table>
    <tr>
        <!-- Cells go here -->
    </tr>
</table>

  3. <th> (Table Header Tag)

    • Description: The <th> tag is used to define a header cell in a table. Header cells are typically displayed with bold text and are centered by default. They define the titles of columns or rows.
    • Attributes:
      • scope: Specifies whether the header cell applies to a row, column, or group of rows/columns (e.g., scope="col" or scope="row").
    • Usage: Used to label columns or rows with headings.
    • Example:
      <table>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
    </tr>
</table>

  4. <td> (Table Data Tag)

    • Description: The <td> tag defines a standard data cell in a table. These cells contain the actual data in the table.
    • Usage: Used to create individual cells in a table row, containing the table's data.
    • Example:
      <table>
    <tr>
        <td>Apple</td>
        <td>$1.00</td>
        <td>10</td>
    </tr>
</table>

  5. <thead> (Table Head Tag)

    • Description: The <thead> tag is used to group the header content in a table. It wraps around one or more <tr> tags that contain the header cells (<th> tags).
    • Usage: Used to separate the table header from the body, making the structure more semantic and allowing for better styling and accessibility.
    • Example:
      <table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>
</table>

  6. <tbody> (Table Body Tag)

    • Description: The <tbody> tag is used to group the body content in a table. It contains the main data rows (<tr> tags) of the table.
    • Usage: Used to organize the main data of the table separately from the header and footer.
    • Example:
      <table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>$1.00</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$0.50</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

  7. <tfoot> (Table Footer Tag)

    • Description: The <tfoot> tag is used to group the footer content in a table. It is often used for summary information or totals.
    • Usage: Used to add a footer to the table, which can contain summary data or additional information.
    • Example:
      <table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>$1.00</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$0.50</td>
            <td>20</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$20.00</td>
            <td>30</td>
        </tr>
    </tfoot>
</table>

  8. <caption> (Table Caption Tag)

    • Description: The <caption> tag is used to provide a title or caption for the table. The caption is typically displayed above the table by default.
    • Usage: Provides a brief description or title for the table, improving accessibility and context.
    • Example:
      <table>
    <caption>Product Prices and Quantities</caption>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>$1.00</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$0.50</td>
            <td>20</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$20.00</td>
            <td>30</td>
        </tr>
    </tfoot>
</table>

Example of a Complete Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
</head>
<body>
    <h1>Product List</h1>

    <table border="1">
        <caption>Product Prices and Quantities</caption>
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Apple</td>
                <td>$1.00</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Banana</td>
                <td>$0.50</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Cherry</td>
                <td>$3.00</td>
                <td>5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td>$22.50</td>
                <td>35</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about