midwest web design

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.

Finished Page

Printable Version
Word PDF
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:

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.

Title

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 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.

Widths set

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:

<tr>
<td id="header"  colspan="3">
<img  src="images/fighterplanes.jpg" alt="Fighter Planes  &amp;#8212; 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  &amp;#8212; 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.

Images added header & footer

We'll continue by moving cell contents up next.

top of page

Thank you for visiting Fabrizio.com - Come back again soon.