HTML Tutorials

#	Content	Views
1.	Tutorial Tags	15,823
2.	Tutorial + Programming	678,586
3.	Videos	218,835
4.	Results (`Annual + Re-appear`)	12,699
5.	Quiz Chapters	14,622
6.	Quiz Questions	172,775
7.	Quiz Results	18,822
8.	Testimonials	3,462
9.	Projects	28,286
10.	e-Words	12,023
11.	e-Certificates	4,968
12.	Downloads (Softwares)	4,238
13.	Downloads (Syllabus)	948

HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

HTML Table Headers

Table headers are defined with th elements. Each th element represents a table cell.

<!DOCTYPE html>
<html>
<head>
<title>Table Headers</title>
</head>
<body>
<h2>Table Headers</h2>
<h5>Use the TH element to define table headers.</h5>

<table style="width:100%">
  <tr>
    <th>Sr.No</th>
    <th>Name of Student</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Taranpreet Singh</td>
    <td>6th</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Mehakpreet Kaur</td>
    <td>7th</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>Veerpal Kaur</td>
    <td>8th</td>
  </tr>
  <tr>
    <td>4.</td>
    <td>Jasmeen</td>
    <td>9th</td>
  </tr>
  <tr>
    <td>5.</td>
    <td>Sonia</td>
    <td>10th</td>
  </tr>
  <tr>
    <td>6.</td>
    <td>Jaskaran Singh</td>
    <td>11th</td>
  </tr>
  <tr>
    <td>7.</td>
    <td>Arshdeep Kaur</td>
    <td>12th</td>
  </tr>
  
</table>

</body>
</html>

Live Demo & Try it yourself!

#table #headers

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a <th> element:

<!DOCTYPE html>
<html>
<head>
<title>Vertical Table Headers</title>
</head>
<body>
<h2>Vertical Table Headers</h2>

<p>The first column becomes table headers if you set the first table cell in each table row to a TH element:</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <td>Taranpreet</td>
    <td>Mehakpreet</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Singh</td>
    <td>Kaur</td>
  </tr>
  <tr>
    <th>Class</th>  
    <td>6th</td>
    <td>7th</td>
  </tr>
</table>

</body>
</html>

Live Demo & Try it yourself!