Making a ‘Tab’ in HTML

Yesterday we had a silly problem crop up in our team. We had a mail notification sent for a particular action in our application. After a point when evrything seemed working fine, we noticed that the mail body needed to be formatted somehow to make it look better and more readable. Then this whole problem of having a tab seq. on the mail body showed up. All we could implement was HTML to format the text.

So here are my findings for the same…so that next time me or you whosoever faces something like this has a handy solution for the same:

1. Preformatted

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:

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.

2. Tables

You can use a html table so that everything you put within the set of rows(<tr>) and columns(<td>) shows up the same way. You can very well hide the table borders to show the text alone.

3. Using the <dd> Tag 

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. The way to use the tag is:

<p><dd> Put your text here..</dd></p>

4.  &nbsp;, The Non-Breaking Space

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.

Advertisements

~ by Neha Sinha on January 31, 2008.

23 Responses to “Making a ‘Tab’ in HTML”

  1. came across this – was looking for references of javascript usage on modifying css :hover – FYI, you can use ascii tab character (&#x0009) instead – most html editors (other than frontpage) use this instead of or nbsp –

  2. @Sai: Thanks Sai !!! I had not played with Ascii Characters yet but this one sounds really interesting. Your inputs are really valuable.

  3. I was converting a document from HTML to MS Word and the ASCII characters worked for me. Thanks Sai!!!

  4. Came to read tab in html…but found a amazing web design…cheers 😉

  5. @Noman : Thank ya 🙂

  6. neha…
    thx for tab things…

    Regards,
    YOGI

  7. thx

  8. thanks!!!!!
    helped me a LOT 🙂

  9. Good Job ! Helped me real quick….

  10. neha ji aapne html seekhne walon ke liye bahut hee achchhe site banai hai. dhanyawad.

  11. this is freaking awesome..

    u made my day..

    thanx ! 🙂

  12. thnx i was d beginner & u helped me a lot…

  13. Thanks, i loved it & helped a lot. but could you explain a more about tables…thanks again..:D

  14. neha ji aapne html seekhne walon ke liye bahut hee achchhe site banai hai. dhanyawad.

  15. […] Making a ‘Tab’ in HTML January 200813 comments 3 […]

  16. […] Yesterday we had a silly problem crop up in our team. We had a mail notification sent for a particular action in our application. After a point when evrything seemed working fine, we noticed that the mail body needed to be formatted somehow to make it look better and more readable. Then this whole problem of having a tab seq. on the mail body showed up. All we could implement was HTML to format the text. So here are my findings for the same…so … Read More […]

  17. Thanks for this! I’m quite new to HTML and im trying to learn more, but would u be able to explain how I would do this:
    im using HTML to type hyperlink texts and i don’t want the text to lean exactly far left according to slice, need to control my text just I could in microsoft words, how would I do it. Sorry if this seems like a silly question. But thanks again so much!

  18. I am trying to create a custom facebook page with tabs. Anyone that can help me?

  19. Thanks Neha for this tip.. I am an electrical engg. and can hardly remember all the CSS/HTML tricks so I often resort to googling and your site helped me while I was making my own wordpress theme ! thanks

  20. Thanks neha…

  21. Highly descriptive post, I liked that a lot.

    Will there be a part 2?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: