Site

First, you need to decide how many rows and columns you need. We'll start off with a basic one row, two column (1x2) table. Enter this HTML where you want your table to be:

The border HTML edits the width of the table borders, and the width edits how long the table is. I recommend putting it somewhere between 25% and 75%.

Step Two: Adding Columns

Next is the actual HTML that makes up the table. To put in a row, add this code:

To add a column, use this code:

The td width is how much of the row the column takes up. For example, a 25/75 table looks like this:

So, to add two columns to a one-row table, the code is:

And let's make them... 60/40:

And finally, to end your table, close up the table tag with:

And you get...

text

Step Three: Adding Rows, COLSPAN

To add a row, all you do is start a new < tr >< /tr > tag. Let's take the table from the previous step and add one under it with four columns.

However, it looks like this now:

text	text
text	text	text	text

To fix this, you need to add a special code to all of the rows that have more than the least number of rows. In our example, we have a row with two columns and one with four. So, we add "colspan=2" to the first row to show that those two columns need to strech to the four below.

Which gives us:

text		text
text	text	text	text

Step Four: Borders

Changing Border Width

Remember that first code?

That BORDER tag controls the width of the borders of the entire table. Here are some examples:

< table border="0" >

text		text
text	text	text	text

< table border="1" >

text		text
text	text	text	text

< table border="2" >

text		text
text	text	text	text

< table border="3" >

text		text
text	text	text	text

Changing Border Colors

To change the border color, add bordercolor to the opening code:

BORDERCOLOR="#FF0000"

text		text
text	text	text	text

BODRERCOLOR="#0000FF"

text		text
text	text	text	text

BORDERCOLOR="#008000"

text		text
text	text	text	text

BORDERCOLOR="#FF00FF"

text		text
text	text	text	text

Changing Light/Dark Colors

You can also change the shading on your table by replacing bordercolor with bordercolorlight and bordercolordark.

BORDERCOLORDARK="#C11B17" BORDERCOLORLIGHT="#FF0000"

text		text
text	text	text	text

BORDERCOLORDARK="#0000A0" BORDERCOLORLIGHT="#0000FF"

text		text
text	text	text	text

BORDERCOLORDARK="#254117" BORDERCOLORLIGHT="#4AA02C"

text		text
text	text	text	text

Lesson Five: Table Customization

Adding Background Color to a Table

To add a background color to an entire table, just add bgcolor to the opening table tag.

BGCOLOR="#FF0000"

text		text
text	text	text	text

Adding Background Color to a Row or Column

To add background color to a row, add bgcolor to the tr row tag you want to add color to.

text		text
text	text	text	text

To add color to a column, add bgcolor to the td column tag you want to add color to.

text		text
text	text	text	text

Cellpadding and Cellspacing

Cellpadding is the amount of space between the cell and the table wall. Cellspacing is the amount of space in between the cells.

By default, tables have low cellpadding and cellspacing. If you want to change this, add cellpadding or cellspacing to the opening code:

text		text
text	text	text	text

Conclusion

Tables are probably one of the most important things on the internet today. They're used for nearly everything; from layouts, grids, to just organizing ideas. Hopefully this guide aids you in understanding them. If you have any questions, please e-mail me.