NB: This page is archived without styles. Go to our home page or read my blog.
Looking back at an old client site today made my rethink the way that that I have been coding my sites over recent months. So much so, that I thought I'd look again at the code structure of this blog and redevelop the HTML.
Looking back at an old site I made for a client made my rethink the way that that I have been coding my sites over recent months. So much so, that I thought I'd look again at the code structure of this blog and redevelop the HTML in a totally different way. The results were startling, so I decided to write up a short article on some of the key elements.
Having designed this site only a few short months ago, I wasn't intending a full redesign like Dave or Doug, only a reformatting of the code was required although I knew that this would be tricky as the grid layout is quite complex.
I started by creating a table that would contain all the page elements, this table is set to 770px wide and sits centrally within the view-port. I also attached a background image to this main table.
<table width="770" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ece8bb" background="/images/container_bg.jpg">
With this table in place, I began to layout the other main elements of the design by nesting further tables inside the main 'structural' table. I started with the header.
I added a header table with a 770px width to match the with of the container, but also gave this table a height of 155px and attached a background image. To ensure that the table had sufficient height, I inserted a 1px x 1px transparent .gif file and stretched the height to 155px to match that of the table.
The navigation area was more complex. Here I needed an outer table to attached the background image, and an inner table to hold the main navigation links. This inner table contains five cells, each holding one link.
<table width="550" border="0" cellspacing="0" cellpadding="3"> <tr class="text"> <td width="20"></td> <td> <a href="" class="big-links">About</a> </td> <td> <a href="" class="big-links">Business of design</a> </td> <td> <a href="" class="big-links">Loose talk</a> </td> <td> <a href="" class="big-links">Recent projects</a> </td> <td> <a href="" class="big-links">Talking design</a> </td> </tr> </table>
For the blog excepts, links and other content, I added several more 770px tables as 'wrappers' each with four columns, three to hold the content and a fourth (the first in the row) to provide 10px space between the edge of the content and the container. For each entry I nested a further table with five rows but only one column.
With those in place I only needed to add one more table for the footer. This was again set to 770px to match the width of the container.
As I had an existing design to follow, styling the content required only a few CSS rules and a bit of lateral thinking. First came the page background, margins and padding.
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" link="#990000" vlink="#c4785e" bgcolor="#161912">
As the site focusses mainly on content, I started with text styling. This was easy as I created a simple CSS rule which I called 'text',
.text {
font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
font-size: 11px;
color: #333333;
line-height : 130%;
}
I applied this to each and every table cell that contains text content.
<td height="40" align="left" valign="top" class="text">
I wanted the entry titles to be larger and bold, so I created a further rule and applied this to the titles.
.big-links {
font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
font-size: 12px;
font-weight : bold;
color: #ece8bb;
text-decoration: none;
}
<a href="" class="big-links"><b>Header link text</b></a>
And for each standard link, of which there were several, I added a further rule called 'text-link'.
.text-link {
font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
font-size: 11px;
color: #900;
font-style: italic;
text-decoration: none;
}
<a href="" class="text-link"><b>Standardlink text</a>
I needed special styling for the footer text and links, so I created two more CSS rules, 'text-white' and 'text-yellow' and applied them in the same way.
Finally the most tricky part, creating the double border effect around each entry photograph. This involved two more tables, the first with a black background a cellpadding of 1, and the second with a white background a cellpadding of 3. The image was placed inside the inner table. Voila! No more borders or strokes in Photoshop! This nested table effect was applied to all six main images on the page.
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000"> <tr> <td> <table border="0" cellpadding="3" cellspacing="0" bgcolor="#ffffff"> <tr> <td><img src="" alt=""></td> </tr> </table> </td> </tr> </table>
So after several hours of tortuous coding, my experiment was complete. Take another look at the final results. I don't think I'll be returning to these methods again as frankly I'm too old to be relearning everything at my age and the job took far longer than with the methods that I am using now. But I hope that you found this useful.
;)
#1 On June 29, 2004 11:50 PM Gordon Mackay said:
Andy, I think you should take some time out mate, I think your good ole brain chemistry is fermenting :D
Time to take that whisky trail trip to Scotland matey :)
#2 On June 30, 2004 05:45 AM Christopher Bourque said:
Andy, I rolled out of my chair. If this had not been me a year ago (all the way down to every <td>) then I never could have enjoyed such a great laugh at myself to end my day!
Stress relief is good. Thank you... :)
#3 On June 30, 2004 10:51 AM Joost van der Borg said:
Great post. Fun to read, I'm just ashamed of two things:
1: I only 'got' it after the second paragraph...
2: Indeed, just a few short years ago I would've thought parts of these techniques (double borders!) to be pure genius, while heavily using the rest.
#4 On June 30, 2004 11:02 AM Pete Smith said:
This technique sounds really interesting.
Ive also been reading some articles on other sites and they say that the next big thing to consider are something called frames and framesets.
I think they are going to take the development world by storm!
:-)
#5 On June 30, 2004 12:26 PM Stuart Homfray said:
I bet that there's STILL some courses out there 'educating' folks in this manner...
#6 On June 30, 2004 12:38 PM Andy Budd said:
Great idea Andy. When are you planning to role it out?
#7 On June 30, 2004 05:25 PM Jim Amos said:
Ahh, those nested tables look lovely sir. I am confused though, what is all this stuff about cell padding? "Malarkey" is the kind of term they use in prison, so I'd hazard a guess at you being at her majesties pleasure or something. Anyway, good work lad, I'm sure you'll be rehabilitated one day. BTW you look too old to be boxing naked.
#8 On June 30, 2004 05:39 PM Luc said:
Andy, i'm gonna sue you for inflicting bodily harm: when starting to read the second para i fell out of my chair, hitting the floor and cracked my skull.
My lawyer will get in touch with yours.
;-)
#9 On June 30, 2004 10:43 PM Matthias Viehweger said:
I would've added some fancy rollover-effect to every link. I've heard of a little JavaScript that can handle it.
Honestly, I read the beginning (wondering) and then skipped down through your code-snippets. After a little smile, I enjoyed reading it completely.
Very nice! My analyzer found 40 nested tables, but no font-Tag. You know font-Tags? ;-) And the whole background-imagery could be solved w/o CSS, I guess. And why does it work in Opera, anyway?
#10 On June 30, 2004 11:02 PM Malarkey said:
@ Matthias
You spotted a flaw in my recode!
I'll have to start at square one again now adding <font> tags to all those pages now...
What do you suggest? Perhaps,
<font size="1"> <b><span class="text">Damn you pesky Germans ;)</span></font></b>As for Opera, what are you referring to my good man? Wagner?
#11 On July 1, 2004 11:52 AM Waddle said:
It's not funny when you actually code like that and everyone is laughing at you... I'm only on page 85 of DWWS so far...
#12 On July 1, 2004 01:00 PM Malarkey said:
Forgive me if you thought that this column was 'pointing and laughing' at you or any newcomers to standards-based design. Far from it, the joke is on ME!
I decided to write about this after making some changes to a client site that I made a couple of years ago. When I looked at the code, I realised that I had forgotten how to make pages the 'traditional' way and spent about three hours scratching my head thinking "What does THAT do?"
#13 On July 2, 2004 01:33 AM Bob Ryskamp said:
What's so sad is that Frontpage and Dreamweaver churn that stuff out faster than any of us could fix it--and like you said, it's getting harder to remember how by the day.
I co-develop sites with a Frontpage user, and it's like swimming against the current...
#14 On July 8, 2004 05:39 PM Realish said:
OK, for those of us who know nothing about how to create websites, how about sharing the joke?
You don't make sites any more using html? You use, what, a WYSIWYG like Dreamweaver? Nested tables are old-fashioned?
In short, I don't get it.
#15 On July 8, 2004 05:40 PM Realish said:
Oh, wait, is it because everybody uses CSS instead of tables these days?
I still don't get it...