Tables

Using Tables is an easy way to keep your information aligned on the page.

I have read any number of tutorials on tables & found most of them very confusing so forgive me if this is written too simple but i think it is necessary to understand how tables are constructed.

A simple Table

The code for this table is;

1/ <table starts the table command, the overall size of the table is 200 pixels, cell spacing is the distance between the 2 cells "1pixel", Cell padding is the area around the text before the border, border is the width of the outside line "8 pixels"

2/ "<tbody>" tags define what is included within the table

3/ "<tr>" = Table Row everything between the "<tr>" & "</tr>"will be on the same row.

4/ "<td>" = Table Data - information contained within the table, in this example there is 1 row & 2 table data's this gives 2 boxes (cells).

5/ Valign="top" table data is justified to the upper border, align="left" table data is justified to the left of the cell.

6/ width="150" this sets this cell to 150 pixels as the overall table is 200 pixels then the other cell will automatically be set to 50 pixels. This can also be done using a percentage value 75% leaving 25% for the other cell.

7/ "<tr>", "</tbody>", "</table>" end of row, end of tables body, end of table.

Copy the above code to your html editor put it in source not designer & play around with the values to see how they effect the overall look.

Download Free HTML editor - NVU Web Design Editor 

OK so those are the basics of a table, please follow my advice & understand the above before continuing - Try adding a third cell

Advanced Tables

 I think this table should be advanced enough for now, It may look complicated but it breaks down into easily understood sections.

The opening is the same as before;

 The full table consists of 6 Columns & 4 Rows & the code is written row by row.

1st Row has 2 cells each cell spans 2 columns so is written like this;

 The only difference from the 1st table is the introduction of colspan="2" because each cell spans 2 columns.

The 2nd row has all 4 columns, so is written the same as in the first table but with 4 Table Data's - 's

 The third row is a little different it has 3 cells so will have 3 's however the second cell spans 2 columns so will have a colspan="2" plus it spans 2 rows so it will also have a rowspan="2" - this is the full code..

 Here's the catch The fourth row is now only"2" cells not "3" Because the center cell on the previous row spanned 2 rows it is not included in this row. That means only 2 <td>'s

 Now its easy again the fifth row has all 4 cells so has 4 <td>'s

 Finally the last row has 1 cell that spans all 4 columns so it only has 1 <td> but also has a colspan="4"

 That's it other than the closing statements </tbody>&</table>

Hopefully you get the idea now, work in rows & columns each row starts with <tr> & ends with </tr> Columns are made up of cells <td>cell</td>

Good luck with your table building

 

Bookmark this page

Google Bookmarks Delicious Yahoo My Web Digg Facebook