ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
HTML Tutorial - Index
HTML Tutorial - Introduction
HTML Tutorial - Formatting
HTML Tutorial - Links
HTML Tutorial - Images
HTML Tutorial - Forms
HTML Tutorial - Tables
HTML Tutorial - Frames
HTML Tutorial - Style Sheets
HTML Tutorial - Advance Tags
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > HTML Tutorial > Tables
 
Previous Next

HTML Tutorial - Tables

 
                                                                                                                      Page 3 of 4
 

Caption Tag

The caption Tag sets a caption for the table. The <caption> tag is placed just after the <table> tag. There should be only one <caption> per table.

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>
 

Attributes of Caption Tag

Align

Align sets the alignment of the table caption. Align does not work like other alignment attributes. In this case, there are four acceptable values-Align=top puts the caption on top of the table, align=bottom puts it on the bottom of the table. Align=left puts the caption on top to the left, and align=right puts the caption on top to the right.

Example:

 

<table border=2>
<caption align=bottom> 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 an HTML table. It is placed after the table tag. Each <col> tag 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. It is a singular tag but according to modern practice it should be properly closed.

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

It indicates that how many columns the <col> tag affects. 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. But justify 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>
 

Colgroup Tag

Colgroup defines a group of columns in the table and allows the user to set the properties of these columns. It is placed immediately after the table tag. It works very much like the <col> tag and needs to be closed properly. It is useful when borders have to be put between groups of columns instead of every column.

Example:

 

<table border=2>

<colgroup> </colgroup>

<colgroup span=2> </colgroup>

<tr> <th>Person</th> <th>Jokes1</th> <th>jokes2</th> </tr>
<tr> <td>Mac</td> <td>Cricket Jokes</td> <td>tennis jokes</td></tr>
</table>
 

Attributes of Colgroup Tag

Span

Span indicates how many columns are in the group. It works same as in <col span=….>. The default for span is 1.

Example:

 

<table border=2>
<colgroup span=2 color=red> </colgroup>
<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 group. It works like it works in the <col> tag. It takes up four values- left, right, center and justify. But justify is poorly supported by the browser.

Example:

 

<table border=2>
<colgroup span=2 align=center> </colgroup>
<tr> <th>Person</th> <th>Jokes</th> </tr>
<tr> <td>Mac</td> <td>Cricket Jokes</td> </tr>
</table>
 

Width

Width sets the width of each column in the column group. If a column group has a width of 20% and has two columns in the group, then width of each column is 20%.

Example:

 

<table border=2>
<colgroup span=2 width=20%> </colgroup>
<tr> <th>Person</th> <th>Jokes</th> </tr>
<tr> <td>Mac</td> <td>Cricket Jokes</td> </tr>
</table>
 

The tags illustrated above are applied in the following example:

Example:

 

<html>
<head>
<title> My list of jokes </title>
</head>
 
<body background ="myimage.jpg" text = “blue”>
<h1 align=center> Some More Tables </h1>
 

<table border=3 bgcolor=lime align=center cellpadding=4

bordercolor="blue">

<caption align=left><b> Good Jokes </b></caption>
<col align=right> </col>
<col bgcolor="#CCFF99"> </col>
 
<tr bgcolor="#CCCC99"><th> Joke Type </th> <th> Joke </th> </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 align=left> Let's read a joke!</h2>

<table border=3 bgcolor=lime align=left cellpadding=4

bordercolor="blue">

<colgroup span=2 align=center bgcolor="#CCFF99"> </colgroup>
<tr> <th> Joke Type</th> <th> Joke </th> </tr>

<tr> <td>Blonde Joke </td> <td> A brunette says to a blonde, "Look! A

dead bird!" and the blonde looks up and says, "Where?"</td> </tr>

 
</table>
</body>
</html>
 

This is how the web page looks:

             

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2006. All Rights Reserved.