SHARE

Tabs – HTML Goodies

Written By

Jan 4, 2005

Use these to jump around or read it all…

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.

In order to work with tabs, you do need a command that will “force” text to a certain point. Without that, tabs are pretty much worthless and look pretty bad when displayed. Well, after reading more than I should have, I can up with a method of writing with tabs. It involves JavaScript and the tab Escape Sequence. Don’t let the name catch you off guard. It’s a greater title than what I’ll actually show you.

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.

<SCRIPT LANGUAGE=’Javascript’>

document.write(“<XMP>”)

document.write(“100 Metert400 Metert1500 Meterr”)

document.write(“110 HurdlestHigh Jumptlong Jumpr”)

document.write(“JavelinttPole VaulttShot Putr”)

document.write(“Discus”)

document.write(“</XMP>”)

</SCRIPT>

By the way…do you know what the list above represents?

Explanation

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?

Those two items, t and r are Escape Characters. The other text is methods that would otherwise be difficult inside of a JavaScript environment. Notice there are no spaces. None are needed. Just plop in the backslash and you get the tab or the return.

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.

document.write

Let’s start with the basics. The document.write command is a very basic JavaScript statement that writes whatever is in the parentheses, and then double quotes, to the page. It writes it exactly – no changes.

IMPORTANT! When using the document.write statement, the code inside may not contain any quote or apostrophe. In JavaScript, those items mean something and it will mess up your page by throwing errors. So if you run your own script and get an error, check first to see if you have a quote or an apostrophe.

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.

XMP

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?

Just like all other JavaScript I’ve given you, using this one is a simple matter or copying at least one of the docuemnt.write statements and pasting it again and again and changing out the text you want.

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.