More Than HTML:
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.
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:
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
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.
CELLPADDING=[pixels].This determines the margin inside the cells.
<TABLE CELLSPACING=5CELLPADDING=8>. This will give a margin of 5 pixels outside each cell and a margin of 8 pixels inside each cell.
BORDER=[pixels].This will give the table a border in pixel width.
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:
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.
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.
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.
Here's the table:
This will put a background color in your table, row, or cell
Here's the table:
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.