Page 1 of 1

Tab-like behaviour in HTML/CSS

Posted: 2009-06-03 07:30pm
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.

Re: Tab-like behaviour in HTML/CSS

Posted: 2009-06-03 07:42pm
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.

Re: Tab-like behaviour in HTML/CSS

Posted: 2009-06-03 07:44pm
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?

Re: Tab-like behaviour in HTML/CSS

Posted: 2009-06-03 07:54pm
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.

Re: Tab-like behaviour in HTML/CSS

Posted: 2009-06-03 08:00pm
by Stark
Cool, it won't matter then, since I don't want the table borders to be visible.

Re: Tab-like behaviour in HTML/CSS

Posted: 2009-06-04 06:58am
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.

Re: Tab-like behaviour in HTML/CSS

Posted: 2009-06-05 05:45pm
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?

Re: Tab-like behaviour in HTML/CSS

Posted: 2009-06-05 06:38pm
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.

Re: Tab-like behaviour in HTML/CSS

Posted: 2009-06-05 06:42pm
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?