1

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>
domino
  • 7,271
  • 12
  • 36
  • 48
  • 1
    What are you trying to achieve? There are possibilities where tables are better then divs (for example representation of tabular data). – Madara's Ghost Oct 28 '11 at 12:25
  • @Truth well I heard that it's better if I only use tables or divs, not both. At the moment my layout uses tables for everything. I'm trying to convert the whole thing to divs and css. – domino Oct 28 '11 at 12:36
  • @Šime Vidas Yes, they should both use 50% – domino Oct 28 '11 at 12:42
  • @domino Fixed means a fixed value in pixels. Does that layout have a fixed width? – Šime Vidas Oct 28 '11 at 12:47

5 Answers5

5

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.

Curtis
  • 101,612
  • 66
  • 270
  • 352
  • Thanks, I was under the impression that they shouldn't be mixed and only one should be used. – domino Oct 28 '11 at 12:40
  • @domino - Nope, theres nothing wrong with using HTML tables for displaying data, and its definitely the better method than using divs. Its also better in terms of accessibility. – Curtis Oct 28 '11 at 12:43
1

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

  2. look up float a long with display esp relative

Ed Heal
  • 59,252
  • 17
  • 87
  • 127
1

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/

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • Thanks, this explain a lot. section > div + div - never seen something like that in a css file. Can you tell me what that is so I can look it up? – domino Oct 28 '11 at 15:08
  • @domino `X > Y` is the [child combinator selector](http://www.w3.org/TR/css3-selectors/#child-combinators). `X + Y` is the [adjacent sibling combinator selector](http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators). The selector `.section > div + div` matches all DIV elements which parent has the class `'section'` and which previous sibling is also a DIV element. Effectively, I'm selecting all DIV's inside `.section` which are not the first childs, ergo, the second DIV, the third DIV, ect. (In your case, each `.section` only contains two DIV, so only the second ones are matched.) – Šime Vidas Oct 28 '11 at 17:19
0

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

GregM
  • 2,634
  • 3
  • 22
  • 37
0

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;

dkg
  • 1,775
  • 14
  • 34