Tabs - HTML Goodies
If you have as many reference books as I do then you need to stop buying reference books. I think I'm single-handedly keeping the computer book market up and running.
Furthermore, if you have as many reference books as I do, then you have no doubt looked for a way to work with tabs in HTML. No luck, right? There isn't even line under "tabs" in the back of the books.
I guess the main reason is that HTML is text-based so that a "tab" isn't carried along with the text much like extra spaces and carriage returns. Neither shows up in the display but shows up nicely in the code itself.
In my research, I received some letters that people were creating table formats to act as tabs. It's a good idea and it works, but it's also pretty labor intensive. Others told me they created a tabbed layout, copied and pasted it into their HTML document and then surrounding it with the <PRE> or <XMP> tags.
A Tab Example & Code
Here's a series of words set to tabs.
And here's the code that did it. See if you can pick out the tabs.
document.write("100 Meter\t400 Meter\t1500 Meter\r")
document.write("110 Hurdles\tHigh Jump\tlong Jump\r")
document.write("Javelin\t\tPole Vault\tShot Put\r")
By the way...do you know what the list above represents?
Looking at the code as opposed to the list, you can see the text that appeared on the page, but did you see the tab and the carriage return? Look again. The tab is represented by "\t" and the return is represented by "\r".
See it now?
You might notice that in the fourth document.write statement there are two tab commands. The reason was, just like normal tabs, the first word was shorter than those above so I needed an extra tab to force the second bit of text over to the tab setting created by the longer words in the lines above.
Exception to the rule: If you simply cannot live without a quote, the Escape Character \" will give you one.
IMPORTANT! The document.write statement must stay all on one line. It can be a line that goes on for miles but still must be only one line. Period.
Or PRE. Either one will do the trick.
I know I said earlier in the tutorial that using the PRE or XMP tag didn't work because the tabs often didn't transfer correctly - especially if you're using a non-block font. However, this is different. In this case we do have the ability to force tabs. In just surrounding text with PRE, we do not.
If you ran this script without the XMP tag, the tabs would not appear. All of the text would run together. You would get angry and call my mother a bad name. You would then look at your source code and see that the code is perfectly tabbed out. Remember that extra spaces and carriage returns in the code do not transfer to the display. That's why all of the text runs together. By sticking in the PRE or XMP tags, you transfer the spaces to the display. In this case it works because the text in the code is forced to tab. Just copying and pasting tabbed text is not transferring the forced tabs. Get it?
After you get all the text in there, you'll probably see the need for a second tab to force text to line up. Just go back in and add another \t. Remember also that the text will not jump to the next line unless you make a point of adding the \r to force it to do so.
Go nuts you tab fans. This is a solid way to create tabbed tables without going to all the extra coding of actually setting up a table.
Oh, and in case you're wondering, that tabbed text above represents the ten events in the Olympic Decathlon. I plan to compete in 2002.