Tab-like behaviour in HTML/CSS

GEC: Discuss gaming, computers and electronics and venture into the bizarre world of STGODs.

Moderator: Thanas

Post Reply
User avatar
Stark
Emperor's Hand
Posts: 36169
Joined: 2002-07-03 09:56pm
Location: Brisbane, Australia

Tab-like behaviour in HTML/CSS

Post by Stark »

Probably a dumb question; how do I have Word-like tab behaviour in HTML? I have some data I need to display with a couple of absolute location tabs and a right-margin, right-justified tab. Bounty suggested I use tables, but I'm not clear on how to position and set fixed cell sizes. Apparently you can 'width' a 'float' to have a similar effect, but again I'm not clear what this would look like.
User avatar
Starglider
Miles Dyson
Posts: 8709
Joined: 2007-04-05 09:44pm
Location: Isle of Dogs
Contact:

Re: Tab-like behaviour in HTML/CSS

Post by Starglider »

Stark wrote:Probably a dumb question; how do I have Word-like tab behaviour in HTML? I have some data I need to display with a couple of absolute location tabs and a right-margin, right-justified tab. Bounty suggested I use tables, but I'm not clear on how to position and set fixed cell sizes. Apparently you can 'width' a 'float' to have a similar effect, but again I'm not clear what this would look like.
Set absolute widths using width="10px", set relative widths using width="20%", set alignment using align="right", merge cells using colspan="3" and rowspan="2" (example values), all in the td tag. I could give you more specific instructions if you were more specific about what you want. Tables are terribly unfashionable these days, you're supposed to use div tags, but those are frankly harder to use and probably unnecessary.

Alternatively if you are feeling cheap you could just use a pre tag and manually align your monospaced text.
User avatar
Stark
Emperor's Hand
Posts: 36169
Joined: 2002-07-03 09:56pm
Location: Brisbane, Australia

Re: Tab-like behaviour in HTML/CSS

Post by Stark »

LOL I want to avoid using pre. :) I've noticed peopel really seem to consider tables unfashionable, but I'm even less familiar with the float stuff than I am with tables. I'll bang something up this afternoon. Do you still have to add &nbsp in an empty cell for it to show up, or can I use fixed-width empty cells as spacers?
User avatar
Starglider
Miles Dyson
Posts: 8709
Joined: 2007-04-05 09:44pm
Location: Isle of Dogs
Contact:

Re: Tab-like behaviour in HTML/CSS

Post by Starglider »

Stark wrote:Do you still have to add &nbsp in an empty cell for it to show up, or can I use fixed-width empty cells as spacers?
You can use style="empty-cells:show" in the table tag if you like, though that's only relevant if you have visible cell borders.
User avatar
Dooey Jo
Sith Devotee
Posts: 3127
Joined: 2002-08-09 01:09pm
Location: The land beyond the forest; Sweden.
Contact:

Re: Tab-like behaviour in HTML/CSS

Post by Dooey Jo »

If you have spreadsheet data or something, there's no reason why you shouldn't use a table for that. That's exactly what they're for. What you shouldn't use them for is page layout.
Image
"Nippon ichi, bitches! Boing-boing."
Mai smote the demonic fires of heck...

Faker Ninjas invented ninjitsu
User avatar
Stark
Emperor's Hand
Posts: 36169
Joined: 2002-07-03 09:56pm
Location: Brisbane, Australia

Re: Tab-like behaviour in HTML/CSS

Post by Stark »

Thanks Starglider; I finally got around to doing this and fixed-width tags work fine. Why the hell didn't any of those goddamn 'HTML tables' websites I visit mention the damn width tag? Grrr. :)

However, the first cell of the table is indented a few pixels from the rest of the text in the body. I've tried setting cellpadding and border to 0 but it doesn't move it back to the margin. Any ideas?
User avatar
Eleas
Jaina Dax
Posts: 4896
Joined: 2002-07-08 05:08am
Location: Malmö, Sweden
Contact:

Re: Tab-like behaviour in HTML/CSS

Post by Eleas »

Stark wrote:Thanks Starglider; I finally got around to doing this and fixed-width tags work fine. Why the hell didn't any of those goddamn 'HTML tables' websites I visit mention the damn width tag? Grrr. :)

However, the first cell of the table is indented a few pixels from the rest of the text in the body. I've tried setting cellpadding and border to 0 but it doesn't move it back to the margin. Any ideas?
First of all, a golden fact from which all else flows: do you have a proper doctype declaration? If not, don't even bother trying to put it in exact per-pixel terms; the browser will default to quirks mode no matter what.
Björn Paulsen

"Travelers with closed minds can tell us little except about themselves."
--Chinua Achebe
User avatar
Stark
Emperor's Hand
Posts: 36169
Joined: 2002-07-03 09:56pm
Location: Brisbane, Australia

Re: Tab-like behaviour in HTML/CSS

Post by Stark »

Whut? I've got css, proper headers, I'm using proper divs, the text is in the body and all the other <p>s and styled <p>s line up fine. If the table has no border (but is operating under the 100px indent from the body style) why is it slightly MORE indented?
Post Reply