My HTML Way...: The TABLE Tag!

When you are designing a website you are going to need many tables, in some cases may be as many as 20-30. It is also s good way to control the placement of test and images as there is no (X,Y) coordinate system in HTML. So its good to master it before you jump to building sites.

The tag is

<TABLE></TABLE>

It works by adding rows first and then columns. Rows are added by the tag

<TR></TR>

and columns by the tag

<TD></TD>

So a simple table of 2X2 cells can be formed by:

<HTML>
 <BODY>
  <TABLE Border = "1">
   <TR>
    <TD>First Row First Column</TD>
    <TD>First Row Second Column</TD>
   </TR>
   <TR>
    <TD>Second Row First Column</TD>
    <TD>Second Row Second Column</TD>
   </TR>
  </TABLE>
 </BODY>
</HTML>

The table would look like:

you may notice the "Border" attribute, which is by default set to "0". Now lets see some more attributes that can help in designing the table. best way to learn this is to design a table and then look at the code.

<HTML>
 <BODY>
  <TABLE Border = "1" Cellpadding = "10" Cellspacing = "10" BGColor = "Yellow">
   <TR>
    <TD>First Row First Column</TD>
    <TD>First Row Second Column</TD>
   </TR>
   <TR>
    <TD>Second Row First Column</TD>
    <TD>Second Row Second Column</TD>
   </TR>
  </TABLE>
 </BODY>
</HTML>

CellPadding: The space between the cell borders and its contents.
CellSpacing: the distance between two adjacent cells.
BGColor: The background color for the table (this can be set to each cell individually as show below).

<HTML>
 <BODY>
  <TABLE Border = "1" Cellpadding = "5" Cellspacing = "5">
   <TR>
    <TD BGColor = "Yellow">First Row First Column</TD>
    <TD BGColor = "Red">First Row Second Column</TD>
   </TR>
   <TR>
    <TD BGColor = "Blue"><Font Color = "White">Second Row First Column</Body></TD>
    <TD BGColor = "Green">Second Row Second Column</TD>
   </TR>
  </TABLE>
 </BODY>
</HTML>

There a few more attributes we need to look into.

Table data can be aligned left, right top, bottom or center using Align and VAlign attributed.
The following example shows the use of these attributes:

<HTML>
 <BODY>
  <TABLE Border = "1" Cellpadding = "0" Cellspacing = "5" Width = "100%" Height = "100%">
   <TR>
    <TD Align = "Left">First Row First Column</TD>
    <TD Align = "Right">First Row Second Column</TD>
   </TR>
   <TR>
    <TD VAlign = "Top">Second Row First Column</Body></TD>
    <TD VAlign = "Bottom">Second Row Second Column</TD>
   </TR>
   <TR>
    <TD VAlign = "Top" Align = "Right">Third Row First Column</Body></TD>
    <TD VAlign = "Bottom" Align ="Center">Third Row Second Column</TD>
   </TR>
  </TABLE>
 </BODY>
</HTML>

Web Page:

You can also notice the use of Width and Height attributes in <TABLE< tag. They can be used to set the Width and Height of the table, they take direct numbers and also the percentage values (WRT the web page). As in this case the table spans 100% of the web page.

There is one more this I wanna share before concluding.

Collapsing the table border:

The table border can be ugly the way it is, that is with two lines, one for the cell and one for the border. If you would like to merge them together and let the table have a single line border then use CSS styling: style="border-collapse: collapse;"

We can have:

<HTML>
 <BODY>
  <TABLE style="border-collapse: collapse;" Border = "1" Cellpadding = "0" Cellspacing = "5" Width = "100%" Height = "100%">
   <TR>
    <TD Align = "Left">First Row First Column</TD>
    <TD Align = "Right">First Row Second Column</TD>
   </TR>
   <TR>
    <TD VAlign = "Top">Second Row First Column</Body></TD>
    <TD VAlign = "Bottom">Second Row Second Column</TD>
   </TR>
   <TR>
    <TD VAlign = "Top" Align = "Right">Third Row First Column</Body></TD>
    <TD VAlign = "Bottom" Align ="Center">Third Row Second Column</TD>
   </TR>
  </TABLE>
 </BODY>
</HTML>

Web Page:

My HTML Way...

Tuesday, February 22, 2011

The TABLE Tag!

Collapsing the table border:

No comments:

Post a Comment