Tags for Tables
Tables can be created in HTML using <table> tag. In HTML table is a section of information broken into columns and rows of blocks called cells. The table <table> tag is the container for other table-related tags to create a table. The <table> tag itself will not create a table, it’s only a container. After defining a table, rows must be created and content or data for each cell must be assigned. The tags used for creating rows and cell data are illustrated below:
<tr> – tags is used to create table row
<td> – tag is used for table data and holds the actual content for the cells
<th> – tag is used as table header containing header information
The table cells can contain text content as well as images. The table <table> tag has an attribute border, through which table border can be defined. For example, let us consider the following table to be created in HTML:
The HTML code given below demonstrates the creating of the above table. In line 7, <table> tag contains “border” attribute with value as “1”, which signifies that the table cells will have the border with width as “1”.
<html>
<head>
<title>Table Tag</title>
</head>
<body>
<p>This is the demonstration of displaying Tables</p>
<table border="1">
<tr>
<td>S.No</td>
<td>Name</td>
<td>Amount</td>
</tr>
<tr>
<td>101</td>
<td>aaa</td>
<td>12,256</td>
</tr>
<tr>
<td>102</td>
<td>bbb</td>
<td>8,256</td>
</tr>
<tr>
<td>103</td>
<td>ccc</td>
<td>24,525</td>
</tr>
</table>
</body>
</html>
The output of the above HTML code is shown below:
The video below demonstrates the complete working of HTML table tags
In the above example, we observe that the width of the table is dynamically adjusted according to the length of the content in the table cells. The <table>, <tr>, <td>, and <th> tags have attribute to adjust the width of table, cells and headers. For example:
<table width=”300px” >
<table width=”80%” >
<td width=”80%” >
<th width=”80%” >
The attribute with can have values as pixels or percentage.
Let us apply the width attribute and also consider the use of <th> tag for demonstrating the table headers to be created in HTML for the below table:
The HTML code given below shows the demonstration of <th> tag in line 9 to line 11:
<html>
<head>
<title>Table Tag with Header</title>
</head>
<body>
<p>This is the demonstration of displaying Tables with Header</p>
<table border="1" width="60%">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Amount</th>
</tr>
<tr>
<td>101</td>
<td>aaa</td>
<td>12,256</td>
</tr>
<tr>
<td>102</td>
<td>bbb</td>
<td>8,256</td>
</tr>
<tr>
<td>103</td>
<td>ccc</td>
<td>24,525</td>
</tr>
</table>
</body>
</html>
HTML code in line 7, the <table> tag also consist of width attribute which is set at “60%”. The output of the above HTML code is shown below where the width of the table is 60% of the web browser width along with the first row as headings.
Sometimes there may be need to change the amount of space between content and the edge of the cell, this is done through cellpadding attribute. For example: <table cellpadding=”10″ > this tag apply 10 pixel of space between the content and the edge of the cell. The HTML code to demonstrate the use of cellpadding is given below:
<html>
<head>
<title>Table Tag Cellpadding</title>
</head>
<body>
<p>This is the demonstration of displaying Tables with cellpadding Attribute</p>
<table border="1" width="60%" cellpadding="10">
<tr>
<td>S.No</td>
<td>Name</td>
<td>Amount</td>
</tr>
<tr>
<td>101</td>
<td>aaa</td>
<td>12,256</td>
</tr>
<tr>
<td>102</td>
<td>bbb</td>
<td>8,256</td>
</tr>
<tr>
<td>103</td>
<td>ccc</td>
<td>24,525</td>
</tr>
</table>
</body>
</html>
The output of the above HTML code for demonstrating cellpadding is shown below:
Sometimes there may also be need to change the amount of space between each cell. This is achieved through the use of cellspacing attribute. For example: <table cellspacing=”15″ > this tag apply 15 pixel of space between each cell. The HTML code given below demonstrates the use of cellspacing is given below:
<html>
<head>
<title>Table Tag with Cellspacing</title>
</head>
<body>
<p>This is the demonstration of displaying Tables with cellspacing attribute</p>
<table border="1" width="60%" cellspacing="15">
<tr>
<td>S.No</td>
<td>Name</td>
<td>Amount</td>
</tr>
<tr>
<td>101</td>
<td>aaa</td>
<td>12,256</td>
</tr>
<tr>
<td>102</td>
<td>bbb</td>
<td>8,256</td>
</tr>
<tr>
<td>103</td>
<td>ccc</td>
<td>24,525</td>
</tr>
</table>
</body>
</html>
The output of the above HTML code for demonstrating cellspacing is shown below:
In all the above example of creating tables, we have observed that the length of rows and columns are same. In some situations, the length of rows and columns may be different. The <td> tag allows additional attributes for spanning rows and columns.
Spanning Columns
The <td> tag allows colspan attribute to span number of columns. For example <td colspn=”3″> means the content of the cell for the above tag will span 3 columns. Let us consider the table given below:
The HTML code given below creates a table where the first row contains only one cell which can be seen in line 9 where there is only one <td> tag.
<html>
<head>
<title>Table Tag without Colspan</title>
</head>
<body>
<p>This is the demonstration of displaying Tables without Colspan</p>
<table border="1" width="60%">
<tr>
<td>Data</td>
</tr>
<tr>
<td>101</td>
<td>aaa</td>
<td>12,256</td>
</tr>
<tr>
<td>102</td>
<td>bbb</td>
<td>8,256</td>
</tr>
<tr>
<td>103</td>
<td>ccc</td>
<td>24,525</td>
</tr>
</table>
</body>
</html>
The output of the above HTML code is shown below where the first row contains only one cell with the “Data” as content and rest of the cell are not present. The output shown below is not according to the desired result.
The above code can be modified by using colspan attribute in <td> tag as seen in line 9 of the code given below. The colspan attribute uses “3” as the value to span “3” colomns.
<html>
<head>
<title>Table Tag with Colspan</title>
</head>
<body>
<p>This is the demonstration of displaying Tables with Colspan</p>
<table border="1" width="60%">
<tr>
<td colspan="3">Data</td>
</tr>
<tr>
<td>101</td>
<td>aaa</td>
<td>12,256</td>
</tr>
<tr>
<td>102</td>
<td>bbb</td>
<td>8,256</td>
</tr>
<tr>
<td>103</td>
<td>ccc</td>
<td>24,525</td>
</tr>
</table>
</body>
</html>
The output of the above code with colspan attribute is shown below:
Spanning Rows
The <td> tag allows rowspan attribute to span number of rows. For example <td rowspan=”2″> means the content of the cell for the tag will span 2 rows.
The HTML code given below is written without using the rowspan attribute for the <td> tag and the rows and cells are created accordingly.
[html]
<html>
<head>
<title>Table Tag without Rowspan</title>
</head>
<body>
<p>This is the demonstration of displaying Tables without Rowspan</p>
<table border=”1″ width=”60%”>
<tr>
<td>101</td>
<td>aaa</td>
<td>12,256</td>
</tr>
<tr>
<td>bbb</td>
<td>8,256</td>
</tr>
<tr>
<td>ccc</td>
<td>24,525</td>
</tr>
</table>
</body>
</html>
[/html]
The output of the above HTML code is shown below where the first row contains three columns but in the rest of the rows data is not according to the desired result.
The above code can be modified by using rowspan attribute in <td> tag as seen in line 9 of the code given below. The rowspan attribute uses “3” as the value to span “3” rows.
[html]
<html>
<head>
<title>Table Tag with Rowspan</title>
</head>
<body>
<p>This is the demonstration of displaying Tables with Rowspan</p>
<table border=”1″ width=”60%”>
<tr>
<td rowspan=”3″>101</td>
<td>aaa</td>
<td>12,256</td>
</tr>
<tr>
<td>bbb</td>
<td>8,256</td>
</tr>
<tr>
<td>ccc</td>
<td>24,525</td>
</tr>
</table>
</body>
</html>
[/html]
The output of the above code with rowspan attribute is shown below:
Note that the value for both the attributes; colspan and rowspan must contain a numerical value.
Additional Formatting for Tables
The table tag contains additional tags in its container, such as <thead>, <tbody> and <tfoot>. The benefit of using these additional table tags is that for long tables, header information is repeated in each page when the table is printed. Though using these tags will not have any effect on the display of the table content on the web browser. The code to demonstrate the use of <thead>, <tbody> and <tfoot> is given below:
[html]
<html>
<head>
<title>Table Tag with Additional Tags</title>
</head>
<body>
<p>This is the demonstration of displaying Tables with additional attributes</p>
<table border=”1″ width=”60%”>
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td> <td>aaa</td> <td>12,256</td>
</tr>
<tr>
<td>102</td> <td>bbb</td> <td>8,256</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Amount</th>
</tr>
</tfoot>
</table>
</body>
</html>
[/html]
The output of the above HTML code will be the same as seen earlier.
In conclusion, we have seen here the basics of writing HTML code with several tags for presenting text content, tags for displaying images, creating hyperlinks, various types of lists and creating tables. In the next post in this category, we will be learning how to create forms in HTML.