CODEWITHSUNDEEP
css
Bob
Bob

Reputation: 79

Making a Table with CSS

What's the best way to use divs to create a table effect like this html table:

<table width="100%">
    <tr>
        <td align="right">
            Name: 
        </td>
        <td align="left">
            Jennifer
        </td>
    </tr>
    <tr>
        <td align="right">
            Age: 
        </td>
        <td align="left">
            19
        </td>
    </tr>
</table>

No matter how I do it, my problem is always the text alignment. All this needs to be in another div that has a specific width and floats right and this table would be inside "centered". Thanks in advance.

Upvotes: 0

Views: 213

Answers (3)

Billy Moon
Billy Moon

Reputation: 58619

I would do HTML like this:

<div class='lefty'>Name:</div><div class='righty'>Jenifer</div>
<div class='lefty'>Age:</div><div class='righty'>19</div>

and CSS like this:

div{
    width:50%;
    float: left
}
.lefty{
    text-align: right;
}
.righty{
    text-align:left;
}

fiddle: http://jsfiddle.net/SbXdG/

Upvotes: 0

Ben Rowe
Ben Rowe

Reputation: 28721

Based on your sample a definition list is another semantic option:

<dl>
  <dt>Name</dt>
  <dd>Jennifer</dd>
  <dt>Age</dt>
  <dd>19</dd>
</dl>

You could then use display: table-cell to give the data table like look & behaviour.

Upvotes: 1

Demian Brecht
Demian Brecht

Reputation: 21378

Use the table.

If it ain't broke don't fix it. Use elements that make sense for the data that you're trying to display. In this case, the table makes perfect sense.

Upvotes: 2

Related Questions