Tag is used to display data in tabular form (row*column). A row can have multiple columns and rows.
We can create a table to display data in the form of a table, using the
Tag with the help of
,
and
elements.
In each table, the table row is defined by the
Tag, the table header is defined by the
, and the table data is defined by the
Tag.
HTML tables are used to manage the layout of the page e.g. Header section, navigation bar, body content, footer section, etc. But it is recommended to use div tags on tables to manage the layout of the page.
HTML Table Tags
table
tr
th
td
caption
colgroup
col
tbody
theader
tfooter
Table of Contents
We will see a few examples of HTML Table Tags below:-
A simple HTML table, containing two columns and two rows:
Example:-
HTML table Tag
This is HTML table tag Example
Month
Savings
January
$100
Output:-
How to add collapsed borders to a table (with CSS):
Example:-
HTML table Tag
This is HTML table tag Example
Month
Savings
January
$70
February
$40
Output:-
How to right-align a table (with Inline CSS):
Example:-
HTML table Tag
This is HTML table tag Example
Month
Savings
January
$100
February
$80
This is some text to be wrapped around the table. This is some text to be wrapped around the table. This is some text to be wrapped around the table.
Output:-
How to center-align a table (with CSS):
Example:-
HTML table Tag
This is HTML table tag Example
How to center-align a table
Month
Savings
January
$100
February
$80
Output:-
How to add background-color to a table (with CSS):
Example:-
HTML table Tag
This is HTML table tag Example
Month
Savings
January
$100
February
$80
Output:-
How to add padding to a table (with CSS):
Example:-
HTML table Tag
This is HTML table tag Example
Month
Savings
January
$100
February
$80
Output:-
How to set table width (with CSS):
Example:-
HTML table Tag
This is HTML table tag Example
Month
Savings
January
$100
February
$80
Output:-
How to create table Horizontal headers:
Example:-
HTML table Tag
This is HTML table tag Example
Horizontal headers:
Name
Email
Phone
John Doe
john.doe@example.com
123-45-678
Output:-
How to create table Vertical headers:
Example:-
HTML table Tag
This is HTML table tag Example
Vertical headers:
Name:
John Doe
Email:
john.doe@example.com
Phone:
123-45-678
Output:-
How to create a table with a caption:
Example:-
HTML table Tag
This is HTML table tag Example
Monthly savings
Month
Savings
January
$100
February
$80
Output:-
How to define table cells that span more than one row or one column: