Many people wonder, is it possible to make tabs in HTML? And if it is, how can you do it? While there is no HTML tab tag (like the bold tag or the italic tag), there are many ways to get a tab-like effect.
You can put tab characters in your HTML directly if you use what’s called “preformatted” text.In HTML, surround text that you want “preformatted” in a pair of “<pre>” and “</pre>” start and end tags. Any spacing characters you put between those tags (including tab characters) will show up just as you entered them. The result looks something like this:
Last First Date of Birth Doe Jane Feb. 19, 1964 Schmoe Joe June 2, 1968
Unless you changed your browser settings, you should see this in a fixed-width font, different from the font in the rest of your page. In a fixed-width font, text on different lines will line up. Otherwise, the text can get ragged, as in this example:
Last First Date of Birth Doe Jane Feb. 19, 1964 Schmoe Joe June 2, 1968
Here is the HTML code I used to get these effects:
<pre> Last First Date of Birth Doe Jane Feb. 19, 1964 Schmoe Joe June 2, 1968 </pre>
for the first one, and:
<pre style="font-family: Verdana, Arial, sans serif;"> Last First Date of Birth Doe Jane Feb. 19, 1964 Schmoe Joe June 2, 1968 </pre>
for the second.
Otherwise, you can’t put tabs in HTML directly. It’s not built for it, because HTML is a language for expressing content, not formatting. This is why many designers have a love-hate relationship with HTML.
However, you can do something that looks a lot like a tab. In fact, there several ways to make something that looks like a tab in HTML.
In fact there is more than one way to get tables to work. Here are two examples of table with the same information in it as in the preformatted example:
Table Example 1
| Last | First | Date of Birth |
| Doe | Jane | Feb. 19, 1964 |
| Schmoe | Joe | June 2, 1968 |
Table Example 2
| Last | First | Date of Birth | ||
| Doe | Jane | Feb. 19, 1964 | ||
| Schmoe | Joe | June 2, 1968 |
With the table, you can set the font any way you like, which is why this text looks more like the text on the rest of this page, unlike the preformatted text.
Here is what the HTML code looks like:
Table Example 1
<table> <tr><td width="100">Last</td><td width="100">First</td><td width="300">Date of Birth</td></tr> <tr><td>Doe</td><td>Jane</td><td>Feb. 19, 1964</td></tr> <tr><td>Schmoe</td><td>Joe</td><td>June 2, 1968</td></tr> </table>
Table Example 2
<table> <tr><td>Last</td><td> </td><td>First</td><td> </td><td>Date of Birth</td></tr> <tr><td>Doe</td><td> </td><td>Jane</td><td> </td><td>Feb. 19, 1964</td></tr> <tr><td>Schmoe</td><td> </td><td>Joe</td><td> </td><td>June 2, 1968</td></tr> </table>
It may look like a lot, but it’s really not. Even basic HTML editors should be able to help you with this. Even creating tables by hand isn’t too bad (it’s my preferred method), just a bit time-consuming. (So why do I do it? It gives me more control over the final formatting and how fast my pages will download.)
Thanks to Richard for the Table 1 Example code! I put it first because it is nicer than than my original version, which is now in Table Example 2.
This one’s a bit of a cheat, but it works! The <dd> tag is for formatting definitions. But it also will create a line break and make a tab! Here’s an example of a couple of paragraphs that are formatted with the <dd> tag to make a nice tab at the start of the line.
And here’s the code:
<p><dd>Elit immitto adsum gravis valde occuro quadrum hendrerit ad tego imputo ad quidne. Verto gilvus hendrerit odio velit lenis sino duis suscipit molior odio, dolore fere. Nonummy feugiat cui, ingenium acsi vulputate. Et virtus facilisi sed luctus singularis, hendrerit epulae epulae. </dd></p> <p><dd>Illum rusticus, tincidunt, ut exerci ea feugiat torqueo. Lenis dolore vulputate gemino iriure vel esse vel. Nimis et enim multo, comis letalis abigo wisi duis tum turpis refero, lobortis ingenium. Aptent vel, ibidem augue populus, augue et. </dd></p>
Thanks to J Smith for this trick! I would never have thought of it.
One bit of HTML code I used in the table example is the “non-breaking space,” encoded as in HTML. This just gives you some space. Combined with a line break, <br>, you can create some tab-like effects. For example, you can:
Indent a line
or put extra space in a line,
but you can’t make text on different lines line up, like you can with the table or
<pre> tag. In case you want to do this, here’s how I did it:
<p> Indent a line<br><br> or put extra space in a line,<br><br>
To make designers happy, there’s a relatively new HTML technology available, called Cascading Style Sheets (CSS). Actually, it’s been around long enough for some very good books to be written about it. It is also incredibly popular on the web, and appears in many web pages today.
In fact, there’s a CSS stylesheet built into this page. If you look at the page source you’ll be able to see it. (Go to the View menu on your browser and look for a menu item called Source, Page Source, or similar.) The stylesheet for this page looks like this:
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, sans serif;
}
// -->
</style>
It says that I want you to see my page on your screen in the font Verdana (if you have it), or Arial (if you don’t have Verdana) or whatever sans serif font you’ve set as a default, if you don’t have Verdana or Arial.
In addition to specifying fonts, CSS can also (in theory) be used to specify where text should appear on the page, and to specify how whitespace (including tabs) should appear. This can be used to specify “tabs”. Unfortunately, not all browsers support these features, so you can’t count on them to work. A good source on formatting whitespace using CSS is the article CSS Tip: Adding Whitespace To Text at NetMechanic.
One way to use CSS that works on some recent browsers is to make indents. For example, you can:
Indent the whole paragraph...
Indent the first line of a very long paragraph. To illustrate, this paragraph just runs on and on. I need to keep adding useless words so that it will wrap in your browser window. Mary had a little lamb whose fleece was white as snow, and everywhere that Mary went that lamb was sure to go... and I hope that’s enough words that the line wraps around in your browser.
Indent all but the first line in a long paragraph. Like the last example, this paragraph has to run on and on so that it will wrap in your browser window. ’Twas brillig and the slithey toves did gyre and gimble in the wabe; all mimsy were the borogroves, and the mome raths outgrabe...Whew! I hope it’s wrapped by now.
If you didn’t see what I said you should see, then your browser doesn’t support these CSS features. On my Windows system, for example, Netscape displays properly, but Internet Explorer and Mozilla Firefox don’t.
Here’s the stylesheet that let me do all that:
<style type="text/css">
<!--
/* Indent whole paragraph */
p.indent {
margin-left: 1.5em;
}
/* Indent the first line only */
p.firstindent:first-line {
margin-left: 1.5em;
}
/* Indent all but the first line (have to make indent negative for the first line) */
p.restindent {
margin-left: 1.5em;
}
p.restindent:first-line {
margin-left: -1.5em;
}
// -->
</style>
You can also use CSS code directly, without using a stylsheet. I did that with this paragraph, using an example provided to me by Bojidar (thanks, Bojidar!). Here’s how it’s coded in HTML:
<p style="text-indent: 30px;" align="justify">You can also use CSS code directly, without using a stylsheet. I did that with this paragraph, using an example provided to me by Bojidar (thanks, Bojidar!). Here’s how it’s coded in HTML:</p>
There are web sites and many, many books about CSS, including how to use different positioning schemes. They take more work up front, but (when the browser supports them) they offer the most control by far.
If you don’t mind using a fixed-width font, or if you don’t need the text to line up, then use preformatted text! It’s easy and will get the job done. If not, use tables. They are flexible, very useful and well worth learning about. Finally, if you really need things to look right, and you know that the people viewing your site will use browsers that support CSS (or if you are trying to build for the future and want to know what the next generation technology is), then use CSS. You may be frustrated at not being able to display your page properly in all browsers yet, but browser compliance is improving all the time. (Also, I strongly recommend learning about CSS even if you don’t want to use it for tabs.)
For online tutorials about HTML, CSS, and much more, try the W3C Schools site.
Why did I make a single-page web site about making tabs in HTML? Well, it’s because I have another web site about a program I wrote. Part of the program is a tabbed dialog (like the “Monitor Properties” dialog for Windows), and one of the tabs is called the “HTML Tab,” because it is a tab that displays HTML. Unfortunately, lots of people were coming to my site to learn about making tabs in HTML and were getting frustrated. I was also getting frustrated, because it messes up my statistics. So I made this page.