Starting On HTML
For the Newbie (Newbee)




Here is a basic stepping stone to understand HTML tables. This will get you started on arranging more content on your pages. This tutorial is basic and cross browser compatible.
The tutorial for how your site works is here. The Newbie HTML Tutorial is here. ~Bee Spit~

TABLE USE

• Tables allow you to control content and make it consistent.
• Tables can be used to arrange graphics and text on a page.
• Keep track of large lists with categories.
• Use for navigation links.
• You can copy and paste a common table from page to page.
• Tables allow you to use different backgrounds and colors throughout the page.

INSTANT TABLE

This is a basic table.   <TABLE BORDER=2>   <TR>   <TD> Cell 1 </TD>   <TD> Cell 2 </TD>   </TR>   </TABLE>

PRODUCES -- >

Cell 1 Cell 2

TABLE TAGS

TAG SETS	WHAT THEY DO	EXAMPLE
<TABLE>	Starts the table	See Instant Table Above
</TABLE>	Ends the table
<TR>	Starts a new row
</TR>	Ends a row
<TD>	Starts the data to fill a cell(content area) of the table
</TD>	Ends the data used in one cell( content area)of the table
Variables used in TABLE TAG ( Optional )	WHAT THEY DO	EXAMPLE
bgcolor="#0000FF"	Sets the background color of the table See Hex Code Chart for color list #0000FF is blue	<table width=50% celspacing=4 cellpadding=4 border=4 background="teal.jpg" align=center> <tr> <td>This is a centered one cell table with a background at 65% width of surroundings, 4 pixel border, 4 pixel cellspacing and 4 pixel cellpadding</td> </tr> </table> This is a centered one cell table with a background at 65% width of surroundings, 4 pixel border, 4 pixel cellspacing and 4 pixel cellpadding <table width=65% border=0 cellspacing=0 cellpadding=0 bgcolor="#ffff00" align=center> <tr> <td> This is a one cell table at 65% width of surroundings, with bgcolor, no border, no cellspacing and no cellpadding</td> </tr> </table></TD> This is a one cell table at 65% width of surroundings, with bgcolor, no border, no cellspacing and no cellpadding
width=N height=N	Sets the width and/or height of the table Height can be left out (preferred) Height will default to table contents size Width and height can be expressed as a number(for pixels) or a percentage to self adjust to browser/screen resolution
border=N	Sets a border around entire table 0 (zero)is no border N is any number border color not available for Netscape 4.x and lower
cellspacing=N	Sets the space between the outside edge of table and the cells inside N is any number
cellpadding=N	Sets the space between the outside of each cell and the content inside N is any number
align=left align=center align=right	Sets the positioning of the entire table on the page Use which one you need to position Will default to left if not specified
background="image.extension"	Sets a background in the table Contents of each cell will be placed over the background Image will tile like page background Or you can set table width and height to image size If not wanted to show under certain cells, use bgcolor or background commands per individual cell. (See below)
Variables used in TD TAG ( Optional )	WHAT THEY DO	EXAMPLE
width=N height=N	Sets the width and/or height of the cell Height can be left out (preferred) Height will default to cell contents size Width and height can be expressed as a number(for pixels) or a percentage to self adjust to cell contents	<table width="78%" cellspacing="2" cellpadding="2" border="2"> <tr><td colspan=2>colspan</td> <td bgcolor="#FCC587" >bgcolor <br> <img src="partlycloudy.gif" width="32" height="32"> </td></tr> <tr> <td align="right">right</td> <td valign=to>top</td> <td rowspan=3>rowspan</td> </tr> <tr> <td align="left">left</td> <td valign=middle>middle</td> </tr> <tr> <td align="center">center</td><td valign=bottom>bottom</td> </tr> </table> colspan   bgcolor   right   top   rowspan left   middle center   bottom
rowspan=N	Sets one cell to cover the number of rows specified
collspan=N	Sets one cell to cover the number of columns specified
align=left align=center align=right	Sets the positioning of content within the cell on a horizontal cue Use which one you need to position Will default to left if not specified
valign=top valign=middle valign=bottom	Sets the positioning of content within the cell on a vertical cue Use which one you need to position Will default to middle if not specified
bgcolor="#0000FF"	Sets the background color of the individual cell See Hex Code Chart for color list #0000FF is blue
background="image.extension"	Sets a background in the cell Contents of each cell will be placed over the background Image will tile like page background Or you can set cell width and height to image size

Back to first HTML Tutorial

NEXT LESSON - COMMING SOON

Crosswinds and Other Helpful Links

• Starting a Website
• Helpful Website Links
• CW CADRE
• Jim's Help Links
• Best HTML tutorial (my opinion)
• Good listing of freeware HTML Editors
• Crosswinds Faqs
• Crosswinds Terms of Service
• Updates Page

Please let me know if this is understandable or what else to include. Thank You.
Bee Mail Me
Tutorial © Janet Boyd aka Bee Spit
Bee's Home Page