How To Structure Your Website Using Tables
By admin on Jan 10, 2010 | In Free Web Design Tutorials | Send feedback »
A simple and effective way to structure your webpages is simply to use a table with three rows, as you can see here:

Follow up:
Within this table each row is the full length of the table, so effectively the table just has one column, and then in the top row, you can have your site's navigation bar for the top of the page, your main page content goes in the 2nd row, and the bottom row which is the 3rd row you can use for navigation at the bottom of the page.
Often the navigation at the top and the bottom would be the same or similar, so when people visit your site, they can always find their way easily on your site, and even though you can see the borders of the table here the table rows, generally you wouldn't have that border on your site.
Here is the code for the table displayed above:

Inside the table tag you define the width of the table, in the sample web page above the width of the page (in this case it's the table) was defined to be 500 pixels wide, but in a real situation you would commonly define a value of around 700 pixels, defining a table width by the number of pixels is only one way, you can also define your table width according to a percentage of the width of the screen, for example, if you enter 50% for the table width, width="500", then save and go back to the browser and refresh, your table automatically resizes to 50% of the width of your web browser.
ou have the border of your table set to zero, for none visible border, and then you can choose whether you wish to align your table on the left, right or center of the page, center generally makes the most sense, and then the background color of your table, if you don't specify a background color, it would just show the color of the page, which is white by default. In the example the background of the table is set to white, with the color code of white being hash symbol then six Fs. Then last don't forget to close your table.
In between the opening and closing table tags, you can add three rows, to add a row you add the tr tag, stands for table row, and make sure you close the tr tag, and for each piece of information added to your table, you want the td tag, which stands for table data, then close td. And within that you add your content. The same goes for the middle row and the bottom row.
So now you can make a few lines to the middle row of your table, you can actually add as much as you want here as in a real situation this is where you'd add your main page content. Here is how you add the content:

You can use a couple of break tags to add bit of space at the top, and then couple of lines as the content. And you put a couple of spaces at the end as well, by using two breaks, so when you add more content, add them in between the td tags of the 2nd row, now you can save that and go back to the browser and refresh, and you have this new table as below:

The border of the table is visible just so you can see how that works, in a real situation, you will want to set the border to 0. So that's a simple way of structuring your page to make it easy for your visitors to navigate and clealry organized.
Feedback awaiting moderation
This post has 3 feedbacks awaiting moderation...
Leave a comment
| « Your Answer To Recession: Creating Your First e-commerce Site | How To Format A Table Within Another Table » |



