A table is an orderly arrangement of data distributed across a grid of rows and columns similar to a spreadsheet. In printed documents, tables commonly serve a subordinate function, illustrating some point described by accompanying text. Tables still perform this illustrative function in HTML documents.
However, because HTML alone does not offer the same layout capacities available to print designers, Web page tables also are commonly used to structure a page for layout. But unlike printed tables, HTML tables can contain information that is dynamic, or even interactive, such as the results of a database query.
Tables are used on web sites for two major purposes:
The obvious purpose of arranging information in a table
The less obvious – but more widely used – purpose of creating a page layout with the use of hidden tables.
Using tables to divide the page into different sections is an extremely powerful Tool. Almost all major sites on the web are using invisible tables to layout the pages.
The most important layout aspects that can be done with tables are:
Dividing the page into separate sections. An invisible table is excellent for this purpose .
Creating menus. Typically with one color for the header and another for the links following in the next lines.
Adding interactive form fields. Typically a gray area containing a search option .
Creating fast loading headers for the page. A colored table with a text on it loads like a bullet compared to even a small banner.
Easy alignment of images that have been cut into smaller pieces.
A simple way to allow text to be written in two or more columns next to each other.
We’ll be covering the following topics in this tutorial:
Basic Table Tags
In order to create a table in a Web page, firstly the structure of the table is to be defined using TABLE tag in HTML. The Beginning and end of a table are marked using <TABLE>and </TABLE> tags. When the structure of a table is created <TR> tag is used to add a row in the table. It marks the beginning of a row. The closing tag is optional but you are advised to include all closing tags in order to enhance the readability of the code. In the absence of closing tag, debugging of the code may be frustrating. Instead of writing the HTML head, body etc., tags again and again, the table creation is explained using the table tags only. Now our table has a single row and it looks like below
<table> <tr> ....... ....... </tr> </table>
An empty row has been created and now we need to have some table cells so that we can put something in those cells. There are two types of cell tags used in a table.
1. <th>: Marks a heading cell within a row. It is similar to the heading tag <HI.. ..H6> on a web page and is used to give a proper heading to the columns of the table. This tag is optional and you can create tables without using <TH>tag.
2. <td>: It is a data cell tag and used for the body of the table. Again the closing tags </th> and </td> are optional. Let us include header and data cells into our sample table and put some data to make it complete. The lines of code illustrate this concept:
<html> <head> <title> table tags</title> </head> <body> <table> <tr> <th>title of books</th> <th>authors</th> </tr> <tr> <td>dhtml</td> <to>D Thakur</td> </tr> <tr> <td>sad</td> <td>awad</td> <tr> </table> </body> </html>
Setting Table Borders
Tables with borders are much easier to read and are more attractive. You can specify a table border by using “border = number” attribute in the opening table tag. The number specifies the width of the border around the table in pixels. The default value is generally zero. Most of the browsers display table borders with 3D-effect. The following code shows the use of border attribute in a table.
<html> <head> <title> table tags</title> </head> <body> <table border=7> <tr> <th>title of books</th> <th>authors</th> </tr> <tr> <td>dhtml</td> <td>Des Raj</td> </tr> <tr> <td>sad</td> <td>awad</td> <tr> </table> </body> </html>
Also the color of the border can be set using the “border color” attributes in <TABLE> tag. It accepts either an RGB number or an accepted color name. The following code shows the use of border color attribute in a table as:
<html> <head> <title> table tags</title> </head> <body> <table border=7 bordercolor="pink"> <tr> <th>title of books</th> <th>authors</th> </tr> <tr> <td>dhtml</td> <td>thomas powell</td> </tr> <tr> <td>sad</td> <td>awad</td> <tr> </table> </body> </html>
Including Background Color
You can even set background color for the whole table, row or for a table cell (data or header). The background color can be set for the whole table by using bgcolor = color” attribute in the <TABLE>Tag.
In order to set different background colors for a particular cell or a row, you can use the bgcolor attribute with <TE> and <TR> tags.
The following code sets pink color for the first row and blue color for the cell containing Text “AWAD”.
<html> <head> <title> table tags</title> </head> <body> <table border=5 bordercolor="pink"> <tr bgcolor="pink"> <th>title of books</th> <th>authors</th> <th>cost</th> </tr> <tr> <td>dhtml</td> <td>thomas powell</td> <td>rs.200</td> </tr> <tr> <td>sad</td> <td>bgcolor="blue">awad</td> <td>rs.150</td> </tr> <tr> <td>ansi c</td> <td>balaji</td> <td>rs.250</td> </tr> </table> </body> </html>
Deleting Rows and Columns
To delete a row just delete the related <TD> and <TR>tags enclosing that row. Instead of deleting the associated lines of code; you can also make them as comments. Any text or code included between <- and -> will act as a comment. A comment can be placed anywhere in the document and the browser will ignore everything within the brackets.
You can insert hidden messages, notes to yourself, write a helpful message or you can even put HTML tags in a comment and they will be ignored. On the similar basis columns can be deleted from a table.
<html> <head> <title> table tags</title> </head> <body> <table border=5 bordercolor="pink"> <tr bgcolor="pink"> <th>title of books</th> <!-- <th>authors</th> <th>cost</th> </tr> <tr> <td>dhtml</td> <!-- <td>thomas powell</td> <td>rs.200</td> </tr> <tr> <td>sad</td> <!-- <td>bgcolor="blue">awad</td> <td>rs.150</td> </tr> <tr> <td>ansi c</td> <!-- <td>balaji</td> <td>rs.250</td> </tr> </table> </body> </html>
A particular size of the table can be specified using “Width” and “height” attributes in the <TABLE> tag. Both “width” & “height” attribute accept either number of pixels or the percentage of the browser’s window width. For example, a table 200 pixels high is specific as height = “200″ ‘whereas height = “20%” reserves twenty percent of the available browser height to that particular table. Also align attribute can be used to specify the position of the table in the browser window.
This attribute is to be included within the opening <TABLE> tag and it tabs either left right or center values. By default tables are aligned to the left of the browser’s window. The following code will show the use of width, height and align attributes.
<html> <head> <title> table tags</title> </head> <body> <tableborder=5 bordercolor="pink"width="100"height="200"align="center"> <tr bgcolor="pink"> <th>title of books</th> <th>authors</th> <th>cost</th> </tr> <tr> <td>dhtml</td> <td>thomas powell</td> <td>rs.200</td> </tr> <tr> <td>sad</td> <td>bgcolor="blue ">awad</td> <td>rs.150</td> </tr> <tr> <td>ansi c</td> <td>balaJi</td> <td>rs.250</td> </tr> </table> </body> </html>
Including Images Within Tables
An image can either be included in a table cell or can act as a background in a table:
1. To add a background image: Use “background” attribute in the opening <TABLE>tag. It will take the URL of the image as its value and the background images are titled throughout the available table space. Let’s include “shed in field. if ” image file as a table background image in Code as:
<html> <head> <title> table tags</title> </head> <body> <table border=5background="d:\shed in field.gif"width="100"height="200"align="center"> <tr bgcolor="pink"> <th>title of books</th> <th>authors</th> <th>cost</th> </tr> <tr> <td>dhtml</td> <td>thomas powell</td> <td>rs.200</td> </tr> <tr> <td>sad</td> <td>bgcolor="blue ">awad</td> <td>rs.150</td> </tr> <tr> <td>ansi c</td> <td>balaJi</td> <td>rs.250</td> </tr> </table> </body> </html>
2. To include images within Cells: Images can be included within header or data cells. For that add <IMG> attribute between the <TD> or <TH> cell tags with proper URL specifying the source of the image. The following code shows the insertion of an image in a specific cell.
<html> <head> <title> table tags</title> </head> <body> <table border=5 bordercolor="pink"width="100"height="200"align="center"> <tr bgcolor="pink"> <th>title of books</th> <th>authors</th> <th>cost</th> </tr> <tr> <td>dhtml</td> <td>thomas powell</td> <td>rs.200</td> </tr> <tr> <td>sad</td> <td><imgsrc="c:\windows\hlpglobe.gif"height=68width=55>awad</td> <td>rs.150</td> </tr> <tr> <td>ansi c</td> <td>balaji</td> <td>rs.250</td> </tr> </table> </body> </html>
Spanning Rows and Columns
Two attributes “rowspan” and “colspan” are used to combine adjoining cells into larger cells. These attributes are used in either <TH> or <TD> tags and accepts a number as value. For rowspan attribute this number indicates the number of rows a cell should take up and for colspan the number of columns the cell should span. In both the cases the present cell is included in counting.
You should note that when you are using these attributes, the neighboring cells are not eliminated. They are just concealed and the acquiring cell uses their space. For example, rowspan = 4 indicates that four cells are joined down the row including the current cell. Firstly we will span rows in a table: The layout of the code can be built.
As you see, each of the two cells having contents “Numerical Methods” “ANSI C” are stretched over two rows. So we need to specify rowspan = 2 in the corresponding <TD> tags.
As the browser encounters rowspan = 2 in a <TD> tag, it comes to a decision that this cell will need the space of two cells vertically and in view of that it provides the space. Then it continues across the row and adds the next five cells and comes back to the next row.
Now the first cell of this row has already been filled due to rowspan attribute and so it has only five data cells instead of six. The same is true for colspan attribute. This attribute spans columns instead of rows.
Specifying Cell Size and Alignment
It’s fine idea to specify how big each cell is. When no instructions are given to the browser, each cell may be of different size depending on the size of the cell contents. Specifying cell sizes avoids wrapping of text and makes the content easier to read. The size of a cell in a table can be adjusted using the “Width” attribute.
The width of a cell is specified as number of pixels or as a percentage of table width. This attribute can be used with <TH> and <TD> tags to adjust the width of cells.
Not only the size of a cell can be adjusted but we can even control where in the cell the data and other contents will appear. This can be done by setting the alignment of data within the cell. The cell contents can be aligned either horizontally or vertically. The horizontal alignment can be set to left, right, center and vertically alignment to top, middle, bottom.
There are mainly two attributes It align” and “valign” for specifying horizontal and vertical cell alignments. By default the table contents are aligned (left, middle) and the table headings are aligned (center, middle) in the cell. You can specify these alignments for a row or for a cell.
When used with <TR>tag, the values specified in these attributes will be applicable to all the cells in that particular row. But if a <TD> or <TH> cell in that row has its own specific alignments, then these alignments will override the earlier alignments in the <TR>tag.
You can observe that heading row has default alignment i.e. (center, middle). Now next row is being aligned as (center, bottom). The third row is aligned (left, top) but the last cell of this row is aligned (center, middle) and this alignment override the earlier (left, top) alignment. The third row is aligned (right, middle) and the last row has the default alignment i.e. (left, middle).
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular