![Wildfire Home Image [4k]](../utility/home2.gif){kind=small}
| ~Wildfire: > Articles > HTML Tables (June 29th 1999) | |
| ~Look at: | Articles | FAQs | Resources | Reference | | |
|
Tables are used a lot on the web for advanced page formatting. It is quite a hard subject to teach. This article aims to get you familiar with constructing basic tables by giving you all the information you need. To create great page layouts using tables takes a lot of practice to get it right. Follow through this article and start using tables as much as you can. The more you use them for basic formatting of page elements the easier it will become to construct page layouts quickly in your head, and then onto the page. Contents
The Three Basic TagsThere are three basic tags to construct tables. I'll deal with them all here, and their various attributes later on in the article. The first tag that you need to construct a table is the <TABLE> tag. This tells the browser that in between the two table tags there will be table rows and cells which require special formatting:
<TABLE>
… table rows and cells in here … </TABLE> You then need to create rows. This is done using the <TR> (table row) tag. Everything in-between the <TR> tags is contained in one row (generally speaking, more later…). Inside the <TR> tags you want to define the table cells, or bits of data you want in that row. This is done using the <TD> (table data) tag. Everything in between each <TD> tag is contained in that table cell. In the example below we can see a simple table with two rows, each with two cells in them:
<TABLE>
<TR> <TD>Top, Left</TD> <TD>Top, Right</TD> </TR> <TR> <TD>Bottom, Left</TD> <TD>Bottom, Right</TD> </TR> </TABLE> I have labelled the cells according to their position in the table. You can create large tables using the method above. Now you should practice making simple tables in your editor and taking a look at how they appear. The rest of the article will go into the various (and many) attributes each of the three basic tags can hold. BordersA table can have a border which shows up around the outside of the table and all the cells. The border is affected by the 'BORDER' attribute of the <TABLE>. This is set to a size value:
<TABLE BORDER="3">
The table border is normally a lighter color of the background color. You can control the color of the border though by using the BORDERCOLOR attribute of the table. This will make the table border into solid lines of the color you choose (either as a hex value or a color name). Borders though in most browsers have a 3D look to them. You can control the color of the light and dark portions of the table border by using the BORDERCOLORLIGHT and BORDERCOLORDARK attributes of the table:
<TABLE BORDERCOLORLIGHT="#00FF00" BORDERCOLORDARK="#FF0000">
Internet Explorer supports the BORDER attribute of the <TD> tags as well allowing you to change the specific border color around a single cell. Spacing and Padding, Height and WidthTables have height and width properties in both the <TABLE> and <TD> tags which allows you to define a specific layout of your cells. These are just put in as attributes of the tags. As well as specific values such as 150 etc. they can also be a percentage. For <TABLE> tags this is the percentage of space the window, frame, or table they are contained within allows them, for <TD> tags this is a percentage of the width of the table they are in. There are two other attributes of a table which affect the layout. These are the CELLPADDING and the CELLSPACING attributes. The CELLPADDING attribute affects the 'padding' given to elements inside a cell. This means that there will be a gap between the edge of the cell and any elements contained within the cell of the amount specified in the CELLLPADDING attribute of the table. The CELLSPACING attribute is the amount of space between table cells. You should experiment altering them both and see what effects you get in your browser. Remember though the effect is slightly different in every browser, but the general layout should be roughly the same. BackgroundsTables support background colors, and some browsers support background images. If you treat the <TABLE> and each <TD> cell like the <BODY> with the 'BGCOLOR' and 'BACKGROUND' attributes then you will be able to change the colors, and images in the background of your table cells:
<TD BGCOLOR="red"> </TD>
<TD BGCOLOR="green"></TD> AlignmentThere are several alignments that you can perform on a table. You can align the table on the page, this means that any other HTML elements wrap around it. You perform these alignments using the 'ALIGN' attribute of the <TABLE> tag. This can take the values "left", "right" or "center". You can also align the contents of a specific cell in two ways. Vertically and horizontally. You do this by using the ALIGN and VALIGN attributes of the <TD> tags. This applies the affect to one single cell. If you want the whole row to be aligned in that way then you put these attributes in the <TR> tag. The ALIGN attribute can take the same values as above. The VALIGN attribute can take the values of "top", "center" or "bottom". Column and Row SpanningYou may want a table cell to span several rows or columns. This is fairly easy to do, but you need to get clear in your head how to place them correctly. The spanning is determined by the COLSPAN and ROWSPAN attributes of each <TD> tag. If a cell spans multiple columns then you leave out the <TD> tags for the cells in that row that the cell will go over:
<TR>
<TD>1st</TD> <TD>2nd</TD> <TD>3rd</TD> </TR> <TR> <TD COLSPAN="2">1st</TD> <TD>2nd (in third place)</TD> </TR> The second cell in the second row would be under the third cell in the row above, because the first cell in that row spans the place of two cells, or columns. The same goes for spanning multiple rows. You leave out the cell under where the top cell will span over:
<TR>
<TD ROWSPAN="2">1st</TD> <TD>2nd</TD> </TR> <TR> <TD>2nd</TD> </TR> You can see that the top cell takes up the first place in the row below. Again: Practice makes perfect, creating good tables comes with time and experience. AdviceYou should practice making tables a lot. It can be really beneficial to your web design if you are good at working out how to align and place tables correctly. You should be able, after a while, to visualise the code in your head for a layout for a special page you come across. Practice makes perfect. HTML TUTORIAL: [last article]; Previous Article - Images in HTML
|
|||
| Top of Page | |
| ~Look at: | Articles | FAQs | Resources | Reference | | |
| ©
Jamie McHale 1998 - 2000 -
http://www.btinternet.com/~wildfire/
|