How to do this using css

Question

I'm currently working on a web application and I need to display some fields in a tabular way. For example:

------------------------------------------------------
First Name: John   Last Name: Smith   Age: 26
------------------------------------------------------
Town: Madrid       Country: Canada   Colour: Blue 
------------------------------------------------- 
etc  
-------------------------------------------------

The fields need to be aligned (in the above example 'Town' should be exactly below 'First Name', 'Country' should be below 'LastName' etc). I was thinking of using an html table (and putting a fieldname/value in each cell) but after everything I've read on this site it looks like I should be using css as the data I want to display is not really tabular. I just want it to look tabular. I can't find a simple way of doing this with css though. Any ideas?

Answer 1

Semantically, you might want to use a definition list. You can specify a width for the dt and dd elements to line them up and then float them to the left.

Answer 2

That data looks tabular to me. I suggest using tables. Nobody forbids you from using tables when required.

But if you still insist on using CSS, I suggest using a CSS framework like 960.

Answer 3

I think you're a bit confused as to when to use CSS and when to use tables. When you have that much data, you probably should be using tables. It's fine to position the actual BOX that it's in using CSS, but from what I can see the data inside the box should be inside a table.

Answer 4

This is a actually a great opportunity to use a HTML table. This is exactly what HTML tables are there for. The data looks pretty tabular to me.

Answer 5

In these cases fumbling with CSS is a PITA and I would nearly always suggest a table. As Scott already said, semantically a definition list would be good choice:

<dl>
  <dt>First Name</dt><dd>John</dd>
  <dt>Last Name</dt> <dd>Smith</dd>
  <dt>Age</dt>       <dd>26</dd>
  <dt>Town</dt>      <dd>Madrid</dd>
  <dt>Country</dt>   <dd>Canada</dd>
  <dt>Colour</dt>    <dd>Blue</dd>
</dl>

You could style it like this:

dl {
    margin: 0;
}
dt {
    float: left;
    background: #eee;
    width: 10%;
    margin: 0;
    white-space: nowrap;
    padding: 0.25em;
}
dt:after {
    content: ':';
}
dd {
    float: left;
    width: 20%;
    margin: 0;
    padding: 0.25em;
}

To get X values per row aligned you have to explicitly specify the width for each element which might not always be that practical. Though to get a new row you could work with the :nth-child selector (or use an attribute for older browsers) and put clear: left; in its definition.

Answer 6

I may be slain by the table-dancers for this response, but parsimony is worthless when it comes to development. It's easier to use the <b> tag for bolding than it is to use <strong>. It's easier to use <i> for italicizing than it is to use <em>.

When doing layouts, it's easier to use archaic methods like table-layouts than it is to do things right, and use semantically proper markup.

The right way is not always the easiest way.

That being said, chose an appropriate base to start from. Some here have suggests the definition-lists, which I don't necessarily disagree with. You could user practically any list, really.

Then style your items to your liking, using float and inline-display for block elements.

<ul>
  <li class="fname">
    <label>First Name</label> <input type="text" name="fname" />
  </li>
  <li class="lname">
    <label>Last Name</label> <input type="text" name="lname" />
  </li>
</ul>

You could then set then float these two li's:

ul.userData {margin:0;padding:0;}
ul.userData li {float:left}

And even set specific widths for each li, since they have their own classes:

li.fname {width:100px;}
li.fname label {width:50px;margin-right:10px;}
li.fname input {width:40px;}

Answer 7

Although using nested tables for everything is defiantly a bad idea don't be scared to use them when what you want to show is a table. Each mark-up tag was created for a reason and the table tag was created for this purpose.

If you want to get a better idea of mark-up best practices and how to use CSS I can't recommend this book enough:

http://www.amazon.co.uk/Bulletproof-Web-Design-Flexibility-Protecting/dp/0321509021/ref=sr_1_1?ie=UTF8&s=books&qid=1234824362&sr=8-1

It was the book that made CSS really click for me and improved the standard of sites that I was creating no end.

Remember, when in doubt about which HTML tag to use think about its name and what that might relate to.

Answer 8

I'd go for tables. Use <th> for your headers and <td> for your details:

<table>
    <tr>
        <th>First Name:</th>
        <td>John</td>
        <th>Last Name:</th>
        <td>Smith</td>
        <th>Age:</th>
        <td>26</td>
    </tr>
    <tr>
        etc.

Answer 9

Use tables. Tables are for tabular data.

Answer 10

To use a table to achieve this layout would be a failure to separate prentation from content. Your content here is a list of key/value pairs; the fact that you want to display it as a 3 by X grid does not make it tabular.

Consider a screen reader user attempting to navigate such a table; to get to the next key/value pair he has to decide whether to go right or down. As there is no difference between the horizontal and vertical relationship between the elements, he has no way to make a decision and will become disorientated and have to guess.

There are options with regard to how to mark this up in a semantically valid manner, but I would favour using an unordered list:

<ul class="details">
    <li>First name: John</li>
    <li>Last Name: Smith</li>
    <li>Age: 26</li>
    <li>Town: Madrid</li>
    <li>Country: Canada</li>
    <li>Colour: Blue</li>
</ul>

CSS:

.details
{
    width:600px;
    margin:0;
    padding:0;
}
.details li
{
    float:left;
    width:200px;
    border-bottom:1px solid #333;
    list-style-type:none;
}

If there is a chance that the values could wrap, you'll either have need to fix the height of the list items, or clear the left float on every third item.

Answer 11

------------------------------------------------------
First Name: John   Last Name: Smith   Age: 26
------------------------------------------------------
Town: Madrid       Country: Canada   Colour: Blue 
------------------------------------------------------

is there just one person being displayed in this way? If so then no, semantically it's not a table, it's a list.

Here's my rule: tabular data is data whose meaning you can only know by its coordinates.

First name             Last Name                   Age
------------------------------------------------------
John                   Smith                        26
------------------------------------------------------
Jane                   Jones                        23
------------------------------------------------------

What does "23" mean in the above table? It means the Age of Jane Jones, but you can only tell that if you know it's in the Jane Jones row under the Age column, and you know it's not the number of her house or the number of years she's worked here. Or, of course, John Smith's age.

Age: 26

is a key-value pair.