USNJB

Tables

Tables are used to format data in neat rows and columns. It can appear as grids or it can remain invisible. A table has some basic tags such as <TABLE>, <TR>, and <TD>. Let's start off with a simple table with a border. The alignment will be centered.

Here's the code:
Here are the results:

Here is a very simple table	This is a cell.
This is another cell.	And another.

Here are some attributes of tables

Inside the <TABLE> tag:

align: Like any other tag, align places the table left, right, or center with values "left", "right", or "center"
width: The width of a table can be defined in pixels or as a percentage of the size of its container. If you have a simple table on a page with a width of 50%, then it's width will be half of the browser's width. If the table is inside a layer for example, then it will be half the width of that layer. Same goes for a table nested inside another table. If you set it in pixels, then its width will be fixed no matter what. Although, it can become wider if the cells require it to be, but not less.
height: The height of a table can be defined in pixels or as a percentage of the size of its container. If you have a simple table on a page with a height of 50%, then it's height will be half of the browser's height. If the table is inside a layer for example, then it will be half the width of that layer. Same goes for a table nested inside another table. If you set it in pixels, then its height will be fixed no matter what. Although, it can become higher if the cells require it to be, but not less.
cols: This tells the browser how many columns are included in the table.
frame: Frame works along with border and determines where a frame surrounding the table should appear. You can have borders above, below, hsides (horizontal), lhs (left-hand side), rhs (right-hand side), vsides (vertical sides), box (all sides), void (none). This feature is rarely used.
border: This shows a border around the table and all it cells. You can set any value. "1" would show a border with a thickness of one pixel. "2" would show a border with a thickness of two pixels. "0" would produce a border of zero thickness; it would now show a border at all.
rules: The rules attribute determines where lines are used to separate cells within the table itself. You can have "groups", "rows", "cols", "all", and "none".
cellspacing: This sets distance beween each cell in pixels. The size of each cell remains the same. The size of the table as a whole gets larger or smaller.
cellpadding: This sets distance between cell walls and it's contents in pixels. The size of each cell changes. The size of the table as a whole gets larger or smaller. The distance between each cell remains the same.
background: Sets background for entire table. It's typically ".jpg" or ".gif"
bgcolor: Sets background color. For example: bgcolor="red" or bgcolor="#ff0000". The Hexadecimal values are broken into three colors, Red, Green, and Blue, two digits each. Green would be "#00ff00", blue would "#0000ff". Each of the three colors range from 00 to ff. You count hexadecimal like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f. This setting is overridden by background attribute.
bordercolor: This works the same way to set the table's border color. This may not work with all browsers.
bordercolorlight: This sets the color for the upper and left borders. This may not work with all browsers.
bordercolordark: This sets the color for the lower and right borders. This may not work with all browsers.

The following is an example of a table with common attributes.
Here's the code:
Here are the results:

cell 1, col 1, row 1	cell 2, col 2, row 1	cell 3, col 3, row 1
cell 4, col 1, row 2	cell 5, col 2, row 2	cell 6, col 3, row 2
cell 7, col 1, row 3	cell 8, col 2, row 3	cell 9, col 3, row 3
cell 10, col 1, row 4	cell 11, col 2, row 4	cell 12, col 3, row 4

<TR> tag attributes include align, background, bgcolor, and height. You can align contents inside each cell across current row left, right, and center. You can set background, bgcolor, and height for current row. These work the same way as with the <TABLE> tag.

Here's the code:
Here are the results:

COLOR is Red, ALIGN is right

COLOR is Green, ALIGN is center

COLOR is Blue, ALIGN is left

<TD> tag attributes include align, background, bgcolor, width, and height. You can align contents inside current cell left, right, and center. You can set background, bgcolor, width and height for current cell. These work the same way as with the <TABLE> and <TR> tag.

colspan: This determines current cell's capability to merge with cell(s) to it's right. If you have three columns and the first cell has a colspan of "2", then you will see the first two cells as one large cell twice as big as the third one.
rowspan: This determines current cell's capability to merge with cell(s) below it. If you have three rows and the first cell has a rowspan of "2", then you will see the first two cells (counting down) as one large cell twice as big as the lower-most one.
nowrap: With this attribute, long text or array of images will not wrap at the end (near cell wall) if there is not enough space. Instead it forces the cell to grow wider [and possibly higher].

The attributes align, background, bgcolor, width, and height work as they do in table and tr.

In the following example you have a table with 4 columns and 3 rows. The first cell's colspan attribute is given a value of "2". You will notice that there are only three TD sets. The last two rows have four TD sets. This is because the first cell takes two cell spaces, so you remove one (or just add one less).

Here's the code for colspan:
Here are the results:

cell 1 and cell 2		cell 3	cell 4
other cell	other cell	other cell	other cell
other cell	other cell	other cell	other cell

Here's the code for rowspan:

Here are the results:

cell 1 and cell 5	cell 2	cell 3	cell 4
cell 1 and cell 5	cell 6	cell 7	cell 8
cell 9	cell 10	cell 11	cell 12

You can use any combination of rowspan and colspan you like.