Create a table using the tags: table, tr, th, td, rowspan, colspan

Hello students, welcome to Kwickprep. Every school has a timetable with rows and columns. How do we draw the same grid on a web page? Today we will build tables with the tags table, T R, T H and T D. We will also merge cells using rowspan and colspan, which board exams love to ask.

Let us start with the basic words. A table arranges data in rows and columns, like a marks sheet. A row is a line of cells going across, from left to right. A column is a line of cells going down, from top to bottom. A cell is one box, where a row and a column meet.

H T M L builds a table with four tags. The table tag holds the whole table. The T R tag, short for table row, makes one row. The T H tag, short for table heading, makes a heading cell, shown bold and centred. The T D tag, short for table data, makes a normal cell.

Here is a small marks table. The border attribute, equal to one, draws lines around the cells. The first row uses T H, so Name and Marks appear as bold headings. The next two rows use T D for the data. Riya has eighty eight marks, and Aman has seventy six.

This is what the browser draws. The heading row shows Name and Marks in bold. The next row shows Riya and eighty eight. The last row shows Aman and seventy six.

The tags must be nested in the right order. Nested means one tag is placed inside another. The cells, T H and T D, always go inside a T R. Every T R goes inside the table tag. Close the tags in reverse order, cell first, then row, then table. Each row should cover the same number of columns, or the grid looks broken.

Some attributes change how the table looks. Border draws the lines, and a bigger number makes the outer line thicker. Cellpadding adds space inside each cell, around the text. Cellspacing adds space between neighbouring cells. Align places text to the left, centre or right. Your textbook uses these, though modern pages often use C S S instead.

Sometimes one cell must be bigger than the others. Colspan makes one cell spread across many columns, from left to right. Rowspan makes one cell spread down many rows. The value tells how many cells it covers, like colspan equals two. And remember to remove the extra cells that the big cell now replaces.

Here is colspan in action. The table has two columns. The heading Class ten A should sit across both columns. So we write colspan equals two on that one heading cell. The first row now has only one cell, but it is two columns wide.

Now rowspan, using a timetable. Monday should cover two periods, Maths and Science. So the Monday cell gets rowspan equals two. The first row has Monday and Maths. The second row has only Science, because Monday already fills that space from above.

This is how the browser draws it. The first row shows Monday and Maths. In the second row, the Monday cell continues down, and only Science is new. We wrote Monday in brackets here to show the merged space.

Pause and predict. How many columns does this row cover in total? The Total cell covers three columns. The next cell adds one more column. So the row covers four columns. This is exactly how exam questions check your understanding.

Watch out for four mistakes in exams. Never write a T D outside a T R. After colspan or rowspan, remove the extra cells, or the table sticks out. Do not mix them up; rowspan goes down, colspan goes across. And close every tag, including the closing T R.

Let us revise what we learned today. The table tag holds rows, and T R makes each row. T H makes a bold heading cell, and T D makes a data cell. Border, cellpadding and cellspacing change the look. Colspan joins cells across columns. Rowspan joins cells down rows. Try making your own class timetable in H T M L tonight.