<th></th> tag HTML

Example

A simple <th> tag that open PNLdev.com link:

<table>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>PHP</td>
<td>PYTHON</td>
</tr>
<tr>
<td>JS</td>
<td>SQL</td>
</tr>
</table>

Laboratory

description & Usage

The <th> tag forms the main cell of a <table> tag.

The text loaded in the <th> tag is automatically larger (more pixels) and in a more specific position (in the middle of the fold) compared to other cells.

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<th>

Attributes

Attributes	Values	Description
colspan	number	en
headers	header-id	en
rowspan	number	en
scope	col , colgroup , row , rowgroup	en

Global Attributes

The th tag supports the HTML Global Attributes.

Event Attributes

The th tag supports the HTML Event Attributes.

More Examples

Example

HTML A simple code example of the <textarea> tag - Example #1

<table style="width:100%">
    <tr>
        <th style="text-align:left">Coffee</th>
        <th style="text-align:left">Tea</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>masala tea</td>
    </tr>
    <tr>
        <td>Latte</td>
        <td>Saffron tea</td>
    </tr>
</table>

Laboratory

Example

HTML <th> tag with custom style -Example #2

<table>
    <tr>
        <th style="background-color: #38ff00;">Coffee</th>
        <th style="background-color: #19d4ff;">Tea</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>masala tea</td>
    </tr>
    <tr>
        <td>Latte</td>
        <td>Saffron tea</td>
    </tr>
</table>

Laboratory

Example

HTML <th> tag with custom style -Example #3

<table>
    <tr>
        <th style="height:100px">Coffee</th>
        <th style="height:100px">Tea</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>masala tea</td>
    </tr>
    <tr>
        <td>Latte</td>
        <td>Saffron tea</td>
    </tr>
</table>

Laboratory

Example

HTML <th> tag with custom style -Example #4

<table>
    <tr>
        <th>HTML</th>
        <th style="white-space:nowrap">HTML: Web markup language for structuring and communicating content on web pages</th>
    </tr>
    <tr>
        <td>css</td>
        <td>js</td>
    </tr>
</table>

Laboratory

Example

HTML <th> tag with custom style -Example #5

<table style="width:25%;">
    <tr style="height:100px">
        <th style="vertical-align:bottom">Coffee</th>
        <th style="vertical-align:bottom">Tea</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>masala tea</td>
    </tr>
</table>

Laboratory

Example

HTML <th> tag with custom style -Example #6

<table style="width:100%;">
    <tr>
        <th style="width:65%;">Coffee</th>
        <th style="width:35%;">Tea</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>masala tea</td>
    </tr>
</table>

Laboratory

Example

HTML <th> tag with custom style -Example #7

<head>
    <style>
        tbody, th, td{
        	border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>name</th>
            <th>email</th>
            <th>tel</th>
        </tr>
        <tr>
            <td>ali heydari</td>
            <td>aliheydari@gmail.com</td>
            <td>09124552545</td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <th>name</th>
            <td>ali heydari</td>
        </tr>
        <tr>
            <th>email</th>
            <td>aliheydari@gmail.com</td>
        </tr>
        <tr>
            <th>tel</th>
            <td>09124552545</td>
        </tr>
    </table>
</body>

Laboratory

Example

HTML <th> tag with custom style -Example #8

<table>
    <caption>All kinds of tea and coffee</caption>
    <tr>
        <th>Coffee</th>
        <th>Tea</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>masala tea</td>
    </tr>
    <tr>
        <td>Latte</td>
        <td>Saffron tea</td>
    </tr>
</table>

Laboratory

Default CSS

Most browsers will display the th tag with the following default style:

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
}