Chapter 6
Tables
Tables are great for not only presenting data in an ordered fashion , but also for laying out your whole page by using the align attributes. Tables allow greater flexibility when it comes to positioning the elements of your page. Let's create one now using the following:
- <TABLE width=400 border=2 >
- <TR>
- <Td>1st description of 1st row</Td>
- <Td>2nd description of 1st row</Td>
- </TR>
- <TR>
- <Td>1st description of 2nd row</Td>
- <Td>2nd description of 2nd row</Td>
- </TR>
- <TR>
- <Td>1st description of 3rd row</Td>
- <Td>2nd description of 3rd row</Td>
- </TR>
- </TABLE>
The effect
First the <TABLE> tag was opened. Then
a <TR> tag (table row) , then a <TD> tag (table description) then you enter the
text ( or image ) you want displayed , then you use the </TD> tag to close the 1st cell
of the 1st row. You create another cell using <TD> .... </TD> , then you close the
1st table row using </TR>. You then create another 2 rows , each containing 2 cells and
finally you close the table using </TABLE>
Each of these tags has its own attributes. You can see I used the
width=500 and the
border=2 attributes in the <TABLE> tag to set the width and border of the table in pixels.
We could use
border=0 to hide the tables border. Its a good idea to use a border while creating your page (which helps you position elements visually) and change it to "0" once your done. Tables have a default cellspacing and cellpadding of 2 pixels. Netscape has an invisible border by default, but it is at least 1 pixel wide, so always specify
border="0" to remove extra gaps.
To completely remove all gaps, spacing borders and padding, use the following table tag:
<TABLE width="400" border="0" cellpadding="0" cellspacing="0" >
Choose an attribute of the
table tag from the drop down menu below to see its description.