CODEWITHSUNDEEP
htmlcssxhtml
Mike
Mike

Reputation: 2922

What's a good way to handle this simple example in CSS?

Let's say I have the following layout on some pages:

               Title: Some Title   
              Author: Some Author   
Author Date of Birth: Date of birth

Notes:

What would be the most appropriate method to apply in this situation? I can think of a few options (assume CSS applied in external style sheet):

Table

Simple, easy, but I'm not sure this would be considered a good use of tables. 

<table>
 <tr>
  <td>Title</td>
  <td>Some Title</td>
 </tr>
</table>

Div + Classes

I feel like this is a case of divitis and classitis rolled into one.

<div class="information">
 <div class="title">Title</div><div class="value">Some Title</div>
</div>

Container Div

This feels more like the right path but I'm not sure.

<div class="information">
 <strong>Title</strong> <span>Some Title</span>
</div>

Suggestions?

Upvotes: 3

Views: 91

Answers (6)

user887958
user887958

Reputation:

Definition list would be semantically correct.

  <dl>
     <dt>Title:</dt>
     <dd>Some Title<dd>

     <dt>Author:</dt>
     <dd>Some Author</dd>

     <dt>Author Date of Birth:</dt>
     <dd>Date of birth</dd>
  </dl>

See W3C for more details - http://www.w3schools.com/tags/tag_dl.asp

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

I think a good semantic choice here is the dl (description list) element.

http://developers.whatwg.org/grouping-content.html#the-dl-element

<dl>
    <dt>Title</dt>
    <dd>Some Title</dd>

    <dt>Author</dt>
    <dd>Some Author</dd>

    <dt>Author Date of Birth</dt>
    <dd>Date of birth</dd>
</dl>

Upvotes: 5

Matt
Matt

Reputation: 7249

I think you're right in you saying you want to use a table, but don't want to use. In this case i don't think a table is correct either. I personally only use tables if i need to organize data nicely. Because you have so much, a bunch of floated divs everywhere is more of a hassle then just using a table.

Because this is only two columns I would say use use two divs with floats or use two spans, instead of strong use a span and then style it with css.

Upvotes: 1

Lenar Hoyt
Lenar Hoyt

Reputation: 6159

A table is a means of arranging data in rows and columns.

And this is what you are doing.

Upvotes: 0

PeeHaa
PeeHaa

Reputation: 72672

This is clearly a good example of when to use tables.

It's tabular data.

Use ths for the first columns cells to be able to style it.

I even think ths are bold by default. Not sure about all browsers though so wouldn't hurt to style them bold to be sure :).

Upvotes: 1

sg3s
sg3s

Reputation: 9567

Use a table, this is one of the few instances where using a table actually isn 't all that wrong. You're not using it for layout but text markup.

Then apply a class to every first column and in css make that class have text-align: right; which applies to that column.

Upvotes: 2

Related Questions