Aligning text. Using tables or css or  ?_问答_开发者

Aligning text. Using tables or css or  ?

开发者 https://www.devze.com 2023-01-08 15:04 出处：网络

Frequently I a开发者_JAVA百科m aligning text such as: To: 07/02/2010 From: 07/02/2010 Id like it to be displayed like this:

Frequently I a开发者_JAVA百科m aligning text such as:

To: 07/02/2010

From: 07/02/2010

Id like it to be displayed like this:

To:   07/02/2010
From: 07/02/2010

So what is the quickest/easiest/best way to do this? CSS? using a few nbsp (would work if its mono spacing) or using tables. Normally if I am not in a anti-hating table mood, ill use tables.

What do you recommend?

Definitely definition list (<dl>).

<dl>
    <dt>From:</dt><dd>07/02/2010</dd>
    <dt>To:</dt><dd>07/02/2010</dd>
</dl>

/* CSS */

dl {
    overflow: hidden;
}

dt {
    width: 50px;
    float: left;
}

I'd recommend tables. It really is the best way, especially seeing as it really is tabular data there, and HTML doesn't support tab stops.

But it really is silly to avoid tables for the sake of avoiding tables. Unless you want the option later to style like so:

To:          From:
07/02/2010   07/02/2010

You could do something like this, if for some reason you didn't want to use tables:

CSS

.sideheading { width: 3em; float: left; }

HTML

<div class="sideheading">To:</div>07/02/2010
<div class="sideheading">From:</div>07/02/2010

Or use a definition list (but if the reason you are avoiding tables is due to semantics, then DLs would be avoided for the same thing).

But of course, it's about the layout, no customer or web surfer is ever going to care how you do it, as long as they can read it!

Use a definition list or white-space nowrap.

I've seen this problem before, a quick google search:

http://www.google.com/search?q=css+forms

...brought me here:

http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

...and I copypasted the HTML and CSS into this:

<html>
    <head>
        <style>
        label
        {
            width: 5em;
            float: left;
            text-align: right;
            margin-right: 1em;
            display: block
        }

        .submit input
        {
            margin-left: 4.5em;
        }
        </style>
    </head>
    <body>
        <form action="#">
            <p><label for="name">Name</label> <input type="text" id="name" /></p>
            <p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
            <p class="submit"><input type="submit" value="Submit" /></p>
        </form> 
    </body>
</html>

Looks good to me, save it in a .html and see for yourself.

Padding with  s sounds messy. How about something like this:

<span class="header">To:</span> 07/02/2010
<span class="header">From:</span> 07/02/2010

.header { display: inline-block; width: 5em;}

In this case, though, I'd actually say tables are appropriate; it does look like tabular data, with a column of headers.

This has come up at work many times and I ended up creating some styling for a 2-column table which hides borders. Technically, this is tabular data, but a table with only 2 rows and 2 columns is pretty lame considering the amount of markup needed to achieve it within spec.

I've often regretted creating the class, as now everyone uses it far too much and I have to constantly be on the lookout for it in our code reviews. If you don't anticipate that problem, it's a semantically-correct solution, and slightly more elegant than the hoops you'll jump through with DL's, spans, etc.