The basic tags you need in order to set up a table are:

<TABLE> is the opening tag to define a table element in a page.
<TR.....>: means table row 1.
<TD...>: means cell 1, in row 1. You close the cell formatting with </TD>
<TD...>: means cell 2, in row 1. Again you close the cell formatting with </TD>
</TR>: is the end tag indicating the end of row 1.
<TR...>: means the start of row 2.
<TD...>: means cell 1, in row 2. You close the cell formatting with </TD>
<TD...>: means cell 2, in row 2. You close the cell, as above.
</TR>: is the end tag indicating the end of row 2.
However many extra "TR's" and "TD's" you need!
</TABLE>

• BORDER="X": Goes in the <TABLE> element. It will give each cell a border around it of a pixel width "=x" you define.
• ALIGN="....": Goes in any of the elements and tells the browser to align the contents of, e.g. a row or a cell (depending on which element you put this attribute in). The variables: "left" (default), "center" or "right" (you can also use "middle" which will do the same as "center") can be entered, whichever you want to align the contents the way you wish!
• VALIGN="top": Exactly the same as above, except it vertically aligns the contents of the row or cell, so the variables are: "top", "bottom" and "middle" ("center" does work, but "middle" is correct).
• WIDTH="x" and HEIGHT="x": You normally set up WIDTH and HEIGHT values in the <TABLE> element (i.e. to give the overall size of the table). Then you would use these, e.g. to give your row height in the <TR element, or cell height in the <TD element. You can do practically anything with these. If you have an image, you use these attributes in the <IMG element instead of the cell or row elements.
• COLSPAN="X": Goes in the <TD> element and is used where you don't want the cell to fit the grid format of the rest of cells in the table, e.g. the code: <TD COLSPAN="2"... will widen this cell so that it takes up the adjacent cell as well - i.e. two neighbouring cells combined into one!
• ROWSPAN="X"...: Exactly the same idea as the above, but referring to rows rather than neighbouring cells. The code: <TD ROWSPAN="2".. will make the cell taller so it takes up the lower cell (as opposed to the one next to it), again combining two cells, a lower one and an upper one, into one cell.
• NOWRAP: This has no variable associated with it and just gets inserted into a cell or a row element to keep text all on one line and prevent it thus from wrapping.
• BGCOLOR="#xxxxxx": Uses the hexdec. colour system (see appendix for colour chart) as we have discussed earlier in this. You can put a colour code in the <TABLE.. element which will give you the overall background colour for the entire table (and will also colour padding and borders that colour too). You can put a colour code in the <TR.. or the <TD.. elements for just the row or cell to be coloured. Again, it is all down to experimentation, and you can really play around with these (as my example table shows you I have!) and make your table look quite 3D! But to get the latter effect, you need to use, and experiment with the two attributes shown below. There are two additional colour attributes: BORDERCOLORDARK="..." and BORDERCOLORLIGHT="..." and you can experiment with these (they go in the TABLE element) to make your table even more "3D" but you have to have a BORDER="x" value greater than zero for these to work.
• CELLPADDING=&Quot;x"..: Goes in the <TABLE.. element and specifies the amounts of space between the edges of the cell and the thing you've put in it!
• CELLSPACING="x"..: Easily confused with the above, it too goes in the <TABLE.. element, but it specifies the amount of space that actually divides the cells. You really need to play with them to get the feel of what they do (using background colours will help you see what they do more easily).

The best thing you can do is experiment with all this, perhaps using the table I have set up below in which I have made use of all the things a table can do, and all its attributes, as comprehensively as possible!

Click the above to enlarge this thumbnail	Couldn't think what to stuff in here!
This is getting to be a pretty nifty table!

The best thing to do with tables is just to get stuck right in there! If I were you, I would set up a basic HTM page in Notepad (or other text editor) and just have a play around having printed off this page first! Though first, you need to formulate a plan (on paper!) as to how you want your table to look, and what you want in the cells. Then you just code this up as per your plan. It will take you a while to get the hang of it, but once you do, there's no lookin' back, man!

As you learn, an additional thing you will pick up along with knowledge is that you will begin to develop a neat WYSIWYG (What You See Is What You Get) editor in your head! What I mean by this is that you will then be able to "visualise" what the result of your coding will be, without having to keep loading your htm source file into a browser continually, in order to see the effect your coding has had! Not only does this save time, but when you develop that ability, you will know for sure that you have become a "proper" HTML propellerhead! Good luck, and have fun!

COPYRIGHT INFORMATION: All Rights Reserved. No part of this HTML tutorial may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior permission of the copyright owner, Didi Austin, who may be contacted using the link below.