开发者

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

开发者 https://www.devze.com 2023-03-28 16:19 出处:网络
Let\'s say I have the following layout on some pages: Title: Some Title Author: Some Author Author Date of Birth: Date of birth

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:

  • Left side text is right-aligned and bold.
  • Used on several different pages.
  • The right side can contain input controls at some point.

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开发者_如何学Python 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?


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>


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.


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.


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


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

And this is what you are doing.


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

0

精彩评论

暂无评论...
验证码 换一张
取 消