CODEWITHSUNDEEP
htmlcss
domino
domino

Reputation: 7345

creating the same thing with divs as tables

I started looking into CSS more deeply and decided I would like to convert my site's html that mainly consists of tables to divs.

I'm trying to accomplish the same thing with divs as with tables on this test page. But I'm having a few problems:

  1. Couldn't make columns
  2. Vertical text alignment

How far I've gotten: table vs div

Code:

 <style type="text/css">


body {
background-color:#000;
}


 /* TABLE CSS */
 td {
    font-family: Tahoma; 
    font-size: 12px;

}
.line {
   border-collapse:separate;
   border:1px solid #222222;
   border-spacing:1px 1px;
   margin-left:auto;
   margin-right:auto;
   background-color: #000000;
   padding: 1px;
   width:400px;

}
.topic {
    background-color:#3C0;
    font-weight: bold;
    height: 23px;
    color:#FFF;
    text-align:center;
}
.row {
    background-color: #111111;

    border-bottom: 1px solid black;
    color: #ffffff;
    height:12px;
    line-height:21px;
    padding:0px; 
}
.row:Hover {
    background-color: #252525;
}

/* DIV CSS */
div.line {
   border-collapse:separate;
   border:1px solid #222222;
   border-spacing:1px 1px;
   align:center;
   background-color: #000000;
   padding: 1px;
   width:400px;

}
div.topic {
    background-color:#3C0;
    font-family: Tahoma; 
    font-size: 12px;
    height: 23px;
    font-color:#FFF;
    text-align:center;

 }
div.row {
    background-color: #111111;
    border-bottom: 1px solid black;
    color: #ffffff;
    padding:6px; 
    font-family: Tahoma;
    font-size:12px;

}

div.row:Hover {
    background-color: #252525;
}

</style>
<body>


<table class="line">
  <tbody>
    <tr>
      <td class="topic" colspan="3">Table</td>
    </tr>
    <tr class="row">
      <td width="20%" align="left">Test</td>
      <td width="20%" align="center">1</td>
    </tr>
    <tr class="row">
      <td align="left">Test</td>
      <td align="center">2</td>
    </tr>
  </tbody>
</table>
 <p>
 <div class="line">
 <div class="topic">Div</div>
 <div class="row">Test</div><div class="row">1</div>
 <div class="row">Test</div><div class="row">2</div>
 </div>
</p>

Upvotes: 1

Views: 4744

Answers (5)

Šime Vidas
Šime Vidas

Reputation: 185883

Here you go:

HTML:

<div id="wrap">
    <h2> Div </h2>
    <div class="section">
        <div> Test </div>
        <div> 1 </div>
    </div>
    <div class="section">
        <div> Test </div>
        <div> 2 </div>
    </div>
</div>

CSS:

#wrap {
    border: 2px solid #333;
    padding: 2px;
}

h2 {
    background: green;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 4px 0;
}

.section {
    overflow: auto;
    margin-top: 2px;
}

.section > div {
    float:left;
    width: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #333;
    color: white;
    padding: 4px 0;
}

.section > div + div {
    text-align: center;
    border-left: 2px solid black;
}

Live demo: http://jsfiddle.net/jNQrM/1/

Upvotes: 1

Curtis
Curtis

Reputation: 103348

It's good to see that you are converting tables into divs, however make sure you only do this where necessary.

If the data on the page is tabular, then it makes sense for this to be put in a table element.

Div's are for layout and structure, table's are for displaying tabular data.

A collegue of mine once spent ages building a forum out of divs which followed a table structure. This was all because he'd been told "tables are bad, use divs and CSS". It's important to remember this is only referring to layout structure.

If your structure has rows and columns, then use a table. tables are still valid useful HTML elements, and are far from deprecated.

Upvotes: 5

dkg
dkg

Reputation: 1775

Take a look to the css display property.

.line {
display: table;
}

.row {
display: table-cell;
}

But you should get some problems with internet explorer. In that caase you could use display: inline; with a zoom:1;

Upvotes: 0

Ed Heal
Ed Heal

Reputation: 59987

  1. Get a good book - I recommend CSS: The Missing Manual (Missing Manuals)

  2. look up float a long with display esp relative

Upvotes: 1

GregM
GregM

Reputation: 2654

Put float:left; on this class : div.row

Upvotes: 0

Related Questions