« Previous Next »

Headers

Horizontal Table Header

HTML CSS JavaScript

Vertical Table Headers

7:00
8:30
10:00
11:30
3:30
5:00

Horizontal and Vertical

MON TUE WED THU FRI
8:00
9:00
10:00
11:00
12:00

Horizontal Table Example

Output :

Vertical Table Example

Output :

Horizontal and Vertical Example

Output :

Practice Exercises

Task 1: How to create a table with vertical headers?

Goal: Build a schedule table where the first column acts as a bold header (<th>) for each row.
💡 Hint: Place a <th> tag as the first item inside every <tr> row.
💡 Show Solution 
<html>
  <head>
    <title>Vertical Headers Example</title>
  </head>
  <body>
    <h2>Lab Practice Slots</h2>
    <p>This table shows lab timings as vertical bold headers on the left.</p>

    <table border="1">
      <tr>
        <td>Time</td>
        <td>Module</td>
        <td>Instructor</td>
      </tr>
      <tr>
        <th>09:00 AM</th>
        <td>React Fundamentals</td>
        <td>Prof. Sharma</td>
      </tr>
      <tr>
        <th>11:30 AM</th>
        <td>Node.js APIs</td>
        <td>Dr. Verma</td>
      </tr>
      <tr>
        <th>02:00 PM</th>
        <td>MongoDB Practice</td>
        <td>Eng. Khan</td>
      </tr>
    </table>
  </body>
</html>
Output :

Lab Practice Slots

This table shows lab timings as vertical bold headers on the left.

Time Module Instructor
09:00 AM React Fundamentals Prof. Sharma
11:30 AM Node.js APIs Dr. Verma
02:00 PM MongoDB Practice Eng. Khan
Explanation: Placing <th> inside each row creates vertical headers down the first column, making row titles bold and centered.
Task 2: How to combine horizontal and vertical table headers?

Goal: Create a weekly schedule matrix using top row headers (Days) and side column headers (Time Slots).
💡 Hint: Use an empty <th></th> for the top-left cell, then add <th> for both days (horizontal) and time slots (vertical).
💡 Show Solution 
<html>
  <head>
    <title>Weekly Work Plan</title>
  </head>
  <body>
    <h2>Sprint Planning Timetable</h2>

    <table border="1">
      <tr>
        <th></th>
        <th>MON</th>
        <th>TUE</th>
        <th>WED</th>
        <th>THU</th>
        <th>FRI</th>
      </tr>
      <tr>
        <th>10:00 AM</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th>01:00 PM</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th>04:00 PM</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>
Output :

Sprint Planning Timetable

MON TUE WED THU FRI
10:00 AM
01:00 PM
04:00 PM
Explanation: Combining top headers with left-side column headers provides a complete 2D grid structure ideal for schedules and timetables.
« Previous Next »