Tables in HTML
In this article, we will learn how to create tables in HTML(without using CSS as our target series is HTML), instead of trying various tags, lets us take one example and will learn during the implementation
Our motive is to create a school timetable exactly like below.
<table> is an HTML element for tabular data which has two-dimensional and comprises rows and columns, <thead>,<tbody>, <tfoot> are child elements inside <thead>
<thead> is an HTML element that defines a row that is the head of a column of the table
<tr> is an HTML element that defines a row of cells in the table
<th> elements define a cell as header of group of cells
<td> is an HTML element that defines a set of table rows indicating the body of the table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tables</title>
</head>
<body>
<table cellspacing="0" border="1">
<thead>
<tr>
<td colspan="12" height="70" width="10" align="center"> <b> <font size="5">School TimeTable</font> </b></td>
</tr>
<tr>
<th colspan="12" align="left">Name of the class: HTML Basics</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="12" height="50"> <b>        9.00AM-First Bell
    9.05AM-Second Bell
    9.05AM TO 9.15AM Prayer
    9.15-Third Bell </b></td>
</tr>
<tr height="40">
<th rowspan="2">Days</th>
<th>9.15-9.45</th>
<th>9.45-10.30</th>
<th rowspan="0" width="70">10 MIN BREAK 10.30-10.40</th>
<th>10.40-11.25</th>
<th>11.25-12.10</th>
<th rowspan="0" width="70">LUNCH BREAK 12.10-01.00</th>
<th>1.00-1.40</th>
<th>1.40-2.20</th>
<th rowspan="7" width="70">10 MIN BREAK 02.20-02.30</th>
<th>2.30-3.10</th>
<th>3.10-3.45</th>
</tr>
<tr height="40">
<!-- <th>Days</th> -->
<th>I Period</th>
<th>II Period</th>
<th>III Period</th>
<th>IV Period</th>
<th>V Period</th>
<th>VI Period</th>
<th>VII Period</th>
<th>VIII Period</th>
</tr>
<tr height="40">
<th>Monday</th>
<td>English</td>
<td>HTML</td>
<td colspan="2" align="center">Maths</td>
<!-- <td>Maths</td> -->
<td>Physics</td>
<td>Chemistry</td>
<td>Social</td>
<td>P.T</td>
</tr>
<tr height="40">
<th>Tuesday</th>
<td>English</td>
<td>English</td>
<td>Maths</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Social</td>
<td>P.T</td>
<td>P.T</td>
</tr>
<tr height="40">
<th>Wednesday</th>
<td>English</td>
<td>Tamil</td>
<td>English</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Social</td>
<td>P.T</td>
<td>P.T</td>
</tr>
<tr height="40">
<th>Thursday</th>
<td>English</td>
<td rowspan="2" align="center">Tamil</td>
<td>Maths</td>
<td>English</td>
<td colspan="2" align="center">Social</td>
<!-- <td>Social</td> -->
<td>P.T</td>
<td>P.T</td>
</tr>
<tr height="40">
<th>Friday</th>
<td>English</td>
<!-- <td>Tamil</td> -->
<td>Tamil</td>
<td>Maths</td>
<td>Physics</td>
<td>English</td>
<td>Social</td>
<td>P.T</td>
</tr>
</tbody>
</table>
</body>
</html>
actual table creation starts inside <body> tag.
<table> tag has inline attribute border="1" which means a border will be created around the table like an MS Excel sheet
Border has two lines, as per requirement border should contain single line to achieve added attribute as cellspacing="0"
colspan - it has non-negative interger indicates how many columns the cell has extended, default value is 1 and value greater than 1000 is invalid
rowspan - it has non-negative interger indicated how many rows the cell has extended, default value is 1 and if value set to 0 then it extends untill end of table section
As interval break for entire week, I have used rowspan 0 else rowspan can used to merge only required cells