Trim your code -- table-o-holic 12 steps

linking js and css file

[stuntdubl]

Hi....my name is Todd....
and I was a table-o-holic

I am getting better though, and slowly
migrating my sites to CSS.

I get frustrated, and often tempted
to use nested table 'work-a-rounds',
but I am trying to stop that now.

My new endeavour is trying to trim and clean up my code,
by linking style sheets and javascript files.

I am not having much luck yet, and wondering if someone can point me in the right direction.

When I am doing mouseover images (specifically in DW), I get all kinds of javascript that I would LOVE to link off-page. Not quite sure if this is possible but I would be ecstatic if it was. I am FAR from a java programmer, so in many cases this code baffles me, and I try not to touch it, or quickly press CNTRL+Z if I accidently do.

Please help me continue my resistance of tables.

[Birdman]

Resistance is futile...

Kidding;) It's not as tough as it seems. Here is how I link to external .js and .css files:

<link rel="stylesheet" href="../newstyle4.css" type="text/css" />

<script type="text/javascript" src="../rollover.js">
</script>

[martinibuster]

Seems like it's time I got off my butt and started doing external js, too.

[mack]

I have to admit I use tables extensivly in my page layout. I think it's perhaps time I moved along.

[edited by: mack at 3:41 am (utc) on Oct. 17, 2002]

[Edouard_H]

You can turn DW's JavaScript into an external file easily. Build your nav bar, for instance, first before DW soups it with any other script. Copy between the beginning and end script tags, paste it into notepad, name it whatever.js, and use Birdman's example to call it externally.

[Hagstrom]

and I was a table-o-holic

I would like to kick to habit myself, but it's hard to do as long as people are using NS4. (it's always somebody else's faults with us table-o-holics :) )

[creative craig]

Tables are so easy to put together though, takes a few minutes to bang out a complete table.

I always find it more time consuming with CSS, but I am starting to move towards CSS layouts with minimal tables!

Craig

[Birdman]

Tables are so easy to put together though, takes a few minutes to bang out a complete table.

I'm to the point I where I can bang out a page with divs pretty fast, but it always looks terrible in nn4 :(

I guess I'll have to learn that @import hack for the %3 of nn4 users sometime.

[creative craig]

I'm to the point I where I can bang out a page with divs pretty fast

Thats what I am aiming for my good man

[Andrew Thomas]

Is there a big difference in using layers rather than tables?

Im just getting into external .js and css, but still use tables, mainly because i know it works in most browsers, whereas layers im not sure.

Should i change, and will i see a big difference in SEO and download speed if i do?

Also, not knowing much about layers, what can layers do that tables cant, or vice versa.

thanks

[Birdman]

Should i change, and will i see a big difference in SEO and download speed if i do?

It can definetly help in SEO by allowing the meat of the content to appear at, or near, the top of the html page. With tables, you have to stick to a certain order, which usually puts the good stuff much lower on the page.

It should also reduce download time, depending on the amount of tables you use.

[stuntdubl]

>Should i change, and will i see a big difference in SEO and download speed if i do?

This is what I'm really hoping for.....

I seemed to have noticed that very 'simple' pages have been ranking high in G lately....

If not, then purely for the joy of something new, and having 'cleaner' code...

Woohoo! <does cabbage page dance>

I just finished uploading an update to my 150+ page site.....I was able to convert the table-based mess into a nice 3 layer style sheet.

I am very happy because I also discovered (for the first time) how to externally link the .js and .css files so my content is close to the top. It works....it really works!

Next step.....any suggested appreciated.....
getting rid of all my outdated <font> and other formatting tags in the 'content' section of my pages.....

[Andrew Thomas]

Layers only work in certain browsers, so how do you get around using a tabled site for Netscape 3 etc, what code is required to replace the layer.html to a table.html, so all browsers can see my pages.

[kevchadders]

Next step.....any suggested appreciated.....
getting rid of all my outdated <font> and other formatting tags in the 'content' section of my pages....

Get rid of the font tags, and set them up in your font styles in the external CSS file... and use the class in your html attributes instead...

e.g (home.css as the external file)

-- contents of the file (home.css) --

.normaltext
{
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px
}
-- End of file --

<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="normaltext">Hello World
</td>
</tr>
</table>
</body>
</html>

[ppg]

<link rel="stylesheet" href="../newstyle4.css" type="text/css" />

I've been linking to external stylesheets like this too, but I've found that validating to HTML 4.01 transitional gives me the following error at the w3c validation service:

Error: end tag for element "HEAD" which is not open; try removing the end tag or check for improper nesting of elements

If I remove the closing forward slash at the end of the link tag it validates fine, same situation but with a different error with strict.

[Birdman]

You only need to add the /> when you validate for xhtml. Html doesn't require it. [w3schools.com...]

[ppg]

Ah, thanks. I thought there must be a reason for it.

[stuntdubl]

>Get rid of the font tags, and set them up in your font styles in the external CSS file... and use the class in your html attributes instead...

Can you think of a feasible way to do a find and replace SITEWIDE?

It's lookin' pretty grim to me, but thought somebody else might have an idea. I know I will certainly be trying to stay away from <font> tags in the future.....it's amazing how much bloat they add to each page.

[tedster]

A manual sitewide deletion of all font tags is not TOO very grueling, because you probably don't have that many different varieties of <font attribute="foo">.

What I've done:

1. Globally replace all </font> tags with nothing.
2. Do a global search on <font.
3. Copy the COMPLETE font open tag from < to >
4. Paste that tag into the search "find" function
5. Do a global "null" replace for that specific flavor of font tag.
6. Search again on <font, and delete the next flavor you find.
7. Keep repeating until you can't find anymore instances of <font.

[Hagstrom]

I have just spent some weeks going through my site (300 pages of hand-coded HTML) to remove tables where possible.

One of the places where I could not do without tables was in captions below images. I tried starting another thread [webmasterworld.com] about this problem, but the consensus seems to be that there's no better alternative.

[2_much]

I've always asked the designers I work with to use tables instead of layers, believing them to be easier for spiders to index.

I haven't done much research into this lately and am wondering, from a spidering & ranking point of view, whether things have changed?

I've always found the highest ranked pages to have very simple, table based html code. Am I out of the loop?

[tedster]

It's still true that simple table-based layouts can do very well, especially when the fonts are handled with an external stylesheet to trim the code.

However, div based layouts offer many advantages - not the least being absolute positioning that allows you to push your essential content closer to the top of the HTML document.

[brotherhood of LAN]

For those digging their heels deep and replacing all their <font> tags by hand, you might want to check out an edit/replace function with regular expressions. They are the biz :) I mention them because I didn't fancy doing all that hand work either....so I learned a little about regex and let the computer do it for me (using notetab and/or DW)