Html Th

HTML th

Created By: chatGPT

HTML <th> ElementsThe <th> tag in HTML is used to define a table header cell. It is typically placed within a <table> element and works in conjunction with <tr> (table row) and <td> (table data) elements.Using the <th> tag helps to provide structure and allows browsers and accessibility tools to properly interpret the data. By default, header cells are bold and centered, which helps them stand out in the table.

Here is an example of how to use <th> within a basic table structure:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Occupation</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>Developer</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>Designer</td>
    </tr>
</table>

In the example above:

The first row of the table contains <th> elements representing the header names for each column.
The subsequent rows use <td> to define the data corresponding to those headers.

You can also use the scope attribute in <th> to define whether it is a header for a row or a column:

For example:

<table>
    <tr>
        <th scope="col">Product</th>
        <th scope="col">Price</th>
    </tr>
    <tr>
        <th scope="row">Laptop</th>
        <td>$1000</td>
    </tr>
    <tr>
        <th scope="row">Smartphone</th>
        <td>$500</td>
    </tr>
</table>

In this case:

The scope="col" identifies the headers for columns, while scope="row" identifies the headers for rows. This provides clearer context for both users and screen readers.

In summary, the <th> element plays a crucial role in creating organized and accessible tables in HTML.