HTML table: Display Table Content With Rows & Cells

Create a table in web pages using the HTML table tag. A table contains rows and columns and content in each cell. The table header is the top part of the table to show the heading for the table.
Syntax

Example

Test it Live

Output

row1, column1 row1, column2
row2, column1 row2, column2

List of Table Tags

Sr. No. Tagname Description
1 <table> Use it to create a table.
2 <tr> Used to create rows in a table.
3 <th> Used to create header cells in a table.
4 <td> Used to create a cells in each rows of a table.
5 <tbody> Used to group the body content of a table
6 <thead> Used to group the header content of a table
7 <tfooter> Used to group the footer content of a table

HTML Table Heading Tag

Table heading tag is defined using <th> tag. This tag can be use to show the table heading.

Test it Live

Output

heading1 heading2
row1, column1 row1, column2
row2, column1 row2, column2

HTML Header, Body and Footer

As of websites, A table also contains header, body and footer parts. Header part contains the heading of the table, bodyu part contains the content part and foot contains the footer part of the table.

These three parts can be defined by using the below table tags

Sr. No. Tagname Description
1 <thead> Use to show the header part of table.
2 <tbody> Use to show the main content of the table.
3 <tfoot> Use to show the footer part of the table.
Test it Live

Output

heading1 heading2
row1, column1 row1, column2
row2, column1 row2, column2
foot cell 1 of table foot cell 2 of table

HTML table rowspan

If you want to merge two rows, you have to use rowspan

Test it Live

Output

heading 1 heading 2
row1, column1 row1, column2
row2, column2

HTML table colspan

If you want to merge two columns, you have to use colspan

Test it Live

Output

heading1 heading2
row1, column1 row1, column2
row2 with merged columns

Table Attributes Cellspacing and Cellpadding

Cellspacing and cellpadding attributes are used to adjust white spaces inside a table.

Test it Live

Output

heading1 heading2
row1, column1 row1, column2
row2, column1 row2, column2

Cellspacing and cellpadding attributes are used to adjust white spaces inside a table.

ULTIMATE TOOLKIT Free eBook

Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Download Link Will be Send to Your Email id