Which is better, divs or tables? There’s really no correct answer for this and it’s basically a matter of preference. In terms of layout, they can work in the same way. However, I would say that using divs are more efficient.
In order to be rendered, browsers download the table’s presentational markup every time, even when the page is refreshed. While CSS can initially be bigger than a table’s markup, browsers cache the styles so that it takes less time to render the page.
I will be using three classes of divs, “div_table”, “div_tr”, and “div_td”.
CSS:
.table {
margin:0 auto 0 auto;
color:#000;
width:96%;
}
.tr {
margin:0
padding:0;
border:solid #000 1px;
color:#000;
width:100%;
}
.td-1, .td-2, .td-3 {
height:auto; /* Set this to a value if needed */
text-align: center;
margin:0;
padding:0;
float:left;
}
.td-1 {
width: 20%;
}
.td-2 {
border-left:1px solid #000;
border-right:1px solid #000;
width:30%;
}
.td-3 {
width:49%;
}
.text {
margin:0;
padding:4px;
width:auto;
}
.clear {
clear:both;
}
Explanation:
I know that this looks like a lot of work just to implement a table like structure, but if you want to go for a little more efficiency, then you might want to still do it using CSS and divs.
Anyways, the code isn’t something too difficult to figure out. The main property that makes this work is float:left. As you can see, “td-1″, “td-2″, and “td-3″ are floated because they are the columns.
I just made td-1 through 3 because I wanted different widths for each column. You could also add or remove as many column declarations as you want.
The only down side to this is that if the data in each of your columns has different heights, you will have to specify a uniform height for all of the column divs. This is only necessary if you have borders between the columns. Otherwise, you could just leave the height as auto.
To add borders in between columns, you can add borders left and right of the inner columns, like my “td-2″ div.
HTML:
<div class="table">
<div class="tr">
<div class="td-1"><p class="text">
Lorem ipsum dolor sit amet
</p></div>
<div class="td-2"><p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi
egestas blandit. In non leo. In euismod nisl non tellus.
</p></div>
<div class="td-3"><p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi
egestas blandit. In non leo. In euismod nisl non tellus.
</p></div>
<div class="clear"></div>
</div>
<div class="tr">
<div class="td-1"><p class="text">
Lorem ipsum dolor sit amet
</p></div>
<div class="td-2"><p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi
egestas blandit. In non leo. In euismod nisl non tellus.
</p></div>
<div class="td-3"><p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi
egestas blandit. In non leo. In euismod nisl non tellus.
</p></div>
<div class="clear"></div>
</div>
<div class="tr">
<div class="td-1"><p class="text">
Lorem ipsum dolor sit amet
</p></div>
<div class="td-2"><p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi
egestas blandit. In non leo. In euismod nisl non tellus.
</p></div>
<div class="td-3"><p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi
egestas blandit. In non leo. In euismod nisl non tellus.
</p></div>
<div class="clear"></div>
</div>
</div>
Explanation:
You would pretty much set up this table just like a normal HTML table. The only thing that is essential is including the “clear” div after the last column in each row. Because each column is floated, you need this “clear” div in order to properly make a new row and to make the “table” div properly expand around the rows.
Result:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi egestas blandit. In non leo. In euismod nisl non tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi egestas blandit. In non leo. In euismod nisl non tellus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi egestas blandit. In non leo. In euismod nisl non tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi egestas blandit. In non leo. In euismod nisl non tellus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi egestas blandit. In non leo. In euismod nisl non tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non magna vel nisi egestas blandit. In non leo. In euismod nisl non tellus.
RSS feed for comments on this post
