The "M" Squad :: Basic HTML

Now you are ready to take on another BIG part of HTML! Using tables lets all of us make neater and more original designs! Many popular sites use tables to make interesting designs, and now YOU can learn some of their secrets! To learn more about the tags, click on them!

<TABLE border=0 cellpadding=0 cellspacing=0 >
<TR>
<TD valign=top width=200 height=100 bgcolor=000000 background="back01.gif">
**Text and contents go here**
</TD>
</TR>
</TABLE>

About the "TABLE" tag

This marks the beginning of the table. You MUST have at least <table> in order to start a table! You end the entire table by using </table>.

About the "TR" tag

This tag will let you start a new row of cells. You must close the first row with </TR>, and then start a new one with <TR>. For instance, if you want cells 3 and 4 to be below 1 and 2, like this:

Cell #1	Cell #2
Cell #3	Cell #4

Your HTML code might look like this:

About the "TD" tag

This tag lets you start an individual cell. Look at the sample code under the TR explanation to better see how it works. You close the cell by using </td>.

About the "border" tag

This tag lets you adjust the border of your table. You can have a fat border, a skinny border, or NO border! Put a number after "border=" to choose a size. A lot of tables have NO border (border=0) or a small border, size 1 or 2.

About the "cellpadding" tag

This tag changes the amount space around the contents of a cell WITHIN the cell. Sometimes you will want some extra space around the text in a cell, so it looks neater or easier to read. Most people use "cellpadding=5" or maybe 10 in this case. Sometimes you do not want any extra space in the cell, and in that case you should use "cellpadding=0". If you are using the top and side bordering image layout, like in PPP or Sky Senshi @ the Racetrack, you should set this to 0, so the pictures will load right next to each other as if they are one image.

About the "cellspacing" tag

This tag lets you change the amount of space BETWEEN cells. So if you want each cell to be 10 pixels apart, then choose "cellpadding=10". If you don't want ANY space between the cells, then choose 0. If you are using the top and side bordering image layout, you should also set this to 0, so the pictures will load right next to each other as if they are one.

About the "valign" tag

"valign" is short for "vertical alignment," so "valign" lets you change how contents are aligned inside the cell. For instance if you want the contents to begin at the very top of the cell, then you choose valign=top.

About the "width" tag

With this you can set how wide a cell is. You can do this either by number of pixels, or you can use a percentage, like 60% or 90%. If you use percentages, then that percent is how much of the screen width the cell will take up. It is better to go by pixels if you can, because it is more exact, and the layout will not change between other screen resolutions and browsers. Make SURE all the items in the cell are no wider than the cell width you set, or your tables may load strangely.

About the "height" tag

This lets you set how tall a cell is. You can do this the same way as you do with width, but setting it by number of pixels is better here too. Make sure that everything in the cell fits inside the height you choose, or your tables may not load correctly.

About the "bgcolor" tag

This is a lot like setting your background color in the BODY tag, except that "bgcolor" used in the TD tag sets a background color for the invididual cell. RRGGBB color is used for this too. Be careful, because if you want ALL the cells to have a background color, then you MUST use the "bgcolor" setting in every single TD cell tag! If you are using a lower version of Netscape or Internet Explorer than 3.0, then you may not see the cell background color because the browser does not support it.

About the "background" tag

Again this is a lot like setting the graphic background inside the BODY tag. "background" used with the TD tage lets the individual cell have a graphic background! This only shows up in Netscape 4.0 or higher, and Internet Explorer 3.0 or higher.

We remind you again to tell us what need to see! If you feel something was not covered here that should be here or if you feel that one of these could be explained better then E-mail us and tell us what you need!

Basic HTML :: Page Tips

Contents and designs � 1998, The "M" Squad.