Post by Skyrocket on Mar 30, 2006 14:21:56 GMT -5
There are different ways of laying out your web page, however in my experience there isn't a better way than tables. Tables allow you to easily plan your site on paper and convert it to the screen, plus they can be set up so that you get a consistent look across different browsers and screen resolutions. The idea of this section is to tell you how I use nested tables to create and keep the structure of my sites.
I did start to write instructions on how to construct tables with HTML, however I have found a great online tutorial that does this job in a much better way than my ramblings! To learn all about building tables in HTML, click on this link:
www.webmonkey.com/webmonkey/authoring/tables/index.html
Tables allow you to do is keep things in a nice grid, so you can easily keep sections of your webpage aligned correctly and use the various attributes to give your site a nice, clean, organized and professional look.
Now if you¡¦re thinking that you don't want your site to look like a grid, then take off your blinkers and open up your creative eye. The fact that you can turn borders on or off, make them different colors and thicknesses, use things like cell padding or spacing to evenly or unevenly space out your text and images, individually align different cells and even have cells stretching across columns or rows, plus many more features of tables, gives you the flexibility you need to make your site look just as you want it.
One of the biggest features of tables is that you can nest them. In other words you can have tables within tables, for as many levels as you want. This means that you need to be very organized with your code as you need to close off cells, rows and tables in the correct order. One missed </td> or too many </table> tags could see your whole site squashed, misaligned or completely vanish! This is easily done but don't panic, the problem is fixed as quickly and easily as it was created. This is especially true if you make good use of comments in your code. The two things comments help you do is prevent coding errors and also help you quickly locate and check areas of code when you get a problem. To see how I've used comments in my code, take a look at the code of my 3PP site: www.theworkathomeindex.com.
To give you a better understanding of how I use tables when constructing my sites, I'll give you a quick walk through of how I created my 3PP site.
1. The first thing I would do is get rid of the browsers default left margin, so that I know the site will look the same across all resolutions. To do this I would put leftmargin="0" marginwidth="0" in the <body> tag. Both do the same thing, however one is for IE and the other for Netscape browsers.
2. Create a one cell table to hold all the content of my site. I will size the table to a width of 775 to fit browsers on a 800 X 600 resolution and center the table on the page. I'll also make the border, cellspacing and cellpadding = 0. The last thing I would do is make the <td> valign top and align left.
3. At the top of my site I'll have the Header image. To give me the most flexibility and to help me control the look of different areas of the site more easily using Cascading Style Sheets, I will put different objects like the header image into it's own table. I actually have two images in my header section, so I'll create a two cell table, one row with two columns. Again I'll make the border, spacing and padding all 0, so that you won't be able to tell they are separated by two cells.
4. I'll now close off the header table and now I want to put in a link bar underneath the header image. So to make sure it goes under the header image and is aligned nicely, I'll close off the table cell and row in the main table I created in point 2 and start a new row.
5. I'll now create a new table in the new row of the main table for the link bar. Now I can create a thin table with a separate cell for each of the links, or just have one long cell with the links just typed in one after the other. I have a number of options by using tables. What I've actually done is also put a little Flash movie in the link bar showing the date and time. So I've created another two cell table for this, holding all the links in the left cell and then I've right aligned the second cell which holds the Flash movie, so that this sits at the opposite end of the link bar to the links. By using a separate table to the header table, the alignment of the second cell in this table is not affected by the alignment of the header cell table.
6. The next thing I'll do with the link bar table is format it. I want it to have a black or near black background, white and light grey text with different font sizes and link states to the normal text and links on the main content area of the site. To do all this I have given the table a class name of "linkbar" and used a Cascading Style Sheet to format it.
7. OK, now for the main content area of the site. Again this needs to go below the link bar, so I've closed off the link bar table and the main cell holding this table. Now I've opened a new cell in the main table to hold the main content table.
8. The main content will have two thin columns at the sides and a larger section in the middle. So I'll need a three column table. The way the coding works is that you'll first create and populate the first column, then close this off and complete the middle column, close this off and complete the last column before closing off the row and table. What I do is quickly create all three columns in the code with no content, but clearly mark each column at the beginning and end with a comment, so I know where each one starts and stops, using plenty of spaces in the code to easily read it.
9. Now that I have the three columns I can put in the content as I want to. The way I have done my site is that I've actually created separate tables in each of the columns. So for the left column I'll put a new table inside which will be a one column table with many rows. Each banner Ad or object will have it's own row. The reason I do this is because a table row height will be determined by the largest image in that row. So if you didn¡¦t have separate tables and created new rows for your banners in the left column, then this row height may be too large or unexpectedly expanded when you start adding images in your middle section or right column. If you don¡¦t understand this then that's because you haven¡¦t yet learnt how to create tables in HTML or played with them enough.
10. What I then do is actually have separate tables then for each banner or section. So now we have a table within a table within a table within a table! Again, the reason I do this is so that I have complete flexibility when I want to format a specific section using CSS. It also allows me to move things around in chunks without messing up the rest of the site. In other words, if I want to move a banner from one place to another, I can actually pick up the entire table and drop it in between some others, and all the other parts of the page will move up or down accordingly, only affecting the specific column or section it's in.
11. Some of the things you'll see that I¡¦ve done with my site is put a faint grey border around all the banners. I think this gives my site a clean, tidy and professional look. The grey border is actually the table border on the separate table that holds the banner image. On the Google Adsense Skyscraper Ads in the right column I've given it a different background color. I¡¦ve also used the padding format on the table that holds all of the right and left column ads to create some consistent spacing between each of the tables on the side Ads. The only downside to using CSS, is that if the visitor is using a lesser developed browser like Firefox, the browser may not cope with some of the CSS information in the formatting and the site may not look identical in this browser. I always judge my site on the look in IE and Netscape, as 95% of the visitors will be using one of these browsers. The only issue I can see in Firefox for my site is that the spacing between the side column Ads isn¡¦t working, so they appear on top of each other. This isn't a major concern so I've left it.
OK, I think you can see why I've left the tutorial up to the guys at Web Monkey! If I wrote it you¡¦ll be here for days! Tables are very logical and once you have grasped the idea I think they make web design a lot easier, it's just that they are not easy to explain as I have just found out!
Here's that online tutorial on tables again:
www.webmonkey.com/webmonkey/authoring/tables/index.html
Good luck!
I did start to write instructions on how to construct tables with HTML, however I have found a great online tutorial that does this job in a much better way than my ramblings! To learn all about building tables in HTML, click on this link:
www.webmonkey.com/webmonkey/authoring/tables/index.html
Tables allow you to do is keep things in a nice grid, so you can easily keep sections of your webpage aligned correctly and use the various attributes to give your site a nice, clean, organized and professional look.
Now if you¡¦re thinking that you don't want your site to look like a grid, then take off your blinkers and open up your creative eye. The fact that you can turn borders on or off, make them different colors and thicknesses, use things like cell padding or spacing to evenly or unevenly space out your text and images, individually align different cells and even have cells stretching across columns or rows, plus many more features of tables, gives you the flexibility you need to make your site look just as you want it.
One of the biggest features of tables is that you can nest them. In other words you can have tables within tables, for as many levels as you want. This means that you need to be very organized with your code as you need to close off cells, rows and tables in the correct order. One missed </td> or too many </table> tags could see your whole site squashed, misaligned or completely vanish! This is easily done but don't panic, the problem is fixed as quickly and easily as it was created. This is especially true if you make good use of comments in your code. The two things comments help you do is prevent coding errors and also help you quickly locate and check areas of code when you get a problem. To see how I've used comments in my code, take a look at the code of my 3PP site: www.theworkathomeindex.com.
To give you a better understanding of how I use tables when constructing my sites, I'll give you a quick walk through of how I created my 3PP site.
1. The first thing I would do is get rid of the browsers default left margin, so that I know the site will look the same across all resolutions. To do this I would put leftmargin="0" marginwidth="0" in the <body> tag. Both do the same thing, however one is for IE and the other for Netscape browsers.
2. Create a one cell table to hold all the content of my site. I will size the table to a width of 775 to fit browsers on a 800 X 600 resolution and center the table on the page. I'll also make the border, cellspacing and cellpadding = 0. The last thing I would do is make the <td> valign top and align left.
3. At the top of my site I'll have the Header image. To give me the most flexibility and to help me control the look of different areas of the site more easily using Cascading Style Sheets, I will put different objects like the header image into it's own table. I actually have two images in my header section, so I'll create a two cell table, one row with two columns. Again I'll make the border, spacing and padding all 0, so that you won't be able to tell they are separated by two cells.
4. I'll now close off the header table and now I want to put in a link bar underneath the header image. So to make sure it goes under the header image and is aligned nicely, I'll close off the table cell and row in the main table I created in point 2 and start a new row.
5. I'll now create a new table in the new row of the main table for the link bar. Now I can create a thin table with a separate cell for each of the links, or just have one long cell with the links just typed in one after the other. I have a number of options by using tables. What I've actually done is also put a little Flash movie in the link bar showing the date and time. So I've created another two cell table for this, holding all the links in the left cell and then I've right aligned the second cell which holds the Flash movie, so that this sits at the opposite end of the link bar to the links. By using a separate table to the header table, the alignment of the second cell in this table is not affected by the alignment of the header cell table.
6. The next thing I'll do with the link bar table is format it. I want it to have a black or near black background, white and light grey text with different font sizes and link states to the normal text and links on the main content area of the site. To do all this I have given the table a class name of "linkbar" and used a Cascading Style Sheet to format it.
7. OK, now for the main content area of the site. Again this needs to go below the link bar, so I've closed off the link bar table and the main cell holding this table. Now I've opened a new cell in the main table to hold the main content table.
8. The main content will have two thin columns at the sides and a larger section in the middle. So I'll need a three column table. The way the coding works is that you'll first create and populate the first column, then close this off and complete the middle column, close this off and complete the last column before closing off the row and table. What I do is quickly create all three columns in the code with no content, but clearly mark each column at the beginning and end with a comment, so I know where each one starts and stops, using plenty of spaces in the code to easily read it.
9. Now that I have the three columns I can put in the content as I want to. The way I have done my site is that I've actually created separate tables in each of the columns. So for the left column I'll put a new table inside which will be a one column table with many rows. Each banner Ad or object will have it's own row. The reason I do this is because a table row height will be determined by the largest image in that row. So if you didn¡¦t have separate tables and created new rows for your banners in the left column, then this row height may be too large or unexpectedly expanded when you start adding images in your middle section or right column. If you don¡¦t understand this then that's because you haven¡¦t yet learnt how to create tables in HTML or played with them enough.
10. What I then do is actually have separate tables then for each banner or section. So now we have a table within a table within a table within a table! Again, the reason I do this is so that I have complete flexibility when I want to format a specific section using CSS. It also allows me to move things around in chunks without messing up the rest of the site. In other words, if I want to move a banner from one place to another, I can actually pick up the entire table and drop it in between some others, and all the other parts of the page will move up or down accordingly, only affecting the specific column or section it's in.
11. Some of the things you'll see that I¡¦ve done with my site is put a faint grey border around all the banners. I think this gives my site a clean, tidy and professional look. The grey border is actually the table border on the separate table that holds the banner image. On the Google Adsense Skyscraper Ads in the right column I've given it a different background color. I¡¦ve also used the padding format on the table that holds all of the right and left column ads to create some consistent spacing between each of the tables on the side Ads. The only downside to using CSS, is that if the visitor is using a lesser developed browser like Firefox, the browser may not cope with some of the CSS information in the formatting and the site may not look identical in this browser. I always judge my site on the look in IE and Netscape, as 95% of the visitors will be using one of these browsers. The only issue I can see in Firefox for my site is that the spacing between the side column Ads isn¡¦t working, so they appear on top of each other. This isn't a major concern so I've left it.
OK, I think you can see why I've left the tutorial up to the guys at Web Monkey! If I wrote it you¡¦ll be here for days! Tables are very logical and once you have grasped the idea I think they make web design a lot easier, it's just that they are not easy to explain as I have just found out!
Here's that online tutorial on tables again:
www.webmonkey.com/webmonkey/authoring/tables/index.html
Good luck!