HTML Table Headers

Output:

th1

HTML Table with Vertical Header

HTML Table with Vertical header is define by placing <th> (table header) elements in the first column within each <tr> (table row).

Example: The example below shows a Vertical Header (first column) table headers.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>HTML Table header</title> 
    <style> 
        h1,h3 { 
            text-align: center; 
            color: green; 
        } 
  
        table { 
            border-collapse: collapse; 
            width: 100%; 
        } 
  
        th, 
        td { 
            border: 1px solid #3a2626; 
            padding: 8px; 
              text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>HTML Table with Vertical Header</h3> 
    <table> 
        <thead> 
            <tr> 
                <th>Name</th> 
                <td>Mahima</td> 
                <td>Shivani</td> 
                <td>Bitto</td> 
                <td>Gauri</td> 
                <td>Kanha</td> 
            </tr> 
            <tr> 
                <th>Class</th> 
                <td>10</td> 
                <td>11</td> 
                <td>9</td> 
                <td>12</td> 
                <td>8</td> 
            </tr> 
            <tr> 
                <th>Roll No</th> 
                <td>1</td> 
                <td>2</td> 
                <td>3</td> 
                <td>4</td> 
                <td>5</td> 
            </tr> 
        </thead> 
    </table> 
  
</body> 
  
</html>

Output:

th2

Align Table Headers

By default, Table Headers are centered. To position them on the left, set the CSS property text-align to left.

Example: The example below shows a Header with left-align table headers.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>HTML Table header</title> 
    <style> 
        h1, 
        h3 { 
            text-align: center; 
            color: green; 
        } 
  
        table { 
            border-collapse: collapse; 
            width: 100%; 
        } 
  
        th { 
            text-align: left; 
        } 
  
        th, 
        td { 
            border: 1px solid #7a3f3f; 
            padding: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>Align Table Headers</h3> 
    <table> 
        <thead> 
            <tr> 
                <th>Name</th> 
                <th>Class</th> 
                <th>Roll No</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>Mahima</td> 
                <td>10</td> 
                <td>1</td> 
            </tr> 
            <tr> 
                <td>Ravi</td> 
                <td>11</td> 
                <td>2</td> 
            </tr> 
            <tr> 
                <td>Krishn</td> 
                <td>8</td> 
                <td>3</td> 
            </tr> 
        </tbody> 
    </table> 
</body> 
  
</html>

Output:

tablealign

Header for Multiple Columns with colspan

The colspan is used to make a table cell span multiple columns horizontally. It is used as an attribute to the <th> or <td> element, defining the number of columns the cell should span.

Example: Implementation of table header for Multiple Columns with colspan.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>HTML colspan attribute</title> 
    <style> 
        h1, 
        h3 { 
            text-align: center; 
            color: green; 
        } 
  
        body { 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            margin: 0; 
        } 
  
        table, 
        th, 
        td { 
            border: 1px solid black; 
            border-collapse: collapse; 
            padding: 16px; 
            text-align: center; 
            width: 50%; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
    <h3>HTML Header for Multiple 
        Columns using colspan 
    </h3> 
    <table> 
        <tr> 
            <th>Name</th> 
            <th>Notes</th> 
        </tr> 
        <tr> 
            <td>kajal</td> 
            <td>1</td> 
        </tr> 
        <tr> 
            <td>sejal</td> 
            <td>2</td> 
        </tr> 
        <tr> 
            <td colspan="2">Total: 3</td> 
        </tr> 
    </table> 
</body> 
  
</html>

Output:

tablespan

HTML Table with Caption

A table caption is used to provide brief description for an HTML table. The <caption> element is used to define the caption for a table. It should be placed immediately after the opening <table> tag. The caption appears centered above the table content.

Example: Implementation of table with caption.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>HTML Table header</title> 
    <style> 
        h1, 
        h3 { 
            text-align: center; 
            color: green; 
        } 
  
        table { 
            border-collapse: collapse; 
            width: 100%; 
        } 
  
        thead { 
            background-color: rgb(145, 196, 145); 
        } 
  
        th, 
        td { 
            border: 2px solid #244d28; 
            padding: 10px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>HTML Table with Caption 
    </h3> 
    <table> 
        <caption>Student Data</caption> 
        <thead> 
            <tr> 
                <th>Name</th> 
                <th>Class</th> 
                <th>Roll No</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>Mahima</td> 
                <td>10</td> 
                <td>1</td> 
            </tr> 
            <tr> 
                <td>Krishn</td> 
                <td>8</td> 
                <td>3</td> 
            </tr> 
            <tr> 
                <td>Shakshi</td> 
                <td>12</td> 
                <td>4</td> 
            </tr> 
            <tr> 
                <td>Shivika</td> 
                <td>8</td> 
                <td>5</td> 
            </tr> 
        </tbody> 
    </table> 
</body> 
  
</html>

Output:

th3

HTML DOM Property

Browser Support

Chrome 1
Edge 12
Firefox 1
Opera 12.1
Safari 1

Suggest improvement

HTML Table Borders

Share your thoughts in the comments

HTML Table with Header

HTML

HTML Table with Vertical Header

HTML

Align Table Headers

HTML

Header for Multiple Columns with colspan

HTML

HTML Table with Caption

HTML

HTML DOM Property

Browser Support

Similar Reads

HTML Table Headers

HTML Table with Header

HTML

HTML Table with Vertical Header

HTML

Align Table Headers

HTML

Header for Multiple Columns with colspan

HTML

HTML Table with Caption

HTML

HTML DOM Property

Browser Support

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?