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
 
XHTML Tutorial - Index
XHTML Tutorial - Introduction to XHTML
XHTML Tutorial - Formatting
XHTML Tutorial - Links
XHTML Tutorial - Images
XHTML Tutorial - Forms
XHTML Tutorial - Tables
XHTML Tutorial - Frames
XHTML Tutorial - Style Sheets
XHTML Tutorial - Advanced 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
Makeup Artist 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 > XHTML Tutorial > Tables
 
Previous  Next

XHTML Tutorial - Tables

   
                                                                             Page 4 of 5
 

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. It is useful when borders have to be put between groups of columns instead of every column.

The <colgroup> tag used in XHTML is exactly similar to the <colgroup> tag used in HTML.

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 there in the group. It works similarly as in <col span=….>. The default value 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 just works like it works in the <col> tag. It takes up four values which are 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 following example illustrates the above explained tags in a web page:

Example

<html>

<head>

<title> My list of jokes </title>

</head>

<body>

<h1> Some More Tables </h1>

 

<table border=3 cellpadding=4 bordercolor="blue">

<caption><b> Good Jokes </b></caption>

<col align=right> </col>

<col bgcolor="#CCFF99"> </col>

<tr><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> Let's read a joke!</h2>

<table border=3 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>

 

       

 

 

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