h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

Started teaching myself HTML and for some reason I cant get anything to appear below a table.

I do the whole table, end off with and then Blah Blah
and the spaces and Blah Blah appear ABOVE the table.

What am I doing wrong?

Is the page on the web already? If you point to it, we can take a look at the code and tell you what's wrong, but we can't tell from what you posted here.

Or you can run it through an html validator like http://validator.w3.org/ - just copy and paste your html into the larger box at the bottom, and that will point you at all the mistakes in the page.

Creating tables by hand is notoriously difficult, that's usually the point when most web developers, even the ones who prefer hand coding, break down and use a WYSIWYG tool like Dreamweaver or even something free like Nvu/Mozilla Composer. Build the table in the graphical tool, then go back to hand-editing for the other stuff. There is just too much to keep track of with table editing, you have to match the correct number of s in each row, make sure all the tags are closed if you have embedded tables, and make sure things don't overlap in the wrong order (for example, text text text is incorrect and can cause havoc).

Actually if you are just starting out with HTML, I strongly suggest that you abandon tables and focus on CSS positioning using tags. It's a little more difficult to comprehend at first, but a little effort goes a long way and once you grasp it things are much, *much* easier to cope with in the long run. You can go back to tables once you have the hang of CSS and use them as needed or when appropriate. Tables are actually pretty simple when you just use them for what they are intended - to display a table. Using them to organize the elements of a page is where they get convoluted.

d'Elaphant, is CSS positioning new school or old school (for want of a better term)? I'm doing something wih HTML at work and the tables, while adequate at the moment, are hindering my creative side, but the IE (grr) that we use is knocking on a bit.

CSS is definitely "new school". If you are forced to worry about things looking consistent between browser versions, you may be stuck with tables. IE 5.x was dreadful when it came to CSS, so you can get things to look perfect between IE 6/Mozilla/Safari/Konqueror/Opera, then IE 5.0 or 5.5 comes along and ruins it all. There are tricks to "hide" the CSS from different browser versions, but I don't think they are worth the effort in many cases.

My own philosophy is that a web site should not look consistent on old browsers - it should just be acceptable or useable. It's not doing anyone any favors to support a buggy browser with horrible security problems like IE 5, so IMO it's acceptable to let the look of a site slide towards awkward or ugly, just so long as the basic functionality doesn't break.

while no fan of the "browser upgrade campaign" which tries to force you to use the latest browser, and more of an advocate for the "any browser campaign", d'Elephant has a point.

when you get to having to work back to support IE5.5, which was last used on windows 98, you are very much hampered by the lack of support for modern browser features like css, xhtml, xml, and a number of other developer friendly technologies.

You can now largely ignore ie5.5 for any commercial work, as many websites are now getting so they don't work at all with it and you have to use something else instead.

on a slightly wider point, try not to make your website unnecessarily flash for your purpose. so many websites get things wrong this way that it brings all the others which need advanced features into disrepute.

the worst example of this was the fool who embedded a complete website in a flash animation, and another who basically bade all his pages in hyperlinked pdf format, when all either of them needed was a simple text based site with a good colour scheme.

Also, don't forget that there are quite a few users out there with special needs. if your site only works in very high resolution, someone who needs higher screen magnification due to poorer eyesight won't be able to use it.

similarly if you do snazzy things with tables when you don't need to, they might be confusing to screen readers and braille displays.

if you still find that tables are needed, use something like frontpage to create a quick and dirty table, then cut it out, paste it into a proper web page, and remove as many of the extra parameters as you can while keeping the look.

and don't forget, if you are using a pc, check the result in multiple browsers.

you can easily use ie, mozilla and opera (free version) in windows.

in linux you are even better placed, because you can use konqueror (which uses the same render engine as mac safari), mozilla, internet explorer under wine, and various text browsers to check it all makes sense.

I have quite a list of browsers you can get over at this page:

http://www.xyroth-enterprises.co.uk/wbrowser.htm

and watch out for browser specific features. quite a few colour schemes look good in one browser and don't work at all in some others.

Cheers peeps. I should clarify that I work for HMRC ( but someone's got to) and am doing something for a local server that will be accessed via our 'Intranet' which is currently IE5 (though we're about to upgrade to Windoze XP and whichever IE comes with it. I know, I know, XP's about to be replaced. That's the British Civil Service for you!) so am doing something fairly basic, but we have no HTML editors (Notepad all the way!) so even the simple stuff requires knowing what you're doing, and I can't shake this feeling that I don't.

I'm sure there's some hidden 'randomise' code that creeps into every table!

Still, it would seem CSS is a no go so I'll just have to try harder. It's better than doing my proper job anyway.

http://www.bbc.co.uk/dna/h2g2/brunel/A999598
http://www.bbc.co.uk/dna/h2g2/brunel/A999598
http://www.w3schools.com/
http://validator.w3.org/ (posted before but worth repeating)
http://www.w3.org/People/Raggett/tidy/

A1161235

try and get them to install mozilla firefox now.

it's free, supports current standards, and means you don't need the system to be crippled until the last person has upgraded to xp.

also, it has nothing like as many bugs as ie, either on legacy systems or on the latest xp version.

it also means that you won't end up with anyone creating "ie only" pages, as your own people will moan about them first.

there are online tools which can help you lay out tables, but it depends what you want to use them for as to how you would do it.

If you can get them to install Firefox, then you should ask for the full Mozilla suite for yourself instead of Firefox. It comes with a built-in web page editor in addition to all other the features of Firefox. It's not a very good editor, but it is free and it will get you through the tables nicely. If you have Netscape 7, 6, or even 4.x already, you actually have the same web page editor built into that.

Or get Nvu which is a standalone version of the same thing that you can use with Firefox. Still free, and somewhat improved over what you find in Mozilla. http://www.nvu.com/

There's absolutely no reason to force you to do all your web editing using Notepad when there are lots of decent, free tools to choose from.

Dont let me interrupt the drift or anything, but i"m going to post a link to a copy of the page. I got around the issue by simply posting my two tables side by side with their headers in another table next to each other, (it aint pretty, but it works,) I'm going to link to a copy where I try to put them one underneath the other. Hang in.

...

http://touronights.tripod.com/TouroNights.html

Ok, ignore the bad pic link on top, the problem is with the headings and stuff for the table. In my code, I put one heading, one table, some spaces, second heading, second table.

But then it appears as 2 headings, spaces, two tables.



???????

Aha!

You are missing a closing , so it can't tell where the first table ends. If you add a just above the second heading, you'll start to get something closer to what you expect.

Right now you have

Half Back Cover

$240



Advertisement Rate- Students, Faculty, Staff


That *should* be


Half Back Cover

$240


<!-- - This is the changed part here -->


Advertisement Rate- Students, Faculty, Staff

Close the first table, and the page at least divides up correctly, but you still have some layout problems.

Your html code is a strange mix of xhtml - the "" - and elements that are not valid in either xhtml or html 4 - things like "bordercolorlight" and "bordercolordark". The "" is just entirely incorrect. If you remove all that extraneous stuff, just go with a simple with no height, width, border colors, etc, it will all fall into place. Once it's all positioned properly, then start adding the visual touches back, one by one to see the effect that they have. Try to use either xhtml or html 4 consistently - since you're working with IE 5 I suggest sticking with Html 4, that means anytime you see a "/>" you want to remove it - "" should just be "". That will make the code more consistent, easier to read, and easier to validate and troubleshoot.

I've been learning out of a book that claims xhtml is the way of the future and to do the stuff. It seems to come across in the browser, anyway. They used also, but mentioned that once xhtml takes over and css becomes used it would be antiquated.

So you're saying, (humor my thinking aloud,) that is html, and if I'm using xhtml I should skip it. But since I'm not using CSS, it makes more sense to stick with html, and leave out the <.../>

OK, can-do. And based on what you guys have said above, it doesn't sound like CSS is catching up all that fast. So I shouldn't worry about it. Especially for a webpage that will become atiquated as soon as I graduate the newspaper falls into disrepair.

But I dont get the "bordercolorlight" thing. It works- I mean, without it the borders are different shades! It must be valid in something at least! And I did copy that right out of the book.

Yes! I added and it looked, quite frankly, weird. (on table was halfway down the side of the other.) then i stuck in and the aligned vertically.

I'm going to spend the rest of the afternoon taking all the extra tags off like you said, and then checking out the results. It'll be a learning experience.

I do want it format for firefox too. Most intelligent people use it these days. Its just that I wrote the page on my laptop which currently has no 'net connection, (therefore no firefox,) and transferred it.

*sigh*

Thanks.

you might find this intresting
http://www.yellowpipe.com/yis/tools/lynx/lynxview.cgi

it is wot your page ould look like in the lynx text only web browser. I always try and preview my web pages in lynx just to check how well structered they are.

The book is essentially correct that xhtml is the way of the future, but since you are using IE 5, you're stuck in the past which is why I suggested sticking with html 4, but that does not really matter. The real problem that I saw in your web page is that sometimes you use xhtml ("") and sometimes you use html 4 ("" without the slash). Whatever you do, you should not go back and forth like that, just stick with one or the other.

Using "" is not wrong (it's that should be avoided, is the correct way of doing the same thing in the future), but there were a couple of places where you used "" with a slash at the end - that is incorrect. The slash mark where the tag stops working, so if you use it at the end of your starting point you are saying something like "start a strong emphasis at this point, but by the way I don't want anything to be emphasized" - that just makes no sense.

Here's a practical example:
This is the correct way to give something strong (bold) emphasis
This is absolutely incorrect and does nothing. The strong emphasis stops where it began.

On the other hand, tags like and are correct because they are always "empty". is a blank line, you can't have a blank line with text on it, so the blank line *always* starts and ends at the same place in the html code - there is nothing in between.

And also "it works" does not mean it is "valid". Many things that are not technically correct will still work partly because they were valid in HTML 2 or 3 then were dropped in HTML 4 or xhmtl. But you'll find in the long run that they don't always work consistently and have unintended consequences. In this case bordercolorlight works in IE 5, but by removing it the tables fell into their correct positions without needing the . This is exactly the kind of thing that CSS tries to eliminate. But again, you need to choose to go with the future or the past. Either use html 4 or xhmtl eliminate the "invalid" items, or use the older html 2 or 3 and eliminate the "future tags". I strongly recommend using html 4 or xhtml, don't bother with old things that eventually will stop working entirely even though they sort of work now.

Right. Now, is there any comprehensive guide to what are old invalid elements are?

And is there no way to use border colors in html4?

and when I tried to follow that yellowpipe link, I got

Sorry, I can only handle http://some.host/ URLs. You typed in `'.

?? ??

Try this http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php

To find the old, invalid tags, use any HTML validator service. I usually use the one at w3.org
http://validator.w3.org/
It will tell you line by line where all the invalid code is. If there is no invalid code, it gives you little badge to put on your web page.