SBel
SBel

Reputation: 3359

How to Style this table-like structure

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

Answers (4)

Sonal Khunt
Sonal Khunt

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

easwee
easwee

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

Niet the Dark Absol
Niet the Dark Absol

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

Curtis
Curtis

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

Related Questions