Each column or row in an HTML table can have a header, as well as many columns
and rows.

Table headers in HTML

The th components are used to define
table headings. A table cell is represented by each
th element.


Preview:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Table headers in HTML</title>
    <style>
     table, th, td {
        border:1px solid green;
      border-collapse: collapse;
  }
  </style>
</head>
<body>

    <h2>To define table headers, use the TH element.</h2>

    <table style=“width:100%”>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Std</th>
    </tr>
    <tr>
        <td>Rutu</td>
        <td>Rastoki</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Ramila</td>
        <td>shaikh</td>
        <td>6</td>
    </tr>
    <tr>
        <td>Nayna</td>
        <td>Puri</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>
Example of Table headers in HTML

Horizontal Table Headers

The first cell in each row should be defined as a
<th> element in order to use the
first column as table headers:

If the first table cell in each table row is set to a TH element, the first
column becomes the table header:


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Horizontal Table Headers</title>
    <style>
     table, th, td {
        border:1px solid green;
      border-collapse: collapse;
  }
  </style>
</head>
<body>

    <h2>If the first table cell in each table row is set to a TH element, the first column becomes the table header:</h2>

    <table style=“width:100%”>
      <tr>
        <th>Firstname</th>
        <td>Jesika</td>
        <td>Eva</td>
    </tr>
    <tr>
        <th>Lastname</th>
        <td>Suthar</td>
        <td>Jakson</td>
    </tr>
    <tr>
        <th>Age</th>  
        <td>25</td>
        <td>44</td>
    </tr>
    </table>

</body>
</html>

Horizontal Table Headers

Table Headers – Align

Table headers are bold and centered by default:

Use the CSS text-align property to right the table headers:


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”><!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Table Headers – Align</title>
    <style>
        table, th, td {
            border:1px solid green;
            border-collapse: collapse;
        }
        th {
            text-align: right;
        }
  </style>
</head>
<body>

    <h2>Right-align Headers</h2>
    <p>Use the CSS text-align property to right the table headings.</p>
    <table style=“width:100%”>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Std</th>
        </tr>
        <tr>
            <td>Joy</td>
            <td>Saikh</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Eva</td>
            <td>Jill</td>
            <td>10</td>
        </tr>
    </table>
</body>

Table Headers - Align

—————————————————————————————————————————–
MR STAR EDIT
Rate this post

Categorized in: