HTML Tables
Uploaded by
lakshmi.sHTML Tables
Uploaded by
lakshmi.sHTML Tables
We will want to consider using HTML tables in our website. In addition to creating
HTML tables to present data in rows and columns, we can also create HTML tables to organize
information on our web page. Coding HTML tables into our web page is fairly easy since we
need only understand a few basic table codes.
A table is an arrangement of data in rows and columns, or possibly in a more complex structure.
Tables are widely used in communication, research, and data analysis.
Tables are useful for various tasks such as presenting text information and numerical
data.
Tables can be used to compare two or more items in tabular form layout.
Tables are used to create databases.
Defining Tables in HTML
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags.
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 tag over table to manage the layout
of the page.
HTML Table Tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for
formatting.
<col> It is used with <colgroup> element to specify column properties
for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
HTML Table Example
Constructing an HTML table consists of describing the table between the beginning table
tag, <TABLE>, and the ending table table tag, </TABLE>. Between these tags, we can
construct each row and each cell in the row. To do this, we would first start the row with the
beginning row tag, <TR>, and then build the row by creating each cell with the beginning cell
tag, <TD>, adding the data for that cell, and then closing the cell with the ending cell tag, </TD>.
When we finish all of the cells for a row, we would then close the row with the ending row tag,
</TR>.Then, for each new row, would repeat the process of beginning the row, building each
cell in the row, and closing the row.
Syntax :
<Table attribute=”value”>Tags to include heading and data to the table
</Table>
Let's see the example of HTML table tag. It output is shown above.
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr><th>Day Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr><td>I</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
<tr><td>II</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Associatio
n</td></tr>
<tr><td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Remedial
</td></tr>
<tr><td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</t
d></tr>
</table>
</body>
</html>
Output:
Table Heading
Table heading can be defined as <th> tag. Headings, which are defined in <th> tag are
centered and bold by default. This tag is used to define the heading of a cell in the table.
Syntax:
<TH attribute = “value”>Heading</TH>
(or)
<th attribute=”value”>Heading </th>
Example
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr><th>Day Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr><td>I</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
<tr><td>II</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Associatio
n</td></tr>
<tr><td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Remedial
</td></tr>
<tr><td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</t
d></tr>
</table>
</body>
</html>
Output:
HTML Border attribute : We can use border attribute of <table> tag in HTML to specify
border. the border is an attribute of <table> tag and it is used to put a border across all the cells.
The border attribute is used to specify the thickness of the table border in pixels. Its represented
in integer value. If you do not need a border, then you can use border = "0".
Syntax:
<table border=”value in number”>
Example :
<table border="3">
<tr><th>Day Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr><td>I</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Game
s</td></tr>
<tr><td>II</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Libra
ry</td></tr>
<tr><td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Ass
ociation</td></tr>
<tr><td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Rem
edial</td></tr>
<tr><td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Libra
ry</td></tr>
<tr><td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Ga
mes</td></tr>
</table>
Output:
Polishing your table
To give our table a more polished look, we can include commands that will adjust the
size of our table, add space in the cell, add space between rows, and align the data in a cell.
Working with these commands is basically a process of trial and error to create the most
appealing presentation of our information. The type of table that we create and the overall design
of our web site will help you determine what works best for our table.
Some of the commands that enable you to customize your table include:
Table Height and Width
we can set a table width and height using width and height attributes. we specify table width or
height in terms of number or in terms of percentage of available screen area.
The WIDTH=n% command sets the width of your table as a percentage of the screen.
The letter n designates the percentage that you assign to this command. For example, if you
want the width of your table to be one half the width of the screen, you would include the
WIDTH="50%" command in the beginning table command.
Example
<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="400" height="150" >
<tr><th>Day Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr><td>I</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
<tr><td>II</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Associatio
n</td></tr>
<tr><td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Remedial
</td></tr>
<tr><td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</t
d></tr>
</table>
</body>
</html>
Output:
Notice that the TABLE command now includes the WIDTH="50%" command. This command
extends the table across one half of the width of the text.
Alignment of Data:
The ALIGN=(LEFT, RIGHT, or CENTER) command will horizontally align the data in
a cell. For example, if you wish to place the data in the center of each cell in a row, you would
include the ALIGN=CENTER command within the row command.
The VALIGN=(TOP, MIDDLE, or BOTTOM) command will vertically align the data in
a cell. For example, if you wish to place the data in the center of each cell in a row, you would
include the ALIGN=MIDDLE command within the row command.
In addition to the codes that were explained in the previous sections, the table below now
includes some of these commands.
Example :
<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="400" height="150" >
<tr align="center"><th>Day
Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr align="center">
<td>I</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
<tr align="center">
<td>II</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tr align="center">
<td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Association</t
d>
</tr>
<tr align="center">
<td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Remedial</td>
</tr>
<tr align="center">
<td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tr align="center">
<td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
</table>
</body>
</html>
Output:
Finally, the ALIGN="CENTER" command places all the cells in the above table.
Cellpadding and Cellspacing Attributes:
There are two attributes called cellpadding and cellspacing which you will use to adjust
the white space in our table cells. These attributes are:
The CELLPADDING= cellpadding represents the distance between content of the cell
and edge of the cell.n command adjusts the vertical dimension of the cells. The letter n
designates the numerical value that you assign to this command.
The CELLSPACING= The cellspacing attribute defines space between table cells,(i.e)
this attribute is used to specify the space between the individual cells n command sets the space
or border around the cells. The letter n designates the numerical value that you assign to this
command.
Example
Live Demo
<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="400" height="150" cellpadding = "10" cellspacing = "10" >
<tr align="center"><th>Day
Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th>
</tr>
<tr align="center">
<td>I</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games<
/td>
</tr>
<tr align="center">
<td>II</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library
</td>
</tr>
<tr align="center">
<td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Associ
ation</td>
</tr>
<tr align="center">
<td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Remed
ial</td>
</tr>
<tr align="center">
<td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library
</td>
</tr>
<tr align="center">
<td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games
</td>
</tr>
</table>
</body>
</html>
Output :
the CELLPADDING="10" command increases the vertical dimension of the cells, and the
CELLSPACING="10" command increases the border around the cells
TD Tag :
This tag is used to define the data of each cell in the table.
Syntax:
<TD attribute=”value”> data </TD> - closing tag is optional
The Attributes are:
NOWRAP : This attribute is used to display the content of the cell in one line.
Colspan attribute : if you want to merge two or more columns into a single column. it takes
an integer value. Similar way you will
rowspan attribute: if you want to merge two or more rows in a single row. it takes an integer
value.
Example
<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="400" height="150" >
<tr align="center"><td colspan="6"><b>B.Sc I- CS Time Table</b></td>
<tr align="center"><th>Day
Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr align="center"> <td>I</td><td rowspan = "6">Tamil</td><td rowspan="6">English</td><td
colspan="3">C LAB</td>
</tr>
<tr align="center"> <td>II</td> <td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tr align="center"> <td>III</td><td>C</td><td>DP&CO</td><td>Association</td>
</tr>
<tr align="center"> <td>IV</td><td>C</td><td>DP&CO</td><td>Remedial</td>
</tr>
<tr align="center"> <td>V</td><td colspan="2">C LAB</td><td>Library</td>
</tr>
<tr align="center"> <td>VI</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
</table>
</body>
</html>
Output:
Tables Backgrounds
You can set table background using one of the following two ways −
bgcolor attribute − You can set background color for whole table or just for one cell.
background attribute − You can set background image for whole table or just for one
cell.
You can also set border color also using bordercolor attribute.
Example
<html>
<head>
<title></title>
</head>
<body>
<table border="1" bordercolor="red" bgcolor="yellow" width="400" height="150" >
<tr align="center"><td colspan="6"><b>B.Sc I- CS Time Table</b></td>
<tr align="center"><th>Day Order </th> <th>I</th> <th>II</th> <th>III</th> <th>IV</th>
<th>V</th></tr>
<tr align="center"> <td>I</td><td rowspan = "6">Tamil</td><td rowspan="6">English</td><td
colspan="3">C LAB</td>
</tr>
<tr align="center"> <td>II</td> <td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tr align="center"> <td>III</td><td>C</td><td>DP&CO</td><td>Association</td>
</tr>
<tr align="center"> <td>IV</td><td>C</td><td>DP&CO</td><td>Remedial</td>
</tr>
<tr align="center"> <td>V</td><td colspan="2">C LAB</td><td>Library</td>
</tr>
<tr align="center"> <td>VI</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
</table>
</body>
</html>
Output :
Here is an example of using background attribute. Here we will use an image available in
/images directory.
Example
<html>
<head>
<title></title>
</head>
<body>
<table border="1" bordercolor="red" background ="E:\Html Programs\photos\2.jpg"
width="400" height="150" >
<tr align="center"><td colspan="6"><b>B.Sc I- CS Time Table</b></td>
<tr align="center"><th>Day
Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr align="center"> <td>I</td><td rowspan = "6">Tamil</td><td rowspan="6">English</td><td
colspan="3">C LAB</td>
</tr>
<tr align="center"> <td>II</td> <td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tr align="center"> <td>III</td><td>C</td><td>DP&CO</td><td>Association</td>
</tr>
<tr align="center"> <td>IV</td><td>C</td><td>DP&CO</td><td>Remedial</td>
</tr>
<tr align="center"> <td>V</td><td colspan="2">C LAB</td><td>Library</td>
</tr>
<tr align="center"> <td>VI</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
</table>
</body>
</html>
Output :
Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top
of the table. This tag is deprecated in newer version of HTML/XHTML.
<caption> Tag
The HTML <caption> tag is used for creating table captions.
It is used in conjunction with the <table>tag and represents the title of the table.
The <caption> tag must be insertedimmediately after the <table> tag.
A table should have no more than onecaption.
Example :
<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="400" height="150" >
<caption><b>B.Sc I- CS Time Table</b></caption>
<tr align="center"><th>Day
Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr align="center"> <td>I</td><td rowspan = "6">Tamil</td><td rowspan="6">English</td><td
colspan="3">C LAB</td>
</tr>
<tr align="center"> <td>II</td> <td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tr align="center"> <td>III</td><td>C</td><td>DP&CO</td><td>Association</td>
</tr>
<tr align="center"> <td>IV</td><td>C</td><td>DP&CO</td><td>Remedial</td>
</tr>
<tr align="center"> <td>V</td><td colspan="2">C LAB</td><td>Library</td>
</tr>
<tr align="center"> <td>VI</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
</table>
</body>
</html>
Output :
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a body, and a foot. The head and
foot are rather similar to headers and footers in a word-processed document that remain the
same for every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But
it is notable that <thead> and <tfoot> tags should appear before <tbody>
Example
<html>
<head>
<title></title>
</head>
<body>
<table border="1" bgcolor="cyan" width="400" height="150" >
<thead><tr><td colspan="6" align="center"> <b>Time Table</b></td></tr></thead>
<tfoot><tr><td colspan="6" align="right"><b>Computer Science</b></td></tr></tfoot>
<tr align="center"><th>Day
Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr align="center"> <td>I</td><td rowspan = "6">Tamil</td><td rowspan="6">English</td><td
colspan="3">C LAB</td>
</tr>
<tr align="center"> <td>II</td> <td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tr align="center"> <td>III</td><td>C</td><td>DP&CO</td><td>Association</td>
</tr>
<tr align="center"> <td>IV</td><td>C</td><td>DP&CO</td><td>Remedial</td>
</tr>
<tr align="center"> <td>V</td><td colspan="2">C LAB</td><td>Library</td>
</tr>
<tr align="center"> <td>VI</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
</table>
</body>
</html>
Output:
Nested Tables
You can use one table inside another table. Not only tables you can use almost all the
tags inside table data tag <td>.
Example
Following is the example of using another table and other tags inside a table cell.
<html>
<head>
<title></title>
</head>
<body>
<table border=”1″ width="400" height="150">
<tr>
<td align="center" colspan="2"> <b>Due Information</b></td>
</tr>
<tr>
<td>
<table border=”1″>
<tr>
<th>Name</th>
<th>Dues</th>
</tr>
<tr>
<td>Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir</td>
<td>70000</td>
</tr>
</table>
</td>
<td>
<ul>
<li>Furniture</li>
<li>jewells</li>
</ul>
</td>
</tr>
<tr>
<td align = "center"><b>Due Details</b></td>
<td align = "center"><b>Purchased Things</b></td>
</tr>
</table></body>
</html>
Output:
Conclusion
Example 1:
<table border="4" cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 2: (Internet Explorer)
<table border="2" bordercolor="#336699" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
HTML Table <table>
<td>Column 2</td>
</tr>
</table>
Example 3:
<table cellpadding="2" cellspacing="2" width="100%">
<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
<table border="2" cellpadding="2" cellspacing="2"
width="100%">
<tr>
HTML Table
<td> <td>Column 1</td>
Data
<td>Column 2</td>
</tr>
</table>
HTML Table <th> <div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
Header <tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
HTML
<title> <title>Title of your HTML page</title>
Document Title
<table border="2" cellpadding="2" cellspacing="2"
width="100%">
<tr>
HTML Table
<tr> <td>Column 1</td>
Row
<td>Column 2</td>
</tr>
</table>
