Attn HTML coders - need some advice on the spacing of tables

[Jeff7]

I'm working on re-coding my website to make it HTML 4.01 compliant, and in the midst of that, I figure I'll try to clean up the coding in general.

I'm just looking at this page right now.

For tables, is it good to set the table width to 100%, a slightly smaller percentage, or a set number of pixels?

And within that, the td width - same question; should it be set to a percentage or a number of pixels?

For reference of the tables I'm thinking of adding, check this page. It uses a set number of pixels for everything. I've only seen the pages at 1024x768 though, so I don't know yet how they scale to other resolutions. (And I don't like switching resolutions much - too often, it sticks at 60Hz, forcing a reboot to get 120Hz back.)

I'm sort of thinking to use set-width for the picture sections, and percentages for the spacing on the sides.
Comments?

Thank you all very much in advance. I'm a former Frontpage user, finally converting to a notepad-style interface. (Evrsoft's 1st page 2000 - text-based, but with colors. ...which, it seems, has trouble saving files when the Xvid encoder is running:roll: )

And yes, I see that there's another HTML/Firefox question nearby this one; doesn't seem quite relevant though - and it mentioned cascading style sheets, of which I know absolutely nothing.

Part I answered.

Part II Question:
Is HTML in its final days? Are XHTML and CSS the way of the future? (Or is the expression "wave of the future?")

 

[igowerf]

Use percentages if you want the tables to resize with the window or, obviously, take up a percentage of the window. For a bunch of pictures, I'd just use a fixed size because the images won't resize with the window or screen resolution. If you use percentage, the pictures will just end up being spaced out more.

 

[Jeff7]

Originally posted by: igowerf
Use percentages if you want the tables to resize with the window or, obviously, take up a percentage of the window. For a bunch of pictures, I'd just use a fixed size because the images won't resize with the window or screen resolution. If you use percentage, the pictures will just end up being spaced out more.

Well I'm thinking of percentages on the left and right sides, and pixels in the middle.

I just would like my site to be tolerable at 800x600, but still decent at 1600x1200.
Might my idea accomplish that goal, or at least come close?

 

[WannaFly]

Originally posted by: Jeff7

Originally posted by: igowerf
Use percentages if you want the tables to resize with the window or, obviously, take up a percentage of the window. For a bunch of pictures, I'd just use a fixed size because the images won't resize with the window or screen resolution. If you use percentage, the pictures will just end up being spaced out more.

Well I'm thinking of percentages on the left and right sides, and pixels in the middle.

I just would like my site to be tolerable at 800x600, but still decent at 1600x1200.
Might my idea accomplish that goal, or at least come close?

This would work fine - it is what i did for my Exilum site (see sig), I have a left 150px column, a right 150px column and my center is 100%

 

[mugs]

I pretty much always use pixels, but percentages are useful at times. Case in point: fusetalk. Everything is fixed widths except the post body, which expands to take up whatever is left of the window.

 

[Jeff7]

Yeah, it looks like you just can't have a webpage that'll look perfect at any resolution. I guess 1024x768 is the new base resolution; it's what I'm running now. 800x600 - you need to scroll sideways. I decided on 250 as the width of my thumbnails, and that's what they're staying at. GIMP's batch function requires you to be a GIMP programming expert, which I'm not, so I'm not re-doing all my pictures.

Guess I'm just going to have to experiment here, courtesy of my second, networked PC.

I figured I'd ask, in case using percentages or pixels was some kind of horrible taboo I wasn't aware of.


So, back to the tedium of coding I guess.
I'm going with pixels. Maybe when 2400x1800 becomes the new baseline resolution, or 3600x2025 (16:9 res, just crazy examples here), maybe then I'll re-code my site. Loooong time from now.
At any rate, the Nokia 445 page should be recoded tonight yet. I hope. And it'll be HTML 4.01 Transitional compliant!!!


Other, unrelated oddity I noticed just now - Firefox browses Windows network shares MUCH faster than Windows Explorer does.

 

[kamper]

Learning some css might be a good idea. Generally speaking, if you aren't displaying tables on your page you shouldn't use tables in your markup

Also, I don't see why you have to change resolutions to test what your page will look like. Can't you just resize the browser window? The web developer plugin for firefox will actually resize the window to any dimensions you want so that you can be precise if you like.

 

[mugs]

There's enough people still using 800x600 that I still write HTML for that resolution unless I don't care about alienating a portion of my audience. The percentage of your audience using resolutions that low will vary depending on the target audience. I have no clue why people are still using 800x600, the only reason I can imagine is that they're too ignorant to know the difference (or know how to change it), or they were too cheap to spring for a 17" CRT.

 

[Jeff7]

Originally posted by: kamper
Learning some css might be a good idea. Generally speaking, if you aren't displaying tables on your page you shouldn't use tables in your markup

Also, I don't see why you have to change resolutions to test what your page will look like. Can't you just resize the browser window? The web developer plugin for firefox will actually resize the window to any dimensions you want so that you can be precise if you like.

That'll be something new to me. Here's the sum total of my knowledge of CSS:

CSS = Cascading Style Sheets.

That's it. I don't know what they do, what they are....or what other questions to pose about them.

Also, I tested my pages in both Firefox and IE. It always worked properly in Firefox (according to what W3C.org said it should do), but then IE would look totally different, either changing the alignment, or else stacking things vertically when I wanted them side-by-side.

I'm kind of scared to learn CSS too -I'd probably wind up re-coding my whole damn website. AGAIN!!!! ack

Originally posted by: mugs
There's enough people still using 800x600 that I still write HTML for that resolution unless I don't care about alienating a portion of my audience. The percentage of your audience using resolutions that low will vary depending on the target audience. I have no clue why people are still using 800x600, the only reason I can imagine is that they're too ignorant to know the difference (or know how to change it), or they were too cheap to spring for a 17" CRT.

Oddly enough, when I finally got a 17", then I moved to 800x600 - I ran 640x480 on a 15". It took a 21" screen to get me to go to 1024x768. (Never used a 19". 912x684? )

For a great time, I had to scroll left to right on a lot of pages. Now I realize why it can be tough to program a page to look decent at multiple resolutions, especially for an amateur programmer.


Oh yeah, click the first link in my first post - the Nokia 445 page has been recoded.

 

[mugs]

Originally posted by: Jeff7
Oddly enough, when I finally got a 17", then I moved to 800x600 - I ran 640x480 on a 15". It took a 21" screen to get me to go to 1024x768. (Never used a 19". 912x684? )

For a great time, I had to scroll left to right on a lot of pages. Now I realize why it can be tough to program a page to look decent at multiple resolutions, especially for an amateur programmer.

I didn't add legally blind to my list, but it was there in the back of my head. Why do you use such low resolutions? I'm the opposite - I used 1024x768 on 15" monitors, 1280x960 on my 17", and since then I've been using LCDs at their native resolution.

 

[kamper]

Originally posted by: Jeff7

Originally posted by: kamper
Learning some css might be a good idea. Generally speaking, if you aren't displaying tables on your page you shouldn't use tables in your markup

Also, I don't see why you have to change resolutions to test what your page will look like. Can't you just resize the browser window? The web developer plugin for firefox will actually resize the window to any dimensions you want so that you can be precise if you like.

That'll be something new to me. Here's the sum total of my knowledge of CSS:

CSS = Cascading Style Sheets.

That's it. I don't know what they do, what they are....or what other questions to pose about them.

Also, I tested my pages in both Firefox and IE. It always worked properly in Firefox (according to what W3C.org said it should do), but then IE would look totally different, either changing the alignment, or else stacking things vertically when I wanted them side-by-side.

I'm kind of scared to learn CSS too -I'd probably wind up re-coding my whole damn website. AGAIN!!!! ack

Long story short: css is a way to dictate the style that your page should be displayed in and leaves only the actual content in the html. Generally speaking, when you use css properly all the attributes disappear from your html tags except the ones that actually provide content to the user, such as hrefs.

http://www.w3schools.com is a good place to learn about css and other such things. I'd really recommend it if you have the time and motivation to learn/change your current pages but, of course, if it's more trouble than it's worth to you then don't bother. One thing it won't do is cure your cross browser rendering issues

 

[Jeff7]

Originally posted by: mugs

Originally posted by: Jeff7
Oddly enough, when I finally got a 17", then I moved to 800x600 - I ran 640x480 on a 15". It took a 21" screen to get me to go to 1024x768. (Never used a 19". 912x684? )

For a great time, I had to scroll left to right on a lot of pages. Now I realize why it can be tough to program a page to look decent at multiple resolutions, especially for an amateur programmer.

I didn't add legally blind to my list, but it was there in the back of my head. Why do you use such low resolutions? I'm the opposite - I used 1024x768 on 15" monitors, 1280x960 on my 17", and since then I've been using LCDs at their native resolution.

I just never liked the tiny text and icons and.....basically everything tiny. Plus, with the cheap monitors I grew up on, they didn't support high refresh rates at the better resolutions. My eyes prefer 85Hz or higher, or I can see flicker.

One thing it won't do is cure your cross browser rendering issues

Yeah, I guess that's up to the browser creators to make compliant browsers.



Just looking over that CSS stuff...it looks like it's programming that incorporates "shortcuts" - instead of declaring a whole list of variables each time you need them, you "link" them to a single word. Looks like it adds all kinds of other nifty capabilities.

CSS looks like it could definitely be useful, but that'll take me some time to learn. I don't think of myself as being much of a programmer to begin with.


Edit, March22:

Learning some css might be a good idea. Generally speaking, if you aren't displaying tables on your page you shouldn't use tables in your markup

How about I use a mutated combination of both? CSS and tables.

I still like tables for the way they organize the page with pictures and the accompanying captions. Regular paragraphs stay as they are though.

 

[Jeff7]

Bump, with a new question edited into the first post, and here as well:


Part II Question:
Is HTML in its final days? Are XHTML and CSS the way of the future? (Or is the expression "wave of the future?")

 

[MrChad]

I think the general rule of thumb now is that tables should be restricted to display tabular data. For layout purposes, CSS is the way to go.

 

[Jeff7]

Originally posted by: MrChad
I think the general rule of thumb now is that tables should be restricted to display tabular data. For layout purposes, CSS is the way to go.

Looks like I've got some research to do then. I figured out how to integrate CSS with tables and potentially eliminate a good bit of redundant coding, but I suppose that getting rid of the tables might have benefits too. I like the general layout of my site now. Granted, the Tesla Coil page is really outdated - it hasn't been significantly updated for close to 4 years, maybe longer. But the rest of it was done in the past year.

I'll check around for some cheap CSS books. The online guides only seem to provide a few basic examples, and fairly brief explanations.

 

[oboeguy]

"Brothercake" has a really handy CSS-based menu for a website. You may find it useful. Text

 

[GrouchyLadybug]

Originally posted by: Jeff7
I'll check around for some cheap CSS books. The online guides only seem to provide a few basic examples, and fairly brief explanations.

http://www.w3.org/TR/CSS1
These are the full specs for level 1 CSS. This (along with the aforementioned w3schools beginner tutorials) is the only the reference I've ever needed in regards to CSS. The specs give each property and the possible values for each. A few months ago, I had no clue how to use CSS, and now I can't imagine coding a website without it...and I learned it all through these two sites. Good luck!

 

[kamper]

Originally posted by: MrChad
I think the general rule of thumb now is that tables should be restricted to display tabular data. For layout purposes, CSS is the way to go.

I think that's always been 'the rule', it just took along time between when people discovered that you can do fancy stuff with tables until there was a significant backlash of people who understand why you shouldn't try that stuff.

The reason not to, just for Jeff's benefit, sorta has to do with why xhtml is replacing html. Html is really meant to be a language for marking up content, it was never really meant to make the fancy pages you see out there today. Originally, things like table were meant to do exactly what they said: if you have a <table> tag then that means you want to display a table on screen. Through the middle html versions the specs got very convoluted with things like the <font> tag as people wanted something more powerful than a simple header and paragraphs page layout. This led to better looking pages, but only if you were using the same browsing tool as the designer and the munge of content and layout became very hard to maintain.

The major problem with what html became was that it only worked on big fancy browsers and even then, only sometimes. The w3c has always had a goal of making the web accessible to anyone, no matter what tool they use to view. So they created css to handle styling of the page, deprecated many of the style based tags and attributes and created xhtml which reinforces the notion that html should only contain content plus hints about how that content should be structured (in tables, in paragraphs, in headers...).

Style sheets (css) can be applied by browsers that know how to render a fancy page, but other viewers like small devices (phones, pdas), text browsers or programs that help handicapped people (blind people for instance) can ignore the styles and concentrate on rendering the content in a way that is suitable for their users.

If your document is nicely laid out in a hierarchy of headers and paragraphs and tables are only used when you mean to use a table then its easy to imagine how a program could read a page and tell a blind person (out loud) what the content of the page is. But if you have a bunch of tables used to layout the whole page then you can see how it would be very difficult to describe. The blind person might wonder what the semantic meaning of all the tables is when he doesn't actually need to pay attention to them. The same benefits or problems could be seen in the case of a search engine. It doesn't need to know what the page looks like in a browser, it just needs to know what the content means.

Sorry for the big rant I'm just trying to explain why it's always a good idea to make sure that the tags you use actually mean something about the data you want to display and that you push the details of how to display that page in a browser out into a stylesheet

 

[Jeff7]

Originally posted by: GrouchyLadybug

Originally posted by: Jeff7
I'll check around for some cheap CSS books. The online guides only seem to provide a few basic examples, and fairly brief explanations.

http://www.w3.org/TR/CSS1
These are the full specs for level 1 CSS. This (along with the aforementioned w3schools beginner tutorials) is the only the reference I've ever needed in regards to CSS. The specs give each property and the possible values for each. A few months ago, I had no clue how to use CSS, and now I can't imagine coding a website without it...and I learned it all through these two sites. Good luck!

Excellent, looks like what I needed.

I visited a site today, and they had linked to a 9KB page of CSS declarations. All for a fairly simplistic layout. Good god it looked complicated - like programs I slogged through in high school. Ack!
But it probably looked that way because it was concentrated programming - all the junk that would have been in the original HTML document was distilled down into one massive load of CSS goodness.

kamper, thanks for that info. I was only marginally aware that page readers even existed; it's just something I'd never had reason to begin to envision, probably because my experience with blind people is limited to just one customer one time where I work, who asked if I worked there, and he asked me to watch his basket of stuff while he used the restroom. Other than that, I really don't know any blind or deaf people at all. So I really don't even know what a page reader interprets, and how it does it, when it tries to decipher a webpage.

Seems that designing a truly good webpage is quite a good bit more complex than most people out there realize.

Public apology then:
To anyone reading my website, I'm sorry if I used tables where I shouldn't have. I thought they were a convenient way of organizing everything. But then, I also coded a majority of my site before I used anything other than IE. Dark times those were.

 

[kamper]

Hey, I was just waxing theoretical about the ideal web. If it's not worth your time to cater to people with non mainstream browsers then you certainly don't have to. Those people are very seriously in the minority and it's your choice if you need them to be able to see your page. I will commend you if you make the effort though. There are validators online that actually grab your page and check it for a series of requirements for accesibility if you're interested.

 

[screw3d]

One other advantage of CSS is that you can implement site-wide design change with just a single file

Personally I only test my pages with IE6 and Mozilla-based browsers.. adding the CSS hacks to make it work for IE5, NS4 and other quirky browsers is just too messy.

Just a sidenote, make sure you have IE render your pages in standards mode instead of quirks mode especially if you use CSS to layout.. to do that just have the proper DOCTYPES declared.. make sure you don't have the xml prolog <?xml version="1.0" encoding="iso-8859-1"?> on the line preceding DOCTYPE because IE will render it in quirks if you do that.