Tables 3

  BACK   Home NEXT | Style Sheets 

Table of Contents

Text Alignment Captions Nested Tables The < Colgroup > Tag


Table Alignment

To align Table to the Left of a page, Type the command :

< table align="left" >

 

 

To align Table to the Right of a page, Type the command :

< table align="right" >

 

To align Table to the Center of a page, Type the command :

< table align="center" >

 

Top

Text Alignment

To align Text to the Right of a table, Have your Text typed after Table Tags with the command <align="left">

The Code

<table border="2"width="30%"height="10%"align="left">
<tr>
<td>
</table>

The Text is typed after the table Tags with the command <align="left">

The Result

 
The Text is typed after the table Tags with the command <align="left">:

 

To align Text to the left of a table, Have your Text typed after Table Tags with the command <align="right">

The Code

<table border="2"width="30%"height="10%"align="right">
<tr>
<td>  
</table>
The Text is typed after the table Tags with the command <align="right">

The Result

 
The Text is typed after the table Tags with the command <align="right">

 

To align Text to the Bottom of a table, Have your Text typed after the command < br clear=all >

The Code

<table border="2"width="30%"height="10%">
<tr>
<td>  
</table>
<br clear="all">
The Text is typed after the command <br clear="all">

The Result

 

The Text is typed after the command <br clear="all">

 

Cell Alignment

To align Text to the Center of a Cell, do that:

<td align="center"> Align Text to the Center </td>

Here is The Result

Align Text to the Center

To align Text to the Right of a Cell, do that:

<td align = "right"> Align Text to the Right </td>

Here is The Result

Align Text to the Right

NOTE :

The default alignment is usually left. No value is needed.

Top

Captions

The Tag :

< caption > < /caption >

It is inserted between the < table > and < tr > Tags .

No Alignment is needed
  
  
Alignment is needed
  
  

By default, Caption is aligned to the Top of a table.

To align Caption to the Bottom of a table, Type the command :

< caption align = " bottom " > Your Caption < /caption >

Top

Nested Tables

Create one table inside another

Click To see
Nested Tables used to create:

Triple Backgrounds

Top

Column Groups

To affect a whole column of your table in one go, use < Colgroup > Tags.

The Tags are :

< Colgroup > < /Colgroup >

    
    
    
    

Below are the < colgroup >  < /colgroup > Tags that created the Columns you are looking at.

Here are The Tags :

< table width="85%"border="1"bordercolor="#770000"cellpadding="5"cellspacing="0">
< colgroup bgcolor ="#e3d6a6" >
< colgroup bgcolor ="#e6d3d0" >
< colgroup bgcolor ="#cca69f" >
< colgroup bgcolor ="#e9e8c7" >
< tr > < td > < /td > < td > < /td > < td > < /td > < td > < /td >
< tr > < td > < /td > < td > < /td > < td > < /td > < td > < /td >
< tr > < td > < /td > < td > < /td > < td > < /td > < td > < /td >
< tr > < td > < /td > < td > < /td > < td > < /td > < td > < /td >
< /colgroup > < /colgroup >
< /colgroup > < /colgroup >
< /table>

To get rid of all inside lines , use < table rules="groups" >

    
    
    
    

It can take table attributes like align and valign too.

centerright  
centerright  
centerright  
centerright  

The span attribute allows one tag to control multiple columns at a time.

    
    
    
    

A colgroup with no span attribute has a default span of 1 column.

     
     
     
     

It can take a table attribute like width

Example 1 :

1   
2   
3   
4   

Example 2 :

1 5 
2 6 
3 7 
4 8 

It can take a class attribute.

In the head section, type the following :

< style  type="text/css" >
.first{background-color:"#e3d6a6"}
.special{background-color:#e6d3d0}
.last{background-color:#e3d6a6}
< /style >

In the body section, type the following :

< colgroup class="first"span="3" >
< colgroup class="special"span="2" >
< colgroup class="last"span="3" >
        
        
        
        

Click To see

< Colgroup > < /Colgroup > Tags that can be used to create Homepages :

  BACK   Home   Top NEXT | Style Sheets