Styling The Table For A Block-Style Design
In the last section, we set up our table's structure. But now, it's time to use Cascading Style Sheets in order to complete the transformation!
The CSS code will be placed between the <head></head> sections of our HTML page.
This is the full stylesheet that is necessary to create the design:
<style type="text/css">
<!--
body { background-color:#C2DF69; color:#000000; font-family: Verdana, sans-serif; }
#sitetitle { border:1px solid #000000; padding:15px; text-align:center; background-color:#F2F37B; font-size:18px; }
#emptyrow { height:15px; }
#content {border:1px solid #000000; padding:15px; background-color:#FEFFC1; font-size:11px; }
#emptycolumn { width:15px; }
#menu {border:1px solid #000000; width:150px; padding:15px; background-color:#F2F37B; font-size:10px; }
-->
</style>
You probably noticed right away that there are five special words with # at the start of them in our CSS file. These are called ID Selectors, and they are used in conjunction with the unique identifications we assigned to each of our table's cells. This is very important, as each cell recieves different styling.
Let's go through each of the lines of CSS to customize the stylesheet for your layout's needs. (Popular image software such as Adobe Photoshop and JASC Paintshop Pro include hexidecimal codes for custom colours, but with a quick search on google, you can find countless websites with colour codes for you to use.)
Background Colour and Text Choices
body { background-color:#C2DF69; color:#000000; font-family: Verdana, sans-serif; }
This line of code affects the code within the <body></body> tags of the document - so basically, everything. Background-color refers to the colour of page's background. The color property refers to the colour of the text on the page. And font-family allows you to select what fonts you would like to use.
I've chosen to use a happy green colour for the background and simple black for my text colour. I've chosen the common font Verdana for my choice of font, but have added a comma and the words "sans-serif" to let the browser default to any other sans-serif font on the user's computer if Verdana isn't available.
Styling the Header
#sitetitle { border:1px solid #000000; padding:15px; text-align:center; background-color:#F2F37B; font-size:18px; }
border:1px solid #000000
This code adds the thin border around the outside of the header cell. There are also many other styles of borders you could choose instead, and different sizes and colours. For example:
There are countless combinations for you to try out! You can be creative with your choice, or stick to the ordinary 1px solid border for a streamlined look.
padding:15px
This adds some padding (breathing room) between the border and the text.
text-align:center
This does exactly what it says it will do. The text becomes aligned to the center of the cell.
background-color:#F2F37B
Change the background colour of your header with this code. I've chosen to use a canary yellow.
font-size:18px;
This adjusts the font size of your text in pixel size.
Styling the Empty Row
#emptyrow { height:15px; }
Without any styling, most browsers would display the empty row as non existant, because it has no content inside of it. However, instead of using transparent spacer GIF images. This code forces the cell to have a fixed height. I've chosen 15 pixels as the height, but you can alter the spacing between the styled cells as much as you wish.
Styling the Content
#content {border:1px solid #000000; padding:15px; background-color:#FEFFC1; font-size:11px; }
This is extremely similar to styling the header. Simple alter the border, padding, background colour, and font size to your taste! Simple, isn't it?
Styling the Empty Column
#emptycolumn { width:15px; }
This code assigns a width to the empty column located between the content area and the menu. I would recommend the width of this column being the same as the height of the empty row in order for the site to seem really balanced both vertically and horizontally.
Styling the Menu
#menu {border:1px solid #000000; width:150px; padding:15px; background-color:#F2F37B; font-size:10px; }
Editing the menu is extremely similar to editing the header and the content area. Edit the border, padding, background colour, and font size to match your tastes! There is an attribute that wasn't in the header or the content area: width. This is the width of the menu. Unlike the content area that stretches to fit the screen, the menu stays nicely on the right hand side with the perfect width. I've chosen 150 pixels, but you can choose a smaller or larger width dependent on your tastes.
Check Your Work!
Can you believe it? You've finished making the block-style layout! Save your work and view your masterpiece in an internet browser! This is my result. Pretty stylish, isn't it? A few lines of CSS really goes a long way.
Simple Design Adaptions
Another stylish alternative is to make a header image that has the same colour background in it to mesh nicely like in this example.
Do you like the menu to be on the left side, and the content on the right? It's really simple to turn them around! Simply exchange the IDs of each of the columns to exchange their positions. (View example)
In Conclusion
I hope that this tutorial has shown you the power of tables to be streamlined and beautiful without the use of spacer GIF images. Enjoy your design!
[ back ]
