CODEWITHSUNDEEP
css
Anthony
Anthony

Reputation: 7300

How to do this using css

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?

Upvotes: 2

Views: 484

Answers (10)

AmbroseChapel
AmbroseChapel

Reputation: 12087

------------------------------------------------------
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.

Upvotes: 0

gix
gix

Reputation: 5797

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.

Upvotes: 10

Nick Higgs
Nick Higgs

Reputation: 1702

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.

Upvotes: 0

Gary Willoughby
Gary Willoughby

Reputation: 52498

Use tables. Tables are for tabular data.

Upvotes: 0

teedyay
teedyay

Reputation: 23521

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.

Upvotes: -2

lexx
lexx

Reputation: 637

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.

Upvotes: 0

Sampson
Sampson

Reputation: 268344

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;}

Upvotes: 1

Kon
Kon

Reputation: 27441

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.

Upvotes: 5

ryeguy
ryeguy

Reputation: 66851

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.

Upvotes: 10

Scott Vander Molen
Scott Vander Molen

Reputation: 6439

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.

Upvotes: 2

Related Questions