HTML Table


Tables are very important in web design. Because by using the tags table you can create Web pages "divided" on some column or row. There are many website use table to divide the page in order to make the visitor easy in navigating the pages.
There are three tags or elements used in the making table: <TABLE>, <TR>, and <TD>. To remember is that the tab <TR> and <TD> be located between the tags <table> and </table>

<TABLE>
Attributes:

  • align - alignment: left, middle/center or right.
  • bgcolor - the background color from the table.
  • border - the size of the table border width (in pixels).
  • cellpadding - the distance between cell contents to the cell boundary (in pixels).
  • cellspacing - the distance between cell (in pixels).
  • width - the size of table in pixels or percent.

Example:

<TABLE Align="center" bgcolor="#0000FF"" border="2" cellpadding="5" cellspacing="2" width="90%">

<TR>
This tag is used to create a new line (the table). The attributes:

  • align - alignment: left, middle/center or right.
  • bgcolor - the background color of the row.
  • valign - vertical alignment: top, middle or bottom.

Example:
<TR Align="right" bgcolor="#0000FF" valign=top>


<TD>
This tag is used to create a new column in the table. The attributes :

  • align - alignment : left, middle/center or right
  • background - the image that is used as the background of the column.
  • bgcolor - the background color
  • colspan - merge some columns
  • height - the size of cell height in pixels.
  • nowrap - made so that the contents of the column remains on one line.
  • rowspan – merge some rows
  • valign - vertical alignment: top, middle or bottom.
  • width - the size of the column in pixels or percent.

Example:


<TD Align="right" background="background.gif" bgcolor="#0000FF" colspan="3" heignt="200" nowrap rowspan="2" valign="bottom" width="300">
   

<TABLE width="100" border="1" cellspacing="2" cellpadding="2">
<TR>
<td bgcolor="#0000FF"> </ td>
<td bgcolor="#FFFF66"> </ td>
<td rowspan="2" bgcolor="#FF3366"> </ td></TR>
<TR>
<td colspan="2" bgcolor="#33CC66"> </ td>
</TR>
<TR>
<td colspan="3" bgcolor="#FFCC99"> </ td>
</TR>
</TABLE>


<TABLE width="100" border="0" cellspacing="0" cellpadding="0">
<TR>
<td bgcolor="#0000FF"> </ td>
<td bgcolor="#FFFF66"> </ td>
<td rowspan="2" bgcolor="#FF3366"> </ td>
</TR>
<TR>
<td colspan="2" bgcolor="#33CC66"> </ td>
</TR>
<TR>
<td colspan="3" bgcolor="#FFCC99"> </ td>
</TR>
</TABLE>

0 comments:

Post a Comment