The HTML tables allow the user to arrange his content - images, text, links etc in the form of rows & columns of a table. They look just like our excel spread sheets.
We can create a table in HTML using table element, the rows of the table using <tr> tag and the columns with <td> tag. Hence, we use
<table> tag for defining a table
<tr> tag for defining a table row
<td> tag for defining table data , that is content to be included in columns. The table data can be lists, text, images, links etc.
We can also specify a table heading using <th> tag.HTML renders the table heading in bold.
The basic structure for table definition would look like this:-
<table attribute1="value1" attribute2="value2"…> <tr> <td>data in first row first cell</td> <td>data in first row second cell</td> </tr> <tr> <td>data in second row first cell</td> <td>data in second row second cell</td> </tr> </table>
An example HTML table:
<html>
<head>
<title>
HTML Tables
</title>
</head>
<body>
<table border=”1”>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>1</td>
<td>Tina</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Nina</td>
<td>99</td>
</tr>
</table>
</body>
</html>
The output of the above program would be:-
S.No | Name | Score |
1 | Tina | 100 |
2 | Nina | 99 |
If you have noticed we have used border attribute in the table tag, this attribute draws a border around our table, if we do not specify this attribute the table will be displayed without borders. However, this attribute has been deprecated in HTML5. Always use CSS to style your table.
Applying border with CSS:
We presume that you know CSS because in the earlier sections of our tutorial we have discussed about it, so insert the following code in the head section of the previous program, the output would be same.
<style>
table,th,tr,td
{
border: 1px solid black;
}
</style>
Cellpadding and CellSpacing
These are the attributes for table element.
Using the cell padding attribute we can specify how much space we want between the border of the table cell and the content of the cell. Cellspacing attribute specifies the space between the cells of the table. These attributes are not supported in HTML5 .We can use border-spacing and padding properties of CSS to set cellspacing and cellpadding respectively.
Specifying cellspacing and cellpadding using attributes:
<table border="1" cellspacing="2" cellpadding="1"> <tr> <th>Name</th> <th>Attendance</th> </tr> <tr> <td>Krishna</td> <td>89%</td> </tr> <tr> <td>Siri</td> <td>45%</td> </tr> </table>
The output of the above code would be
Name | Attendance |
Krishna | 89% |
Siri | 45% |
To add padding and spacing using CSS insert the following code in the head section of your code.
<style>
table,th,td
{
border:1px solid black;
}
th,td
{
padding:5px;
}
table
{
border-spacing:5px;
}
</style>
The output of the above code would be:-
Name | Attendance |
Krishna | 89% |
Siri | 45% |
Colspan and rowspan
Using these attributes we can make the cells of the table span across multiple rows or columns.
Colspan attribute is used for spanning the cell across multiple columns.
Similarly, rowspan attribute is used for spanning the cell across multiple rows.
In simple terms, colspan merges columns and rowspan is used for merging rows. The following is the example:
<html>
<head>
<style>
table,th,td {
border:1px solid black;
border-collapse : collapse;
}
</style>
</head>
<body>
<h4>Example for Colspan and Rowspan</h4>
<table>
<tr>
<th> Week </th>
<th colspan="2"> Attendance </th>
</tr>
<tr>
<td rowspan="2">Week-1</td>
<td>Working days</td>
<td>16</td>
</tr>
<tr>
<td> Days Present </td>
<td> 11 </td>
</tr>
</table>
</body>
</html>
The output of the above code would be:
Week | Attendance | |
Week-1 | Working days | 16 |
Days Present | 11 | |
In the above code, we have used a new CSS property for our table i.e., border-collapse. Use this option if you want borders of your table to collapse into one.
Formatting Tables
HTML offers several ways to customize the look of our tables like setting background image for a single cell or whole table, setting background color for a single cell or whole table, setting a color for the border, changing the height and width of the table, giving a caption
We use,
· background attribute to set background image
· bgcolor attribute to set background color
· bordercolor attribute to set a color for table border.
· height attribute to set the height of a table
· width attribute to set the width of a table
· Caption tag to give a caption or a title to your table.
An example HTML program using the above discussed elements:-
<html>
<head>
<style>
table,th,td {
border:1px solid black;
border-collapse : collapse;
}
</style>
</head>
<body>
<h4>Example for Colspan and Rowspan</h4>
<table>
<tr>
<th> Week </th>
<th colspan="2"> Attendance </th>
</tr>
<tr>
<td rowspan="2">Week-1</td>
<td>Working days</td>
<td>16</td>
</tr>
<tr>
<td> Days Present </td>
<td> 11 </td>
</tr>
</table>
</body> </html>
The output of the above program would be:-
Table inside a Table
Yes, you heard it right. We can actually create tables inside a table i.e., we have an option to nest tables in HTML. We can also use almost any HTML tag inside our table.
An example for a nested table
<html>
<head>
<style>
table
{
border-collapse : collapse;
}
</style>
</head>
<body>
<table border="3" height="100" width="50">
<caption>
Nested Table
</caption>
<tr>
<td>
<table border="1" height="50" width="50" >
<tr >
<td>
<img src="image.jpg" alt="This is an image" height="150" width="150"></img>
</td>
<td>
<ul>
Types of images
<li>JPEG</li>
<li>Png</li>
<li>Gif</li>
<li>Bmp</li>
</ul>
</td>
</tr>
</table>
</td>
<td>
Hello
</td>
</tr>
<tr>
<td>
<a href="forest.jpg">Want to see forest, Click here</a>
</td>
<td>
<b>This is an example of a nested table</b>
</td>
</tr>
</table>
</body>
</html>
The output of the above program would be:-
We can create several patterns using this nested table concept. Let’s see an example,
<html>
<body>
<table border=15 bordercolor="plum">
<tr>
<td>
<table border=15 bordercolor="aqua">
<tr>
<td>
<table border=15 bordercolor="Hotpink"></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The output of this program would be
The more tables we nest, the slower the page loads. It also creates a bit of chaos in coding. Our advise is, use them efficiently and only when needed.
A more complex HTML table may also include elements like <col>, <colgroup>, <thead>, <tbody>, <tfoot>.
<col> and <colgroup>
· The <col> tag is used within a <colgroup> tag.
· The <colgroup> tag is used for grouping columns in a table for formatting.
· This tag is used for applying styles to entire columns, instead of repeating the code for each cell/row we can group the columns using this element and then can apply styling.
· The <colgroup> element must be a child of <table> element. It can be included after <caption> tag and before <tr>, <thead>, <tfoot> and <tbody> elements.
· The style rules for a column are specified in <col> tag which is placed under a <colgroup> element.
· There is no end tag for<col> tag.
The <thead> element
· The header content for an HTML table is grouped under this tag.
· The <thead> tag must have one or more <tr> inside.
· This is similar to the header in word document.
The <tbody> element
· This tag is used to indicate the main body of the table.
· A table may contain any number of <tbody> elements.
· This should appear after <thead> and <tfoot> tag.
The <tfoot> element
· The footer content for an HTML table is grouped under this tag.
· This is similar to footer in word document.
An example program
<html>
<body>
<table border="1" cellspacing="2" cellpadding="1">
<colgroup>
<col span="1" style="background-color:yellow">
<col style="background-color:gray">
</colgroup>
<thead>
<tr>
<td colspan="2">
Attendance for Month of April
</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">
Created by Vice-Principal, 05-05-2014
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Name</th>
<th>Attendance</th>
</tr>
<tr>
<td>Krishna</td>
<td>89%</td>
</tr>
<tr>
<td>Siri</td>
<td>45%</td>
</tr>
</tbody>
</table>
</body>
</html>
The output of the above program would be
Other Attributes for table tag
Attribute | Value | Description |
align | left, center, right | Specifies the alignment of table. Not supported in HTML5 |
frame | void | Specifies which part of the outside border should be visible. Not supported in HTML5 |
rules | none | Specifies which part of the inside borders should be visible. Not supported in HTML5 |
summary | text | Specifies the summary of the content of the table. Not supported in HTML5. |
Global Attributes
The <table> tag supports all the global attributes of HTML.
Event Attributes
The <table> tag supports all the Event attributes of HTML.
Difference between HTML 4.01 and HTML5
The "align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", and "width" attributes are not supported in HTML5. We have to use CSS instead of them.
Uses of Tables
· Tables are supported in all major browsers.
· Tables are used for arranging content in the form of a table.
· Using hidden tables (i.e., tables with no borders) we can divide our page into several sections .Thus, we can give a good look to our web page.
This is all about tables in HTML.
In our next chapter we will learn about HTML- Blocks.