[ Previous Section | Home | Index | Test Your HTML | Related links | Next Section ]

If, like I mentioned earlier, you are building your webpage while you read this tutorial, you probably have a snazzy-looking webpage with some neat graphics and cool links. Up until now, you have probably made much use out of <BR> tags and <ALIGN> tags. If you want to make things easier or align bits of your webpage more like you want them to be seen, then you might want to use a table. A table can align things like your images and text much better and easier than using the spacing characters. Tables also allow you to add things to your page that would look better in a table, like a price list or a table of secret codes.



Tables


<TABLE BORDER=x CELLSPACING=xx CELLPADDING=xx WIDTH=xx or xx%>... </TABLE>

- This is the opening and closing pair to begin building a table. All the other bits that make up the table go between these two parts. The BORDER option sets the width of the lines in your table. If you want the table to be "invisible," then you will want to set the BORDER to 0. The CELLSPACING option lets you set the space between the cells in the table. The CELLPADDING option lets you set the space between the cell wall and whatever is inside the table cell, like text or an image. A more clear example of CELLSPACING and CELLPADDING can be found among the examples. The WIDTH option allows you to set the width of your table, either in pixels or in a percentage of the width of the screen. A width of 100% will be as wide as the screen, while a width of 25% will take up only ¬ of the screen.


<TR> ... </TR>

- This is one of the important tags in building a table. This tags defines one row in your table. All the other tags for that row will go between this pair, including the tag for placing columns on your table, <TD>.


<TD> ... </TD>

- This tag places one cell in a row. A cell is what your text or picture goes into on a table. Within this tag will go your text or an image tag.


- Keep in mind that you build your table by row and then by column (or number of cells across). Also, your table will have as many columns as the row with the most cells. For example, if one row has 5 cells, the whole table will be 5 columns wide.



Examples:

<TABLE BORDER=1> <TR> <TD><img src="gfx/redthing.jpg"></TD> </TR> </TABLE>
<TABLE CELLSPACING=10 BORDER=3> <TR> <TD><img src="gfx/redthing.jpg"></TD> <TD><img src="gfx/redthing.jpg"></TD> </TR> </TABLE>
<TABLE CELLPADDING=10 BORDER=3> <TR> <TD><img src="gfx/redthing.jpg"></TD> <TD><img src="gfx/redthing.jpg"></TD> </TR> <TR> <TD><img src="gfx/redthing.jpg"></TD> </TR> </TABLE>

[ Previous Section | Home | Index | Test Your HTML | Related links | Next Section ]