HTML Table Tag

An HTML table is a structured way of presenting data in rows and columns, much like a table in a spreadsheet. Tables allow you to organize information into a grid-like structure, making it easier for users to understand and compare data. HTML tables are created using a combination of specific HTML elements.

the key elements used to create an HTML table:

  1. <table>: This is the container element that defines the start of the table.
  2. <thead>: This optional element is used to group the table header content. It typically contains one or more <tr> (table row) elements with <th> (table header cell) elements inside.
  3. <tbody>: This element groups the main content of the table, which consists of data rows. It contains one or more <tr> elements with <td> (table data cell) elements inside.
  4. <tr>: This element represents a table row. It contains one or more <th> or <td> elements, depending on whether it’s a header row or a data row.
  5. <th>: This element defines a table header cell. It’s used within a <thead> section to indicate the column or row headers.
  6. <td>: This element defines a table data cell. It’s used within a <tbody> section to hold the actual data in each cell.

Here’s an example of an HTML table structure:


<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apples</td>
            <td>$1.00</td>
            <td>150</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>$0.50</td>
            <td>200</td>
        </tr>
        <tr>
            <td>Oranges</td>
            <td>$0.75</td>
            <td>100</td>
        </tr>
    </tbody>
</table>

Result:

ProductPriceStock
Apples$1.00150
Bananas$0.50200
Oranges$0.75100

Leave a comment