Creating a Time Table using HTML

2 min readJul 11, 2021

Let's create an HTML timetable as shown above.

HTML uses tags to specify the presentation, layout, and formatting of a document. Tags start with opening angle bracket (<) and close with closing angle bracket (>).

Tags required to create a timetable as shown above to create a table in HTML are:

<table> tag: Defines the table structure.

<tr> tag: Defines a column in a table.

<td> tag: Works as a container for the table.

Attributes of <td> tags are: colspan and rowspan. You will learn more about colspan and rowspan tags while creating the timetable.

<th> tag: Used to define table heading. Data inside the <th> tags are always bold.

<!DOCTYPE html>
<html>
<body></body>
</html>

The basic body of the HTML page.

<table border="1" cellspacing="0">
 
 <th colspan="6">Time Table</th>
 
 <tr>
 <th rowspan="6">Hours</th>
  <th>Mon</th>
  <th>Tue</th>
  <th>Wed</th>
  <th>Thu</th>
  <th>Fri</th>
 </tr>
 <tr>
  <td>Math</td>
  <td>Science</td>
  <td>Math</td>
  <td>Science</td>
  <td>Arts</td>
 </tr>
 <tr>
  <td>Math</td>
  <td>Science</td>
  <td>Math</td>
  <td>Science</td>
  <td>Arts</td>
 </tr>
 <tr>
  <th colspan="5">Lunch</th>
 </tr>
 <tr>
  <td>Math</td>
  <td>Science</td>
  <td>Math</td>
  <th colspan="2" rowspan="2">Project</th>
 </tr>
 <tr>
  <td>Math</td>
  <td>Science</td>
  <td>Math</td>
 </tr>
</table>

The border attribute used in <table> tag defines table border(0 being no border) and cellspacing attribute defines the distance between two table cells.

Here the rowspan is used to merge two or more columns vertically and colspan is used to merge two or more columns horizontally.

Here we use colspan equal to 6 within <th> tag to merge 6 columns horizontally. Same way, we use colspan for creating the Lunch column merging 5 columns as shown in the figure.

Then we define rowspan equal to 6 within <th> tag to create hours column merging 6 columns vertically.

We have used colspan and rowspan equal to 2 to create Project as a single column covering 4 columns as shown.

We create other columns using <tr> and <td> tags.

In this way, we create Time Table using HTML tags. You can change the values defined in the tags to see how the structure of the table change to understand the concept of colspan and rowspan.

Creating a Time Table using HTML

Written by Srinivas Rahul Sapireddy

No responses yet