Table Layout Tutorial
Having trouble taking what you're learning about the TABLE element and using it to implement your storyboard? Let's start with something easy: a website that has a real layout, with the header graphic across the top and navigation buttons across the top or down the left side. To do this, you'll probably want a minimum of one 2x2 table, with a "colspan" for the first row in the table. For now, just size your table to width="760" so that it won't have left-right scrolling on small screens! You'll probably use the first row for the header image, and the first column of the second row for navigation buttons. (specify the width of the <td> with your buttons as the same as the width of your buttons! The second column in the second row would then hold all your "content" for the page. It would work a little like what appears below (view the source to see the actual code!) I strongly recommend setting border=0 on the table so you don't show the gridlines!
header graphic goes in right here. This row can span across the two columns below due to a colspan="2" |
|
link image 1 |
Here's a header for my content on this sample pageAnd the content would go right in here! That header is centered! And whole cell is aligned top, left. |
You can see a slight variation on this layout by looking at the hand coded webpage for our favorite bike shop, Mike's Bikes. (I've done you a favor and written a lot of notes right where we'd expect content to go on the site.)
Another layout option would put your navigation buttons along the top, creating a navigation bar or navbar in a horizontal line below your header graphic. To do that, you can simply create a 3x1 table, put your header in the first row, your buttons in the second row, and your content in the third row.
| header graphic goes in right here. No need for a colspan since you're doing something really basic. |
| link 1 here | link 2 here - link
3 here |
Here's a header for my content on this sample pageAnd the content would go right in here! That header is centered, with the table cell specified as valign=top and align=left. |
Notice that I have centered the navigation in row 2. That gives us some basic layout to our nav, and provides some symmetry to our graphics. I also centered the header, but not the content in the paragraph.
A Catch with Horizontal Navigation
You need to add up how many pixels wide your navbar would be if you want
to be safe here. In Design Assignment 3, we made
buttons that were 150px wide. If you have 5 of those buttons, that makes
your navbar 750px wide. That's ok. But if you have 6 buttons (Home, About
Me, My Family, My Major, Hobbies, Portfolio), or 7 buttons (add Contact Me),
you have a problem. You can handle this in a couple ways:
- Make smaller buttons (go back and recreate buttons that are 100px wide.
- Make your header graphic (title bar) into your link to home. This is common, and is actually good practice
- Skip navigation buttons and go with text-based navigation. You made the buttons, but you don't have to use them if you don't want.
These are but the most basic of layouts. There is so much more you can do, even using variations on these layouts. Check out the skins for our course website. They aren't done with TABLE, but the could be!
- Cloisonne. Could clearly be a variation on the horizontal navigation layout above (with 3 columns instead of 1).
- The Blues. A variation on the vertical navigation layout, but uses text navigation and puts the navigation on the right.
- Negative. This could be done using the same basic markup as Mike's Bikes if you set the table to width=90%, set both the body and table background colors to #000000, and styled the text #FFFFFF. (Negative uses a layout style called "liquid layout" because the page expands and contracts with hte browser. The other two skins for our course use "fixed width layout" because the width is fixed at something like 760px. Mike's Bikes is also fixed width.)
- Skinless. Takes us back to the good old days, that first hand coded Personal Website, and layout-free code. Don't you get a tear in your eye when you think back? (I hope not!)