JCL's Tutorial On HTML Tables

Creating Tables

Which is the real table? They both are. One uses a table border and table cell color while the other one uses no border and no color. Nevertheless, they are both tables which can be used for different functions. The one with color can be used to be a professional way to enclose data while the one without can be used for things such as sideline backgrounds where you have a sideline image and want to keep the text separated into two columns. Below is a listing of the commands used for tables and an explination of what they do.

<table border = n cellspacing = n cellpadding=n bgcolor = color align = align width = n height = n>

The only part required in this command to make the table is <table>, the rest are optional. Border = n creates a border of n for your table. The greater n is, the bigger the border of the table. Cellspacing = n tells the computer to create a border of n between cells. Again, the greater n is, the greater the border. Cellpading = n tells the computer to create a space of n surrounding the item in each table cell. Like the other two commads, greater means bigger. I didn't switch the thing cellpadding and cellspacing do. It sounds like cellspacing would adjust the spacing in the cell and cellpadding would adjust the cell border size, but that's not the case. Bgcolor = color tells the computer to make the standard background color, color for each cell in the table. Change color to the color you want. Align = align tells the computer the area the table should be placed in. Replace the align in italics with either left, center, or right. This is used to put two tables on one line or wrap text around the table. If you want to wrap something around the table, just type in align = left in the <table> tag. If you do that and place </table> at the end of the table, the items proceeding will automatically start wrapping around the table. Just remember that if you want to stop wrapping around the table, the command to do it is <br clear = left>. Width = n tells the computer the width of the table while height = n tells the height of the table.

<td align = align bgcolor = color colspan = n rowspan = n width = n height = n>

The only part required in this command to make the table cell is <td>, the rest are optional. Td creates a new table cell next to the previous cell unless <tr> is used or if it is the first cell. Td stands for table data. Align = align tells the computer the area the text should appear in the particular cell. Replace the align in italics with either left, center, or right. Bgcolor = color tells the computer to make a color background for the cell. Change color to a color. If bgcolor is not defined in the <td> of the cells in that row, all the cells in that row will have the background color specified in the first <td> of that row. Colspan = n tells the computer to make the specified cell go across n columns. This command will therefore create bigger cells horizontally. Replace n with a number. Rowspan = n tells the computer to make the specified cell go across n rows. This command will therefore create bigger cells vertically. Again, replace n with a number. It is important to remember that every time you create a new td, the size and color of the text are default (standard), not the color or size of the text that you used in the cell before, unless specified. Width = n tells the computer the width of the table cell while height = n tells the height of the table cell.

<tr>

The tr command creates a new row in the table. Tr stands for table row. If you use the <td> command after the <tr> tag, the table cell will be placed on the next line under the first table cell of the row above.

</table>

The </table> command is required at the end of the table data to end the table.

Jason's HTML & JavaScript Tutorial
E-Mail Me