HTML <table> tag

The <table> tag is used to define HTML table comprises of rows and columns.

Type: Block Element

Related elements of <table> tag:

<caption>: It defines an HTML table name.
<col>: It defines a column in an HTML table.
<colgroup>: It defines a group of columns within an HTML table.
<th>: It defines an HTML table heading.
<tr> It defines an HTML table row.
<td>: It defines an HTML table cell.
<tbody>: It defines the group of body content of an HTML table.
<tfoot>: It defines the group of footer content of an HTML table.
<thead>: It defines the group of header content of an HTML table.

Example of <table> tag

<table>
 <tr>
  <th> Name </th>
  <th> Age </th>
 </tr>
 <tr>
  <td> Tom </td>
  <td> 21 </td>
 </tr>
</table>

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<table>	Yes	Yes	Yes	Yes	Yes

Simple HTML table with <caption> tag.

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption> Table1 </caption>
 <tr>
  <th> First Name </th>
  <th> Second Name </th>
  <th> Age </th>
 </tr>
 <tr>
  <td> Tom </td>
  <td> Cruise </td>
  <td> 21 </td>
 </tr>
 <tr>
  <td> Raj </td>
  <td> Mohan </td>
  <td> 23 </td>
 </tr>
 <tr>
  <td> Bruce </td>
  <td> Lee </td>
  <td> 22 </td>
 </tr>
</table>
</body>
</html>

Run The code »

Output on the browser

Table1
First Name	Second Name	Age
Tom	Cruise	21
Raj	Mohan	23
Bruce	Lee	22

HTML table with <tbody>, <tbody>, <tfoot> and <caption> elements.

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption> Table2 </caption>
<thead>
 <tr>
  <th> Items </th>
  <th> Price </th>
 </tr>
</thead>
<tbody>
 <tr>
  <td> Ginger </td>
  <td> Rs.10 </td>
 </tr>
 <tr>
  <td> Tomato </td>
  <td> Rs.20 </td>
 </tr>
<tfoot>
 <tr>
  <td> Total </td>
  <td> Rs.30 </td>
 </tr>
</tfoot>
</table>
</body>
</html>

Run The code »

Output on the browser

Table2
Items	Price
Ginger	Rs.10
Tomato	Rs.20
Total	Rs.30

HTML table with <col>, <colgroup> and <caption> elements.

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption> Table3 </caption>
 <colgroup>
  <col span="2" style="background-color:#dcdcdc">
  <col style="background-color:#feffea">
 </colgroup>
 <tr>
  <th> First Name </th>
  <th> Second Name </th>
  <th> Age </th>
 </tr>
 <tr>
  <td> Tom </td>
  <td> Cruise </td>
  <td> 21 </td>
 </tr>
 <tr>
  <td> Raj </td>
  <td> Mohan </td>
  <td> 23 </td>
 </tr>
 <tr>
  <td> Bruce </td>
  <td> Lee </td>
  <td> 22 </td>
 </tr>
</table>
</body>
</html>

Run The code »

Output on the browser

Table3
First Name	Second Name	Age
Tom	Cruise	21
Raj	Mohan	23
Bruce	Lee	22

1. align attribute

The align attribute defines the horizontal alignment of a table. It is not supported in HTML5. For practical doing, make sure to define in HTML 4.01 Transitional Standard. Use CSS property - "margin" to replace it.

Syntax

<table align="left | center | right">

Attribute values

Value	Notes
left	It defines left alignment table.
center	It defines center alignment table.
right	It defines right alignment table.

CSS replacement example

<table style="margin: 0 auto;">
 <caption> Middle aligned table </caption>
-----------
</table>

<table style="margin-left: auto;">
 <caption> Left aligned table </caption>
-----------
</table>

<table style="margin-right: auto;">
 <caption> Right aligned table </caption>
-----------
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
align	Yes	Yes	Yes	Yes	Yes

2. bgcolor attribute

The bgcolor attribute defines the background-color of the whole table. It is obsolete in HTML5. For demonstration, make sure to define in HTML 4.01 Transition Standard. Use CSS property instead - "background-color" to replace it.

Syntax

<table bgcolor="color_name | hex_number | rgb_number">

Attribute values

Value	Notes
color_name	It defines the background-color with a color name like red, green etc.
hex_number	It defines the background color with a hex code (like "#ff0700").
rgb_number	It defines the background color with a rgb code (like "rgb(255,255,255)").

CSS replacement example

<table style="background-color: grey;">
 <caption> Grey background table </caption>
-----------
</table>

<table style="background-color: #808080;">
 <caption> Grey background table </caption>
-----------
</table>

<table style="background-color: rgb(128, 128, 128);">
 <caption> Grey background table </caption>
-----------
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
bgcolor	Yes	Yes	Yes	Yes	Yes

3. border attribute

The border attribute defines the size of the frame surrounding the table. Default value is 0. It is not supported in HTML5. Use CSS property - "border" to replace it.

Syntax

<table border="number">

CSS replacement example

<table style="border: 1px solid black;">
 <caption> Black border table </caption>
-----------
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
border	Yes	Yes	Yes	Yes	Yes

4. cellpadding attribute

The cellpadding attribute defines the space between the cell wall and the cell content in a table. It is not supported in HTML5. Use CSS property - "padding" to replace it.

Syntax

<table cellpadding="number">

CSS replacement example

<table style="padding: 10px;">
 <caption> cellpadding table </caption>
-----------
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
cellspacing	Yes	Yes	Yes	Yes	Yes

5. cellspacing attribute

The cellspacing attribute defines the size of the space between table cells. This attribute applies on both vertical and horizontal spaces like between each and every cell and between the table cell and each cell. It is not supported in HTML5. Use CSS property - "border-spacing" to replace it.

Syntax

<table cellspacing="number">

CSS replacement example

<table style="border-spacing:10px;">
 <caption> cellspacing table </caption>
-----------
</table>

Remove space between cells

table {
 border-collapse:collapse;
}

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
cellspacing	Yes	Yes	Yes	Yes	Yes

6. frame attribute

The frame attribute defines which side of the outside frame (border) surrounding the table should be visible. It is obsolete in HTML5. For demonstration, make sure to define in HTML 4.01 Transition Standard. Use CSS property instead - "border" to replace it.

Syntax

<table frame="value">

Attribute values

Value	Notes
above	It shows the top outside border.
below	It shows the bottom outside border.
hsides	It shows the top and bottom outside borders.
vsides	It shows the left and right outside borders.
lhs	It shows the left outside borders.
rhs	It shows the right outside borders.
border	It shows the all four outside borders.
box	It shows the all four outside borders.
void	No outside borders are shown.

CSS replacement example

<table style="border: 1px solid black;">
 <caption> Whole bordered-table </caption>
-----------
</table>

<table style="border-top: 1px solid black;">
 <caption> Top bordered-table </caption>
-----------
</table>

<table style="border-left: 1 px solid black;">
 <caption> Left bordered-table </caption>
-----------
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
frame	Yes	Yes	Yes	Yes	Yes

7. rules attribute

The rules attribute defines which side of the inside frame (border) surrounding the table should be visible. It is obsolete in HTML5. For demonstration, make sure to define in HTML 4.01 Transition Standard. Use CSS property instead - "border" to replace it.

Syntax

<table rules="value">

Attribute values

Value	Notes
none	It shows no inner lines.
all	It shows all inner lines.
groups	It shows inner lines between row groups. It does not give inner borders to each row, it gives border between the <thead> and <tbody>; and <tbody> and <tfoot>.
rows	It shows inner lines between each row.
columns	It shows inner lines between each column.

CSS replacement example of rules="none" and rules="all"

<table style="border: 0;">
 <caption> No bordered table </caption>
-----------
</table>
<table style="border: 1px solid black;">
 <caption> All bordered table </caption>
-----------
</table>

CSS replacement example of rules="cols"

<style>
 td, th {
  border-right: 1px solid black;
 }
</style>

CSS replacement example of rules="rows"

<style>
 td, th {
  border-bottom: 1px solid black;
 }
</style>

Full code replacement example of rules="groups"


thead {
 border-bottom: 1px solid black;
}

tfoot {
 border-top: 1px solid black;
}

table {
 border-collapse: collapse;
}

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
rules	Yes	9.0 or higher	Yes	Yes	Yes

8. summary attribute

The summary attribute provides an alternative texts (for screen readers) that summarizes the content of the table. It is obsolete in HTML5. For demonstration, make sure to define in HTML 4.01 Transition Standard. It is currently replaced by <caption> tag.

Syntax

<table summary="description">

Replacement example

<table>
 <caption> Table Name </caption>
-----------
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
summary	Yes	Yes	Yes	Yes	Yes

9. width attribute

The width attribute defines the width of the table either in pixel or %. If it is not specified, the table only occupies the space available for the contained elements to show.

Attribute values

Value	Note
pixels	It defines the width of the table in pixels.
%	It defines the width of the table in % within the current container.

Syntax

<table width="pixels | % ">

CSS Replacement example

<table style="width:500px;">
<caption> 500px width table </caption>
  ---------
</table>

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
width	Yes	Yes	Yes	Yes	Yes

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML <table> tag

Related elements of <table> tag:

Example of <table> tag

Supported Browsers

Simple HTML table with <caption> tag.

HTML table with <tbody>, <tbody>, <tfoot> and <caption> elements.

HTML table with <col>, <colgroup> and <caption> elements.

Attributes of <table> tag

1. align attribute

Supported Browsers

2. bgcolor attribute

Supported Browsers

3. border attribute

Supported Browsers

4. cellpadding attribute

Supported Browsers

5. cellspacing attribute

Supported Browsers

6. frame attribute

Supported Browsers

7. rules attribute

Supported Browsers

8. summary attribute

Supported Browsers

9. width attribute