The following HTML code written with inline CSS styles to make all the program under a single file.
It is a best practice to use separate external style sheet for better control and fast loading of the page, in this article, we given both inline and external CSS styles for writing Time Table using Table.
<html>
<head>
<title>time table</title>
</head>
<body bgcolor="skyblue">
<H1><FONT COLOR="DARKCYAN"><CENTER>COLLEGE TIME TABLE</FONT></H1>
<table border="2" cellspacing="3" align="center">
<tr>
<td align="center">
<td>8:30-9:30
<td>9:30-10:30
<td>10:3-11:30
<td>11:30-12:30
<td>12:30-2:00
<td>2:00-3:00
<td>3:00-4:00
<td>4:00-5:00
</tr>
<tr>
<td align="center">MONDAY
<td align="center">---<td align="center"><font color="blue">SUB1<br>
<td align="center"><font color="pink">SUB2<br>
<td align="center"><font color="red">SUB3<br>
<td rowspan="6"align="center">L<br>U<br>N<br>C<br>H
<td align="center"><font color="maroon">SUB4<br>
<td align="center"><font color="brown">SUB5<br>
<td align="center">counselling class
</tr>
<tr>
<td align="center">TUESDAY
<td align="center"><font color="blue">SUB1<br>
<td align="center"><font color="red">SUB2<br>
<td align="center"><font color="pink">SUB3<br>
<td align="center">---
<td align="center"><font color="orange">SUB4<BR>
<td align="center"><font color="maroon">SUB5<br>
<td align="center">library
</tr>
<tr>
<td align="center">WEDNESDAY
<td align="center"><font color="pink">SUB1<br>
<td align="center"><font color="orange">SUB2<BR>
<td align="center"><font color="brown">SWA<br>
<td align="center">---
<td colspan="3" align="center"><font color="green"> lab
</tr>
<tr>
<td align="center">THURSDAY
<td align="center">SUB1<br>
<td align="center"><font color="brown">SUB2<br>
<td align="center"><font color="orange">SUB3<BR>
<td align="center">---
<td align="center"><font color="blue">SUB4<br>
<td align="center"><font color="red">SUB5<br>
<td align="center">library
</tr>
<tr>
<td align="center">FRIDAY
<td align="center"><font color="orange">SUB1<BR>
<td align="center"><font color="maroon">SUB2<br>
<td align="center"><font color="blue">SUB3<br>
<td align="center">---
<td align="center"><font color="pink">SUB4<br>
<td align="center"><font color="brown">SUB5<br>
<td align="center">library
</tr>
<tr>
<td align="center">SATURDAY
<td align="center"><font color="red">SUB1<br>
<td colspan="3" align="center">seminar
<td align="center"><font color="pink">SUB4<br>
<td align="center"><font color="brown">SUB5<br>
<td align="center">library
</tr>
</body>
</html>
OUTPUT:
Let us see more detailed way of writing the same code given below with external style sheet and HTML file.
It is always recommended to use external style sheet, inline style given above is just for understanding the code.
Both index.html and style.css must be in the same folder to get the correct output.
CSS File: the file name is style.css
body {
background-color: #ffffff;
mix-blend-mode: darken;
}
header h1 {
margin-top: 10%;
text-align: center;
color: black;
font-weight: bold;
font-family: sans-serif;
}
table {
margin-top: 2%;
width: max-content;
border: 1px solid black;
height: 300px;
margin-left: 23%;
}
td {
text-align: center;
border: 1px solid black;
}
#blank {
color: #000;
background-color: #fff;
}
#s {
font-weight: 800;
text-transform: uppercase;
font-family: sans-serif;
background-color: #ffffff;
}
#seminar {
font-weight: 800;
font-family: sans-serif;
background-color: #ffffff;
text-transform: uppercase;
}
#sub {
color: black;
font-family: sans-serif;
font-weight: 400;
background-color: #ffffff;
}
#sub1 {
background-color: #fff;
}
#sub2 {
color: black;
text-transform: uppercase;
background-color: #ffffff;
}
#sub3 {
background-color: #ffffff;
font-family: sans-serif;
font-weight: 800;
}
#box1 {
color: cornflowerblue;
font-family: sans-serif;
font-weight: 800;
}
#box2 {
color: darkorange;
font-weight: 800;
font-family: sans-serif;
}
#box3 {
color: darkviolet;
font-weight: 800;
font-family: sans-serif;
}
#box4 {
color: green;
font-weight: 800;
font-family: sans-serif;
}
#box5 {
color: red;
font-family: sans-serif;
font-weight: 800;
}
#box6 {
color: hotpink;
font-weight: 800;
font-family: sans-serif;
}
#box7 {
color: blue;
font-family: sans-serif;
font-weight: 800;
}
HTML Code: the file name is index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>time table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style.css">
</style>
</head>
<body>
<header>
<h1>COLLEGE TIME TABLE</h1>
</header>
<table>
<thead>
<tr>
<td id="sub1"> </td>
<td id="sub">8:30-9:30</td>
<td id="sub">9:30-10:30</td>
<td id="sub">10:30-11:30</td>
<td id="sub">11:30-12:30</td>
<td id="sub">12:30-2:00</td>
<td id="sub">2:00-3:00</td>
<td id="sub">3:00-4:00</td>
<td id="sub">4:00-5:00</td>
</tr>
</thead>
<tbody>
<tr>
<td id="sub">MONDAY</td>
<td id="blank">---</td>
<td id="box1">SUB1</td>
<td id="box2">SUB2</td>
<td id="box3">SUB3</td>
<td rowspan="6">L<br>U<br>N<br>C<br>H
<td id="box4">SUB4</td>
<td id="box5">SUB5</td>
<td id="s">counselling class</td>
</tr>
<tr>
<td id="sub">TUESDAY</td>
<td id="box1">SUB1</td>
<td id="box2">SUB2</td>
<td id="box3">SUB3</td>
<td id="blank">---</td>
<td id="box2">SUB2</td>
<td id="box2">SUB2</td>
<td id="sub2">library</td>
</tr>
<tr>
<td id="sub">WEDNESDAY</td>
<td id="box1">SUB1</td>
<td id="box2">SUB2</td>
<td id="box5">SWA</td>
<td id="blank">---</td>
<td colspan="3"id="sub3" >LAB</td>
</tr>
<tr>
<td id="sub">THURSDAY</td>
<td id="box1">SUB1</td>
<td id="box2">SUB2</td>
<td id="box3">SUB3</td>
<td id="blank">---</td>
<td id="box2">SUB2</td>
<td id="box2">SUB2</td>
<td id="sub2">library</td>
</tr>
<tr>
<td id="sub">FRIDAY</td>
<td id="box1">SUB1</td>
<td id="box2">SUB2</td>
<td id="box3">SUB3</td>
<td id="blank">---</td>
<td id="box4">SUB4</td>
<td id="box5">SUB5</td>
<td id="sub2">library</td>
</tr>
<tr>
<td id="sub">SATURDAY</td>
<td id="box1">SUB1</td>
<td colspan="3" id="seminar">seminar</td>
<td id="box4">SUB4</td>
<td id="box5">SUB5</td>
<td id="sub2">library</td>
</tr>
</tbody>
</table>
</body>
</html>Output for the above code
The above code with external style sheet is contributed by Chanakya.