The following example uses these table tags to create a web page:
Example |
<html> |
|
<head> |
<title> My list of jokes </title> |
</head> |
|
<body> |
|
<h1> Page Of Tables </h1> |
|
<table border=3 cellpadding=4 bordercolor="blue"> |
<tr><th colspan=2> Jokes </th> </tr> |
<tr><td> Serial no.</td><td>Joke Type</td></tr> |
<tr><td>1.</td> <td bordercolor=red> Classic Jokes </td> |
<tr><td>2.</td> <td bordercolor=red> Tennis Jokes </td> |
<tr><td>3.</td> <td bordercolor=red> Cricket Jokes </td> |
</table> |
|
<br/> <br/> |
|
<h2> My Favorite Joke </h2> |
|
<table border=2 cellpadding=4 bordercolor="blue"> |
<tr> <th>Joke Type</th> <th>Joke</th> </tr> |
<tr> <td>Classic Joke </td> <td bordercolor=red> These are some very good jokes. </td> |
</table> |
|
</body> |
</html> |
| |
This is how the web page looks

Caption Tag
The caption tag, like in HTML, sets a caption for the table. The <caption> tag goes just after the <table> tag. There should be only one <caption> per table. The “align” attribute of the <caption> tag of HTML is not supported in XHTML.
Example |
<table border=2> |
<caption> favorite jokes </caption> |
<tr> <th> Person</th> <th>Jokes </th> </tr> |
<tr> <td> Mac </td> <td> Cricket Jokes </td> </tr> |
</table> |
| |
Col Tag
The col tag defines the attributes for one or more columns in a table. It goes after the table tag. Each <col> defines the properties of one column, unless the span attribute is applied to indicate that it is for more than one column. The first <col> sets the properties of first column, the second <col> sets the properties of second column and so on.
In XHTML, the <col> tag has to be properly closed with a closing </col> tag.
Example |
<table border=2> |
<col> </col>
<col color=red> </col> |
<tr> <th>Person</th> <th>Jokes</th> </tr> |
<tr> <td>Mac</td> <td>Cricket Jokes</td> </tr> |
</table> |
| |
Attributes of Col Tag
Span
Span indicates how many columns the <col> tag must affect. The default value is 1.
Example |
<table border=2> |
<col color=red span=2> </col> |
<tr> <th>Person</th> <th>Jokes</th> </tr> |
<tr> <td>Mac</td> <td>Cricket Jokes</td> </tr> |
</table> |
| |
Align
Align sets the horizontal alignment of the cells in the column. It takes up four values which are left, right, center and justify. In this, the “justify” value is poorly supported by the browser.
Example |
<table border=2> |
<col align=left> </col>
<col align=right> </col> |
<tr> <th>Person</th> <th>Jokes</th> </tr> |
<tr> <td>Mac</td> <td>Cricket Jokes</td> </tr> |
</table> |
| |
Width
Width fixes the width of the column.
Example |
<table border=2> |
<col > </col>
<col width=”100px”> </col> |
<tr> <th>Person</th> <th>Jokes</th> </tr> |
<tr> <td>Mac</td> <td>Cricket Jokes</td> </tr> |
</table> |
| |
Bgcolor
Bgcolor sets the background color of cells in the column.
Example |
<table border=2> |
<col bgcolor=”#CCCC99”> </col> |
<tr> <th>Person</th> <th>Jokes</th> </tr> |
<tr> <td>Mac</td> <td>Cricket Jokes</td> </tr> |
</table> |
| |
|