menu
Ad goes here

Saturday, 1 September 2012

HTML Table

The table is defined with <table></table> tag and a table is divided into row with <tr></tr> tag and row is divided into column with <td></td> tag. The <td>content</td> tag contain can contain page content. Please see structure below.
<table>
  <tr>
      <td>Place your content here.</td>
  </tr>
</table>

Now I will introduce with you with the table tags and their attributes.

Table Border:

You have to define a table border size to display the table area or hide the table area [ie border=0.]. Please see example below.

Code Result 
<table border="0">
  <tr>
      <td>Place your content here.</td>
  </tr>
</table>
Note: The table area is disappear; due to the border "0" value.
1st TD 2nd TD 
<table border="1">
   <tr>
      <td>Place your content here.</td>
   </tr>
</table>
1st TD 2nd TD 
<table border="3">
  <tr>
    <td>Place your content here.</td>
  </tr>
</table>
1st TD 2nd TD 
<table border="5">
   <tr>
      <td>Place your content here.</td>
   </tr>
</table>
1st TD 2nd TD


Table Width:

We can use width by percentage or fixed. Let's experiment with table width.
Code Result 
<table boreder="1" width="50%">
  <tr>
      <td>Place your content here.</td>
  </tr>
</table>
50% 50% 
<table border="3" width="100%">
  <tr>
      <td>Place your content here.</td>
  </tr>
</table>
100% 100% 
<table border="200">
  <tr>
      <td>Place your content here.</td>
  </tr>
</table>
Note: We are using fixed width [width="200"] here.
200 200


Table Cellspacing:

Cellspacing create width between border lines.
Can be used to put space between cells / objects in invisible tables [If you use border="0"]
Code Result 
<table boreder="1" width="50%" cellspacing="0">
  <tr>
      <td>Place your content here.</td>
  </tr>
</table>
cellspacing="0" cellspacing="0" 
<table border="3" width="100%" cellspacing="1">
  <tr>
      <td>Place your content here.</td>
  </tr>
</table>
cellspacing="1" cellspacing="1" 
<table border="200" cellspacing="3">
 <tr>
    <td>Place your content here.</td>
 </tr>
</table>
cellspacing="3" cellspacing="3"


Table cellpadding:

Cellpadding create minimum space between objects and the inner table border.
Code Result 
<table boreder="1" width="50%" cellspacing="0" 
cellpadding="0">
  <tr>
      <td>Place your content here.</td>
  </tr>
</table>
cellpadding="0" cellpadding="0" 
<table border="3" width="100%" cellspacing="1" 
cellpadding="5"> 
  <tr>
      <td>Place your content here.</td>
  </tr>
</table>
cellpadding="5" cellpadding="5" 
<table border="200" cellspacing="3" 
cellpadding="10">
  <tr>
      <td>Place your content here.</td>
  </tr>
</table>
cellpadding="10" cellpadding="10"


Table Align:

The td align control the object/content position inbetween the td cell.
Code Result 
<table boreder="1" width="50%" cellspacing="0" 
cellpadding="0">
  <tr>
    <td align="left">Place your content here.</td>
  </tr>
</table>
align="left" 
<table border="3" width="100%" cellspacing="1" 
cellpadding="5">
  <tr>
    <td align="right">Place your content here.</td>
  </tr>
</table>
align="right" 
<table border="200" cellspacing="3" cellpadding="10">
  <tr>
    <td align="center">Place your content here.</td>
  </tr>
</table>
align="center"


TD collspan:

The colspan make one data cell wider than others above or below. Please see example below.
Code Result 
 <table border="1" width="50%" cellspacing="0" 
cellpadding="0">
   <tr>
     <td>Use Colspan</td>
     <td>Use Colspan</td>
   </tr>
   <tr>
     <td colspan="2">
          Your content
          Your content
          Your content 
          Your content
     </td>
   </tr>            
 </table>
Use Colspan Use Colspan
Your content
Your content
Your content


TD rowspan:

The rowspan make one column cell wider than others next to it. Please see example below.
Code Result 
<table border="1" width="50%" cellspacing="0" 
cellpadding="0">
  <tr>
      <td>Use Rowspan</td>
      <td rowspan="2">
          Your content
          Your content
          Your content 
          Your content
      </td>
  </tr>
  <tr>
      <td>Use Rowspan</td>
  </tr>
</table>
Use Rowspan Your content
Your content
Your content
Your content
Use Rowspan


Table, TR, TD BG color:

You can use background color of the above tags. Please see example.
Code Result
- Tabale BG color: 
<table border="1" width="90%" cellspacing="0" 
cellpadding="0" bgcolor="#FF0000">
    <tr>
      <td>Heading 1</td>
      <td>Heading 2</td>
      <td>Heading 3</td>
    </tr>
    <tr>
      <td>Place your content</td>
      <td>Place your content</td>
      <td>Place your content</td>
    </tr>
    <tr>
      <td>Place your content</td>
      <td>Place your content</td>
      <td>Place your content</td>
    </tr>                        
</table>
Heading 1 Heading 2 Heading 3
Place your content Place your content Place your content
Place your content Place your content Place your content
- TR BG color: 
<table border="1" width="90%" cellspacing="0" 
cellpadding="0" bgcolor="#FF0000">
    <tr bgcolor="#33CCFF">
      <td>Heading 1</td>
      <td>Heading 2</td>
      <td>Heading 3</td>
    </tr>
    <tr>
      <td>Place your content</td>
      <td>Place your content</td>
      <td>Place your content</td>
    </tr>
    <tr>
      <td>Place your content</td>
      <td>Place your content</td>
      <td>Place your content</td>
    </tr>                        
</table>
Heading 1 Heading 2 Heading 3
Place your content Place your content Place your content
Place your content Place your content Place your content
- TD BG color: 
<table border="1" width="90%" cellspacing="0" 
cellpadding="0" bgcolor="#FF0000">
    <tr>
      <td>Heading 1</td>
      <td>Heading 2</td>
      <td bgcolor="#FFCC00">Heading 3</td>
    </tr>
    <tr>
      <td>Place your content</td>
      <td bgcolor="#00CCFF">Place your content</td>
      <td>Place your content</td>
    </tr>
    <tr>
      <td bgcolor="#99CC00">Place your content</td>
      <td>Place your content</td>
      <td>Place your content</td>
    </tr>                        
</table>
Heading 1 Heading 2 Heading 3
Place your content Place your content Place your content
Place your content Place your content Place your content


Now try to create a complete page with the above tags and their attributes.

Code Result 
<table border="0" width="90%" cellspacing="1" cellpadding="5" 
align="center" bgcolor="#CCCCCC">
    <tr bgcolor="#d5d5d5">
        <td>Heading 1</td>
        <td>Heading 2</td>
        <td>Heading 3</td>
    </tr>
    <tr bgcolor="#f6f6f6">
        <td colspan="3">I am using colspan 3 for this td.</td>
    </tr> 
    <tr bgcolor="#f6f6f6">
        <td rowspan="2">Using rwospan 2.</td>
        <td colspan="2">Using colspan 2</td>
    </tr>
    <tr bgcolor="#f6f6f6">
      <td colspan="2">Using colspan 2</td>
    </tr>
      
</table>
Heading 1 Heading 2 Heading 3
I am using colspan 3 for this td.
Using rwospan 2. Using colspan 2
Using colspan 2
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)