Once you learn the fundamentals on how to make spreadsheet like tables, you can use that same technique to make any other kind of tables.

The purpose of a table determines how elaborate the table must become. Tables can be nested, which means that they can reside inside other tables. therefore, a single cell may contain an entire table, and one of the inside table cells may contain yet another table.

Never put more then 2 levels of tables in your page of the table will load very slowly. Nested tables take longer to load and some browsers do not show multiple nested tables correctly.

You cannot type text in HTML as rows and columns using tabs or spaces because browsers ignore all the extra spaces and tabs in the HTML.

All tables begin with a < table > command tag and end with a < / table > command tag. Within the table you will specify rows with the < tr > for table row, ands columns < td > table data. tags. you may also create header cells that hold titles for the columns.

NOTE: when you design and create tables keep following the order top to bottom, left to right. you will create tables one row at a time from the top to the bottom of the table and add individual cells or columns one at a time in those rows from the left to the right.

The best way to start a table in HTML is to type your data first in the order in which you want it.

Example:

< table >

Title
Genre
Author

Ender's Game
Science Fiction
O. S. Card

The Hobbit
Fantasy
J.R.R. Tolkein

< / table >

The first three items are the table's column titles, called header cells. Use the tag < th > < / th > to specify that they are table headers. Now you must divide the information up using tags to make it a table.

< table border=1 >
< tr >
< td >Title< / td >
< td >Genre< / td >
< td >Author< / td >
< / tr >

< tr >
Ender's Game
Science Fiction
O.S. Card
< / tr >

< tr >
The Hobbit
Fantasy
J.R.R. Tolkien
< / tr >

< / table>

Ender's Game Science Fiction O.S. Card The Hobbit Fantasy J.R.R. Tolkien

Title	Genre	Author

The table needs work. Use the < td > tag before each set of information and end it with a matching < / td >.

< table border=1 >
< tr >
< td >Title< / td >
< td >Genre< / td >
< td >Author< / td >
< / tr >

< tr >
< td >Ender's Game< / td >
< td >Science Fiction< / td >
< td >O.S. Card< / td >
< / tr >

< tr >
< td >The Hobbit< / td >
< td >Fantasy< / td >
< td >J.R.R. Tolkien< / td >
< / tr >

< / table>

Title	Genre	Author
Ender's Game	Science Fiction	O.S. Card
The Hobbit	Fantasy	J.R.R. Tolkien

Now your table is complete and the information has both rows and columns.

The structure is in place, so now you can improve the look. To add or remove lines around and in between the table information use the border= attribute after the beginning of the table.

The tag is used to add a caption above the table. This isn't used often, but can be useful.

Example usage:

< table border=1 >
< caption >My Classes< / caption >

Attributes which may be used in the < table > tag are:

The < tr > tags must be used within the < table > tags and they accept the attributes of:

The < td > tags must be contained within the < tr > tags and they accept the attributes of:

NOTE:All of the information to be displayed within the table must be contained within the < td > tags.

To align the data use the align= attribute in each cell, you can align them center, left, right, use the valign= attribute to align the data to the top or bottom of the cell.

Each cell in each row does not have to conform to the width or height of each cell in the other rows. the uniqueness of the cells is what allows HTML tables to make complex web design.

The other way to make a table title is to place the title in the first cell of the first row and the span or lengthen that cell to take up the entire width of the table. To do this use < colspan= >, and to span across rows, < rowspan= >

Example:

< table align=center border=1 >
< tr >
< th align=center colspan=6 >Schedule< / th >
< / tr >


< th >Time< / th >
< th >Monday< / th >
< th >Tuesday< / th >
< th >Wednesday< / th >
< th >Thursday< / th >
< th >Friday< / td >

< tr >
< td>11:30< / td >
< td bgcolor=> < / td >
< td bgcolor=> < / td >
< td bgcolor=> < / td >
< td bgcolor=> < / td >
< td > < / td >
< / tr >
< / table >

Schedule
Time	Monday	Tuesday	Wednesday	Thursday	Friday
11:30
12:30

To add color to the background or a table, use the bgcolor=attribute. You can specify data cell colors as well as the entire table's color depending where you use the attribute.

< table bgcolor=ffffff >
or
< td bgcolor=bbbbbb >Hello!< / td >

Two attributes, cellpadding= and cellspacing= enable you some room around your cell's text that is greater then the default one pixel. The cellpadding= attribute increasers the size of the space between the cells. The inner lines that divide the cells increase in width as you increase the cellspacing= attribute value.

width=attribute allows you to determine exactly how much of the page your table will consume no matter how wide the user's window. you can specify a width percentage of the page or actually pixel size.

NOTE: never specify a table with greater than 550 pixels. User's with small displays will not be able to see a wider table.

Tables are simple to create, but can look complicated. You can have 2 tables inside of each other. When a talbe is inside another, the inner table is called a nested table

There is one table with two cells and a table inside each of theses cells making better layout.

Look at the source for this table:

Monday/Wednesday Friday 9h Chemistry Chemistry 10h Convocation Convocation 11h     12h20 History History 13h10   Chemistry Lab 14h20 Tutoring? Chemistry Lab 15h20   Tutoring

Tuesday/Thursday 12h15 Theology 13h40 Vocal Technique 14h55   16h Orchestra 17h

Practicing with tables will help your page layout and your ability to understand tables well.