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 th
s for the first columns cells to be able to style it.
I even think th
s 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
精彩评论