Reputation: 3359
I have this kind of table:
<table>
<tr><td>Count A</td><td>12</td></tr>
<tr><td>Count B</td><td>8</td></tr>
</table>
I'm new to CSS but from what I've read so far I'm assuming that the html should be:
<div id="counts-container">
<div class="count">
<div class="count-label">Count A</div><div class="count-number">12</div>
</div>
<div class="count">
<div class="count-label">Count B</div><div class="count-number">8</div>
</div>
</div>
It seems to me that I'm on the right track but I'm not sure about how to write the CSS for this html structure. Any suggestion I appreciate.
Ok, so I just want to confirm with you guys. This table should be:
<table>
<tr><th>Count A</th><td>12</td></tr>
<tr><th>Count B</th><td>8</td><tr>
</table>
Upvotes: 3
Views: 293
Reputation: 1894
counts-container becomes your table, count becomes your row, count-label and count-number become your column so you have to write css like this
#counts-container,
.count
{
width:400px;
float:left;
}
.count-label
{
width:150px;
float:left;
}
.count-number
{
width:250px;
float:left;
}
{#} for id and . for class
Upvotes: -1
Reputation: 15905
In your case using a <table>
is ok - just structure it correctly:
<table>
<tr><th>Count A</th><td>12</td></tr>
<tr><th>Count B</th><td>8</td></tr>
</table>
<th>
being the table header cell.
If you are confused about when to use tables and when not I suggest you to consult the specification http://www.w3.org/TR/html4/struct/tables.html
Upvotes: 1
Reputation: 324640
You probably should be using a <table>
tag. Sites that say they're bad really mean "abusing them for formatting reasons instead of using padding and margins is bad".
But if you're set on using <div>
s, try this:
#counts-container {display: table;}
.count {display: table-row;}
.count-label, .count-number {display: table-cell;}
Upvotes: 0
Reputation: 103358
If this is tabular data than just go ahead and use a table
. Thats what that HTML element is supposed to be used for.
div
's are for page layout, table
's are for displaying tabular data.
http://webdesign.about.com/od/tables/a/aa122605.htm
Upvotes: 1