Make your own free website on Tripod.com


Getting Started
Editors
Design Tips
Home



HTML:

The Basics
Adding Color
Adding Images
Backgrounds
Links
Text Format
Page Format
>>Tables
Frames
Forms



More Than HTML:

Audio
Meta Tags
JavaScript
Cut & Paste JScripts
Style Sheets
IE with Style
IE Form Colors
MS Trans. Effects
Special Character Set



Help Desk:
Quick Reference


Free Stuff:

Graphic Designs
Fonts
Midis


 

 

Tables

New addition: HTML 4.0 Tables.

The first thing you need to understandin order to work with tables is "columns" and "rows". Columns are vertical, rows are horizonal. "Cells" are the intersection of the columns and rows. Every table must have at least one row and one column.

Example:

Row 1, Column A, Cell 1A Row 1, Column B, Cell 1B Row 1, Column C, Cell 1C
Row 2, Column A, Cell 2A Row 2, Column B, Cell 2B Row 2, Column C, Cell 2C

The best way to begin creating tables is to decide how many columns and rows you are going to need. For instance, if yo uneed a table with 2 columns and 3 rows, you would begin by formatting the table:

<TABLE>
<TR>
<TD>Cell 1A</TD>
<TD>Cell 1B</TD>
</TR>
<TR>
<TD>Cell 2A</TD>
<TD>Cell 2B</TD>
</TR>
<TR>
<TD>Cell 3A</TD>
<TD>Cell 3B</TD>
</TABLE>

Once you have the table formatted, then you enter the text or grahics between the <TD> </TD> container. I've found this method to be the easiest way to create tables for formatting a page, it prevents a lot of confusion, especially if you are wanting to create a table inside a table cell as I have done on this page. But beware, too many tables inside a single cell will cause some unwanted effets!

Now lets take a look at the code:

The <TABLE> tells the browser thatit is reading a table. The <TR> begines the first row. The <TD> </TD>container begins and ends the first column and forms cell 1A. This is repeated for the next column which forms cell 1B. And the </TR> ends the first row. This is repeated for the second and third rows. The containers to the best of my knowledge stands for:

<TR> - Table row
<TD> - Table Definition

Note:I have assigned a border of 1 to each of the tables shown below to show how the table looks in the format specified.


You may format the alignment, size, border width, margins inside the cells, space between the cells, and the background color of the table. The combinations of these formatting features will enable you to arrange your text and graphics to suit your needs. These codes are fairly simple:

CELLSPACING=[pixels]. This determines the margin outside the cells, it is placed inside the <TABLE> tag.

Example:

<TABLE CELLSPACING=5>
This will give the table a margin of 5 pixels between ever cell.

Cell 1A Cell 1B
Cell 2A Cell 2B

CELLPADDING=[pixels].This determines the margin inside the cells.

Example:

<TABLE CELLSPACING=5CELLPADDING=8>. This will give a margin of 5 pixels outside each cell and a margin of 8 pixels inside each cell.

Cell 1A Cell 1B
Cell 2A Cell 2B

BORDER=[pixels].This will give the table a border in pixel width.

Example:

<TABLE BORDER=3>

This will give the table a border of 3 pixels as in the table below. You may set the value to 0 in order to make your table invisible:

Cell 1A Cell 1B
Cell 2A Cell 2B

ALIGN=[left|right|center]. This can be used inside the TABLE, TR, or TD tag. According to what format you are wanting. If you want the entire table to be centered you would place it in the TABLE tag. If you want an entire row to be aligned you would use it in the TR tag. And if you only want one cell to be aligned you would use it in the TD tag.

Example:
<TABLE ALIGN=CENTER>- Center the entire table.
<TR ALIGN=RIGHT>- Aligns the text in the row to the right.
<TD ALIGN=CENTER>- Centers the text in the cell only.

Cell 1A
Aligned Center
Cell 1B
Aligned Right
Cell 2A
Row Aligned Center
Cell 2B
Aligned Left


VALIGN=[top|bottom|center]. Used with the TD and TR tags only. This will align the text vertically.The default vertical alignment of most browsers is center.

Example:

Cell 1A
Row V-aligned "top">
Cell 1B
Cell 2A
Row V-aligned "bottom"
Cell 2B
Cell 3A
Cell V-aligned "top"
Cell 3B
V-aligned "bottom">

WIDTH=[pixels|percent]. Used with TABLE and TD tags. This will determine the size of your table when used with the TABLE tag and determine the size of the column when used with the TD tag. You can specify either pixel width or percent of screen or parent table. If you specify a column width, all of the cells in that column will be the width you specify.

Example:
<TABLE WIDTH="90%">
<TR>
<TD WIDTH=20>Cell 1A</TD>
<TD>Cell 1B </TD>
</TR>
</TABLE>

Here's the table:

Cell 1A Cell 1B

BGCOLOR="#","COLOR"

This will put a background color in your table, row, or cell

Example:
<TABLE BORDER=1BGCOLOR="#00FF00" BORDERCOLOR="#FFCCFF" WIDTH="85%" CELLPADDING=10>
<TR BGCOLOR="#FFFFCC">
<TD>Cell 1A</TD>
<TD>Cell 1B</TD>
</TR>
<TR>
<TD BGCOLOR="#99CCCC">Cell 2A</TD>
<TD>Cell 2B</TD>
</TR>
</TABLE>

Here's the table:

Cell 1A Cell 1B
Cell 2A Cell 2B

Hey did you notice the new code? BORDERCOLOR="#RRGGBB|color".This gives the border of your table a color. Of course, you can only use it when you have a border on your table. If you set your border to 0, the color will not show.


And finally, a background image for your table.

<TABLE BACKGROUND="image.gif">

or

<TD BACKGROUND="image.gif">


Copyright © 2000- 2001 S&W Concepts