Creating a CSS Table Layout
In the new age of web development one might think a website created with a simple table defeats the purpose of web standards and designing with CSS. However, tables which have correct structural code and utilize CSS for the layout and presentation of text, images, navigation are just as practical for layout in some cases. In this article, we will examine how to create a simple table layout using CSS.
After the structural code is created, we’ll dive in-depth with CSS to control each aspect of the page. We’ll place images neatly inside an unordered list which allows for easy maintenance and control. We’ll learn how to tile a background image inside table cells using CSS. We’ll learn how to create image rollovers without a hint of JavaScript. Finally, we’ll learn how to make a "you are here indicator" which lets visitors know which page they are currently visiting.
If you would like to follow along with this article’s step-by-step development or even try your hand at creating a CSS Table – Layout, you will find the project files link helpful.
| Printable Version | |
| Word | |
| Download Project Files | |
| Zip | |
Open the page
In order to make this article manageable, we’ll work with an already made HTML structure and then write CSS to control the layout and format the appearance of our page. Open index.html and look at the structure, kick the tires, take it for a spin. Our structure is examined briefly:
- Four rows, three columns
- First row, first column
- Header content
- Second row
- Four navigation links
- Third row, three columns
- Left
- Navigation
- Middle
- Content
- Right
- Pictures
- Left
- Fourth row, first column
- Footer content
- First row, first column
We give each column an ID so that we can later set CSS rules in our external style sheet to affect layout and formatting. We’ll replace both heading tags in our header and footer with images. We’ll make the unordered list in the second row our central navigation using CSS to simulate JavaScript rollovers. We’ll place regular headings and paragraphs in the middle column and in the right column we’ll use CSS to format our images which are inside an unordered list.
Creating our title
We’ll give our web page a title, such as Fighter Planes – Bringing the Fight Home. Between the opening and closing <head> tags insert the following:
<head> <title>Fighter Planes — Bringing the Fight Home</title> </head>
Using the <title> tag, we give our page a title. We use the ASCII character equivalent of the dash by using the numerical entity. Save your file and preview the results.
Attaching the style sheet
In order for our web page to see the styles we write, we need to attach it to our web page. We have provided a blank style sheet in the project files download, style.css. Between the opening and closing <head> tags, we link to our style sheet:
<head> <title>Fighter Planes — Bringing the Fight Home</title> <link href="style.css" type="text/css" media="screen" rel="stylesheet"> </head>
Save your file.
Setting the width of our layout
Our web page is set to a fixed width of 760 pixels. This means each column and images they may contain must be equal or less to 760 pixels. We’ll define these widths via our style sheet. In your text editor, open style.css and add the following:
body{
font-family:Arial, Helvetica, sans-serif;
font-size:101%;
color:#000000;
margin-top:10px;
margin-bottom:10px;
padding:0;
background-image:url(images/background.jpg);
background-color:#CC9900;
}
table#layout{
width:760px;
margin:20px auto;
border:0;
}
table#layout td#header{
}
table#layout td#left{
width:190px;
}
table#layout td#middle{
width:380px;
}
table#layout td#right{
width:190px;
}
table#layout td#footer{
}
Let’s examine the code in greater detail:
- We use the body selector to set global styles for our web page, such as font family, size and color.
- We set margin top and bottom to 10 pixels
- Padding to 0
- Background image is set to a tiling gold pattern image
- Background color is set to the same color as our tiling background image. If a visitor is using dial-up, they will be provided a background color which is the same as our image while the image is loading.
- We set our table to a fixed width of 760 pixels.
- Set top and right margins to 20 pixels and left and right to auto. In a fixed width layout, setting left and right margins to auto will center our layout in modern browsers
- We set our left and right column to a fixed width of 190 pixels
- We set our middle column to a fixed width of 380 pixels
We arrive at the following mathematical calculation:
Table layout (760px) = Left (190px) + Middle (380px) + Right (190px)
The CSS rules for header and footer were omitted for the time being. Save your file and preview the results.
Header and footer images
We’ll use the images which are provided from the project files download. However, if you’re using Dreamweaver for this task, please insert the image via code view. The reason for this will be explained shortly. Follow these steps to insert the images:
- For the header and footer image, remove the heading two tags
- To insert our header image, add the following code:
<tr> <td id="header" colspan="3"> <img src="images/fighterplanes.jpg" alt="Fighter Planes - Header"> </td> </tr>
Next, to insert our footer image, add the following code:
<tr> <td id="footer" colspan="3"> <img src="images/fighterplanes_footer.jpg" alt="Fighter Planes - Footer"> </td> </tr>
To help in accessibility, we provide an ALT attribute so that assistive reader technology can notify handicapped persons there are images residing in our page. In our style sheet, add the following to our existing header and footer rule:
table#layout td#header{
width:760px;
height:100px;
}
table#layout td#footer{
width:760px;
height:100px;
}
Remember that we didn’t add a width or height attribute inside our image tag. Our reason is simple – these images will be used in multiple pages for a website. If a change is made to the width or height, you would need to change the width and height attributes for each image tag in each page. Assigning the width and height via CSS alleviates this problem. If a change is made to the width or height then we change it in one place and we’re done. If you insert the image via Design view in Dreamweaver, width and height are automatically entered. Save your file and preview the changes.
We'll continue by moving cell contents up next.