The Disturbed Web Authoring Tutorials

The Disturbed Web Authoring Tutorials [ H T M L ] The Disturbed Web Authoring Tutorials

[ T u t o r i a l s ]

[ H T M L ]
[ C S S ]
[ D H T M L ]

[ T i p s ]

[ D e s i g n ]

[ M i s c ]

[ A d d L i n k ]
[ A d v e r t i s e ]
[ F e e d b a c k ]
[ C o n t a c t ]

[ H o m e ]

Lesson Eight

Tables

Tables can come in very handy when creating a web page. Whether you wish to display information (for example prices of products) or you just simply want to use them to set out your web page (like this site, notice how the text wraps before the edge of the page, this is obtained by using a table), tables are very easy to program, and also can make the difference between a good site, and a bad one.

The basic tags for a table are as follows

   <TABLE>

   <TR>
     <TD>Insert Text/Images/Anything Here</TD>
   </TR>

   </TABLE>

The <TABLE> and </TABLE> tags are pretty obvious. The <TR> and </TR> are the tags to create a row. The <TD> and </TD> are the tags to create a cell in the table. The <TABLE> tag has many specific things that can be placed with it. For example, to make the table have a border, the <TABLE> tag at the top of the last example would be replaced with <TABLE border=1>. To make the border even thicker, your could have <TABLE border=2>. If you want a really thick border you could have <TABLE border=100>. Here is an example of what the above code would look like if the border were set to 3.

Insert Text/Images/Anything Here

Notice how there is only one table cell. That is because there is only one set of <TD></TD> tags. To create another cell, all you have to do is insert another set of <TD></TD> tags. For example if we used the code

   <TABLE border=3>

   <TR>
     <TD>Insert Text/Images/Anything Here</TD>
     <TD>This is a second cell</TD>
   </TR>

   </TABLE>

This would look like

Insert Text/Images/Anything Here

This is a second cell

There is a problem with this though. When you look at the tables, the text is too close to the border. This can make it incredibly hard to read. To get rid of this problem, there is another snippit of code that you can add to the table tag, just like the border one, to change the specs of the table. It is called cell padding, and is inserted into the <TABLE> tag like so.

<TABLE border=3 cellpadding=6>

Adding this snippit of code makes the above table look like this

Insert Text/Images/Anything Here

This is a second cell

The number which comes after the cellpadding is equal to is the number of pixels there is between the border of the table, and the text. This can come in very handy when trying to make tables more pleasing to the eye. Yet another snippit of code that can come in handy is width. This defines the width of the table. It can either be in pixels, or can be in percent of the width of the screen. This site takes advantage of this code. The table that this text is in (notice there is no border, but there is a table, trust me) is exactly 594 pixels wide, so it will look the same whether you are viewing it on a computer with a screen resolution of 600x400, 640,480, 800x600, or even higher. You simply type it in just like the other snippits of code i have shown you

<TABLE border=3 cellpadding=6 width=50%>

The width of the table would now be 50% of the page. Pretty nifty huh??

That is all the detail that we are going to go into concerning tables. There are infinite combinations of the row, and cell tags, so you can create a table exactly how you want it to look. Whether you want 1000 cells in one row, or 1000 rows with one cell each, anything can be done. Just remember that the <TR></TR> and <TD></TD> tags must fall between the <TABLE></TABLE> tags.

Last modified Thursday 27 January 2000