Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <table> tag.

Overview Content

1 Use of <table> tag
2 Example of <table> tag
3 Supported Browsers
4 Different Types of Table
5 Attributes of <table> tag
     5.1 align
     5.2 bgcolor
     5.3 border
     5.4 cellpadding
     5.5 cellspacing
     5.6 frame
     5.7 rules
     5.8 summary
     5.9 width

Use of <table> tag

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

Some related elements of <table> element:
1. <tr>: It defines a table row.
2. <th>: It defines a table heading.
3. <td>: It defines a table cell.
4. <caption>: It defines a table name.
5. <col>: It defines the column properties of a table.
6. <colgroup>: It defines a group of column(s) within a table.
7. <tbody>: It defines the group of body content of a table.
8. <tfoot>: It defines the group of footer content of a table.
9. <thead>: It defines the group of header content of a 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
<table> Yes Yes Yes Yes Yes

Different Types of Table

Example 1-Simple Table with caption

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<caption> Table 1 </caption>
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
</table>
</body>
</html>

Example 2-Table with thead, tfoot ,tbody and caption

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse:collapse;
}
table, th, td {
border:1px solid red;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption> Table 2 </caption>
<thead>
<tr>
<th> Name </th>
<th> Age </th>
</tr>
</thead>
<tbody>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
</tfoot>
</table>
</body>
</html>

Example 3-Table with colgroup, col and caption

<!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> Table 3 </caption>
<colgroup>
<col style="background-color:red">
<col span="2" style="background-color:yellow">
</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>

Attributes of <table> tag

Tag Value Notes
align left
center
right
It defines the alignment of a table with respect to its surrounding elements.
bgcolor rgb(x,x,x)
#xxxxxx
color_name
It defines the background-color of a table.
border 0
1
It defines the size of the frame surrounding the table.
Default value is 0.
cellpadding pixels It defines the space, in pixels, between the cell border and the cell content.
cellspacing pixels It defines the size of the space between two cells
frame above
below
hsides
vsides
lhs
rhs
border
box
void
It defines which side of the outside frame(border) surrounding the table should be visible.
rules none
group
rows
cols
all
It defines which side of the inside frame(border) surrounding the table should be visible.
summary text It provides an alternative texts that summarizes the content of the table.
width pixels
%
It defines the width of the table.

1. align attribute

Explaination:The align attribute specifies the alignment of a table inside the containing element.
The align attribute is not supported in HTML5.Use CSS property - "float" to make the table the left and right alignment like
<table style="float:left"> or <table style="float:right">
Inorder to make the table center alignment use "margin" property like
<table style="margin:0 auto">

Syntax:

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

Example:

<table align = "center">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
align Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
left It defines left alignment table.
center It defines center alignment table.
right It defines right alignment table.

2. bgcolor attribute

Explaination:The bgcolor attribute defines the background color of a table.
This attribute is not supported in HTML5.Use CSS property "background-color" to define the background color of a table like
<table style="background-color:red">
Click here, to learn more about HTML color.

Syntax:

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

Example:

<table bgcolor = "red">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
bgcolor Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
colorname 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)").

3. border attribute

Explaination: The border attribute defines the size of the frame surrounding the table. Default value is 0.
This attribute is not supported in HTML5.Use CSS property "border" like <table style="border:2px solid red">

Syntax:

<table border="0 | 1">

Example:

<table border = "1">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
border Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
0 It defines no border around the table cell.
1 It defines adding border around the table cell.

4. cellpadding attribute

Explaination: The cellpadding attribute defines the space between the cell wall and the cell content in a table.
This attribute is not supported in HTML5.Use CSS property - "padding" like <td style="pading:10px">

Syntax:

<table cellpadding="pixels">

Example:

<table cellpadding = "15">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
cellpadding Yes Yes Yes Yes Yes

5. cellspacing attribute

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

Syntax:

<table cellspacing="pixels">

Example:

<table cellspacing = "15">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
cellspacing Yes Yes Yes Yes Yes

6. frame attribute

Explaination: The frame attribute defines which side of the outside frame(border) surrounding the table should be visible.
This attribute is not supported in HTML5.Use CSS property "border" to add border around the table in the form you prefer.

Syntax:

<table frame="value">

Example:

<table frame = "above">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
frame Yes Yes Yes Yes Yes
Attribute values
Attribute 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.

7. rules attribute

Explaination: The rules attribute defines which side of the inside frame(border) surrounding the table should be visible.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<table rules="value">

Example:

<table rules = "rows">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
rules Yes 9.0 or
higher
Yes Yes Yes
Attribute values
Attribute Notes
none It shows no lines.
groups It shows lines between rows group and column groups.
rows It shows lines between rows.
cols It shows lines between columns.
all It shows lines between rows and columns.

8. summary attribute

Explaination: The summary attribute provides an alternative texts that summarizes the content of the table.
This attribute is not supported in HTML5.

Syntax:

<table summary="text">

Example:

<table summary = "3 positions holder of Standard 5 in X school">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
<tr>
<td> Romesh </td>
<td> 22 </td>
</tr>
</table>

Supported Browsers

Attribute
summary Yes Yes Yes Yes Yes

9. width attribute

Explaination: The width attribute defines the width of the table either in pixel or %.
If the width is not specified, the table only occupies the space available for the contained elements to show.
This attribute is not supported in HTML5.Use CSS property - width within the style attribute like
<table style="width:80%">

Syntax:

<table width="pixels | %">

Example:

<table width = "100%">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Raj </td>
<td> 23 </td>
</tr>
<tr>
<td> Romesh </td>
<td> 22 </td>
</tr>
</table>

Supported Browsers

Attribute
width Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
pixels It defines the width of the table in pixels.
% It defines the width of the table in % within the containing document.