This Weeks Tip & Trick - Proper Use Of Tables
 

Taken from the newsletter dated Friday Aug 6th 2004.....

I recently added a rule to the Link O'Rama stating that your site has to fit lengthwise into an 800x600 monitor. We have really been cracking down on this & have seen a couple of very common errors being made by numerous submitters:


1 - Setting The Tables To 800 Wide
This is a bad idea, since, oddly enough, an 800 wide table does NOT fit onto an 800 wide monitor. Think about it - you have the border from the browser as well as the scroll bar eating up some of the pixels. Set your tables to 750 wide & you'll have no problems, unless........


2 - Setting Cell Widths That Total Up To Over The Total Width Of Your Table
If you have a table that's 750 wide & put 4 cells in it, each one 200 pixels wide, the table will then of course blow up to 800+ pixels. Setting fixed cell width's inside a fixed width table is very tricky. I suggest using %'s instead. So, using the above example, set your cell width's to 25% & your table will still be 750 pixels wide.


3 - Setting The Tables To A % Of The Monitor
Sometimes we see sites that have the tables set at 80% for the width. While this may look good at whatever screen size you are looking at things on, not everyone has the same screen size & thus, others will not see the same layout that you see when you are designing the site. Design the sites so that you will see what everyone else see's & set the table to a fixed width.


4 - Align Everything The Same
This is a big pet peeve of mine. When you set up the properties on the tables & cells, set them all up so that they are all aligned the same way. We constantly see recip tables that are 3 rows with 3 columns, but the cells are not all centered & thus, one recip loads on the left, the next loads on the right & the last lines up in the center of the cell. If the site looks like you slapped it together in 10 minutes, the surfer's not gonna spend more than 10 seconds before they click the back button. This also applies to those recip tables that don't fit into your cells (those of you that build free sites know what I'm talking about) Either adjust your layout or edit the recip (as little as possible) so that things line up in a pleasing manner. If you have a 750 wide table with 4 cells set at 25%, don;t jam a 200 wide recip table into one of the cells, cause it'll look fucked. Take the extra 5 minutes & adjust your page.


I'm not going to say that I am some sort of "Table Making Guru" LOL - but if you have a question on something or need advice on an existing site, please post them in this thread.

I suggest you make ur recip tables no more than 4 wide or they will maybe run over. Just thought id add that...

Well, it all depends on the size of the recip tables you're throwing into yours - if they are 120 wide, you can put 5 in across, if they are 200 wide, you can only put 3 - if you mix 2 200's & 2 120's you can put 4 - it's all in how you set things up :)

If you use editor like Homepage - that I use - you can browse your page in 800x600 without changing anything in your browser (EDIT: I meant in monitor). Very handy.

GG is right. Tables wider than 750 are too wide. You can use some cellpading but not very much. Many times I have first table as 750 with cellpadding=0 and inside smaller tables - if I want to use more than one bgcolor in my site, like today:

http://www.hottyporn.com/cheerleader-pantyhose/

Tables is old way to build today but all those fancier ways don't work with all browsers, so I'm old fashioned and still use tables.

2nd EDIT: (as it seems I can't have my ass up from this chair and go to watch Neste Rally Finland) My recip tables are 600 pixels wide. Every cell is aligned to center. If recip is wider, I give table some more pixels and of course to cell too. Good example is Cleo's Links. Her recip is wider than 200 pixs if you want it to look same as in her site. That's no problem with me, I have 750 pixels and as I normally put 3 recips in a row they use only 650pix max.

finnbear, there are other ways to make tables (and I have experimented with at least one other way) but I find that they don't work correctly in all browsers and don't even look them same under different circumstances.

As Greenguy said, keep everything at or under 750, make sure the math totals up (within a pixel or two) for nested tables and cells, and you are pretty much good to go.

Download an alternate browser, and check your work from time to time in that "other" browser. You will be surprised to find out that IE is very forgiving for missing or improperly closed tags, and other browsers are not. I use firefox now, and I see tons more table errors that I did before.

Alex

Tables and even one pixel GIFs are the way to go as they just work in everything the way they are expected to work. :)

Namo lets you looks a thing at 640x480, 800x600, 1024x768 or you can put in custom settings.

OR

You can just do what I do & write on the border of your monitor with a Sharpie where 640, 800 & 1024 are :D

"I'm not going to say that I am some sort of "Table Making Guru" LOL - but if you have a question on something or need advice on an existing site, please post them in this thread."

GreenGuy I'll take you up on your offer
This is a work in progress
Would you lay the tables out any differently on this site?

http://www.tijuana-tonight.com/

What's a table?


|couch|



lol



|escape|

Yeah. I don't know. I build all of my free sites with Flash.|waves|

You a hair too wide (760 doesn't fit) & I'd center the banner on the bottom & left align the text that starts with the red Tijuana

Of course, the last parts are just opinion :D

Post it notes do a good job too :D

DD

I use Adobe Golive and it has a little popup that adjusts its window for screen size and it suggests 720 pixels max wide which seems to work pretty well.

I use width and cellspacing and cellpadding tags with all my tables, so they are always like I want them to be.

I also check my sites with Netscape 4.7. If it looks OK in that old monster, it looks OK in every browser. It don't forgive anything, and if you have errors you often have a blank page. Has happen to me in the past.

If you use the Firefox web browser (and why are you not?!) you can add an extension called, "Web Developer". It has a toolbar menu item that will switch you into whatever browser size you want i.e. 800x600, 640x480, predefined & custom sizes etc. It has a bunch of other useful tools (validation, table outlining, image tool, form tools, page info etc), but for the purposes of this thread, the re-size button rocks.

Just choose "extensions" from the tools menu, and click on "Get More Extensions". Then look for "Web Developer" - it was in the "top rated" at #2 when I last looked (time of this post).

Ditto :)
Works perfect… couple of caveats,

Make sure that you put a
between images and text, like a banner, inside of a cell or it may not wrap right in some browsers, like Windows IE.

Defining height doesn't always work correctly. Put
s in the cell to force its height or even better use a one pixel spacer.gif set to the correct height.

Also if you want a cell to have a color you need to put something in it or it just shows the table's background color. Put a non breaking space in it or a dot.

Why not use % instead?
 

I usually get allong better with % than pixels....



100%

4 rows x 25 and so on.........

it does the trick quite nice...

Because then if someone has a huge monitor things get really awful looking with four thumbs being spread out over a 1856 pixels or something like that.

OK - I think Ill take you guys up on that offer too since my eyes are about to pop out looking this one over and over - I know there's something not set right but cant find it no matter how many times I look :)

http://www.midgetpornsex.com/midgethardcore/post.html

The main table BG should be maroon IMO.

It displays correct in my browser so I'm not sure what you are asking.

I did run it through my editor…
The table containing the thumbs is set to 100 pixels wide but its cells add up to 605 pixels.

Also on the cell that contains the above nested table you have its hight set to an incorrect value as well.

Got it - thanks - and Maroon it will be LOL :)

LMAO |jester|

Just wondering if this fits your screen GG. I hope it does, because I submitted it today.. lol I read the rule, and I hope it came out right..

http://www.porn-avs.com/xxx-sites/vi...cock/index.htm

Yes - the recips do start to get squished a bit, but it still looks ok.

But those pics on the other hand - oh man - photoshop can do wonders for guys with average sized cocks - LOL