Tables in HTML

What is a table?

A table contains rows and columns to store data.

Data can be better analyzed using tables

Tags

Table Tag: Declares the start of a table

border="1": Shows a border between the rows and columns.

tr: Short for Table Row(tr), denotes the current row

th: Short for Table Header(th), use only for table headings, makes them centered and look good.

td: Short for Table Data(td), denotes the data entered in the table.

thead: Short for Table Head(thead), enclose th tags in this because it might look broken when adding CSS.

tbody: Short for Table Body(tbody),enclose td tags in this tag.

rowspan,colspan: Refer below

Here are some example tables,feel free to change the values or add a new row/column

Roll No	Marks
1	99.9
2	0.1
Total	100

rowspan

rowspan makes the value span upto the number of rows given inside quotes

Here Core subjects span 3 rows to include 3 subjects

Category	Subjects
Core Subjects	Linear Algebra and Number Theory
	Semiconductors and Nanomaterials
	Object Oriented Programming with C++
Additional Subjects	Digital Design Principles
Additional Subjects	Professional English - 2

colspan

colspan makes the value span upto the number of columns given in quotes

Here Student Report Card spans the 2 columns Roll No and Grade

Student Report Card
Roll No	Grade
17	A+
38	B-

For reference, if you have spanned the row, you dont need to enter the data in the current box (row/col)

Go back to the main page