Post By: Hanan Mannan
Contact Number: Pak (+92)-321-59-95-634
-------------------------------------------------------

HTML Tables

Tables are very useful to arrange in HTML and they are used very frequently by almost all web developers. Tables are just like spreadsheets and they are made up of rows and columns.

You will create a table in HTML/XHTML by using <table> tag. Inside <table> element the table is written out row by row. A row is contained inside a <tr> tag . which stands for table row. And each cell is then written inside the row element using a <td> tag . which stands for table data.

Example:

<table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>

This will produce following result:

Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2

NOTE: In the above example border is an attribute of <table> and it will put border across all the cells. If you do not need a border then you cal use border="0". The border attribute and other attributes also mentione din this session are deprecated and they have been replaced by CSS. So it is recommended to use CSS instead of using any attribute directly.

Table Heading - The <th> Element:

Table heading can be defined using <th> element. This tag will be put to replace <td> tag which is used to represent actual data. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element at any place:

<table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Hanan Mannan</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table>

This will produce following result. You can see its making heading as a bold one:

Name Salary Hanan Mannan 5000 Shabbir Hussein 7000

To Become more comfortable - Do Online Practice

NOTE: Each cell must, however, have either a <td> or a <th> element in order for the table to display correctly even if that element is empty.

Table Cellpadding and Cellspacing:

There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cell. Cellspacing defines the width of the border, while cellpadding represents the distance between cell borders and the content within. Following is the example:

<table border="1" cellpadding="5" cellspacing="5"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Hanan Mannan</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table>

This will produce following result:

Name Salary Hanan Mannan 5000 Shabbir Hussein 7000

To Become more comfortable - Do Online Practice

Colspan and Rowspan Attributes:

You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows. Following is the example:

<table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table>

This will produce following result:

Column 1 Column 2 Column 3 Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1

Tables Backgrounds

You can set table background using of the following two ways:

• Using bgcolor attribute - You can set background color for whole table or just for one cell.
• Using background attribute - You can set background image for whole table or just for one cell.

NOTE:You can set border color also using bordercolor attribute.

Here is an example of using bgcolor attribute:

<table border="5" bordercolor="green" bgcolor="gray"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td> <td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table>

This will produce following result:

Column 1 Column 2 Column 3 Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1

To Become more comfortable - Do Online Practice

Here is an example of using background attribute:

<table border="1" background="/images/home.gif"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td> <td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3" background="/images/pattern1.gif"> Row 3 Cell 1 </td></tr> </table>

This will produce following result:

Column 1 Column 2 Column 3 Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1

Table height and width:

You can set a table width and height using width and height attrubutes. You can specify table width or height in terms of integer value or in terms of percentage of available screen area. Following is the example:

<table border="1" width="400" height="150"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>

This will produce following result:

Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2

Using Table Caption:

The caption tags will serve as a title or explanation and show up at the top of the table. This tag is depracated in newer version of HTML/XHTML.

<table border="1"> <caption>This is the caption</caption> <tr> <td>row 1, column 1</td><td>row 1, columnn 2</td> </tr> </table>

This will produce following result:

This is the caption row 1, column 1 row 1, columnn 2

Using a 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 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>

<table border="1" width="100%"> <thead> <tr> <td colspan="4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> </table>

This will produce following result:

This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4 ...more rows here containing four cells... Cell 1 Cell 2 Cell 3 Cell 4 ...more rows here containing four cells...

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>.

Following is the example of using another table and other tags inside a table cell.

<table border="1"> <tr> <td> <table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Hanan Mannan</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </td> <td> <ul> <li>This is another cell</li> <li>Using list inside this cell</li> </ul> </td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>

This will produce following result:

Name Salary Hanan Mannan 5000 Shabbir Hussein 7000 This is another cell Using list inside this cell Row 2, Column 1 Row 2, Column 2