Help with div table

**fredep57** · Sep 17, 2012 21:24

I have a "simple" example of a table I want to build. However it does not "line up" so to speak.

Here is the "simple" example.

Oh yeah, any enhancements/suggestions will be greatly appreciated and most appreciated.
E

HTML Code:

<html>
<head>
<title></title>

</head>
<body>
<div id="table" style="width: 75%; border: 1px blue solid;">
    <div style="clear:both; border: 1px black solid; text-align: center;">
	Table cell 123 header
	</div>
    <div class="table_row" style="width: 100%">
        <div class="table_cell1" style="float:left; text-align: center; border: 1px red solid;  width: 33%;">row 1, cell 1</div>
        <div class="table_cell2" style="float:left; text-align: center; border: 1px red solid;  width: 33%;">row 1, cell 2</div>
        <div class="table_cell3" style="float:left; text-align: center; border: 1px red solid;  width: 33%;">row 1, cell 3</div>
    </div>
    <div class="table_row" style="clear:both; border: 1px blue;width: 100%;">
        <div class="table_cell1" style="float:left; text-align: center;  border: 1px red solid;  width: 33%;">row 2, cell 1</div>
        <div class="table_cell2" style="float:left; text-align: center;  border: 1px red solid;  width: 33%;">row 2, cell 2</div>
        <div class="table_cell3" style="float:left; text-align: center;  border: 1px red solid;  width: 33%;">row 2, cell 3</div>
    </div>
    <div class="table_row" style="clear:both; width: 100%; border: 1px blue;">
        <div class="table_cell1" style="float:left; text-align: center;  border: 1px red solid;  width: 33%;">row 3, cell 1</div>
        <div class="table_cell2" style="float:left; text-align: center;  border: 1px red solid;  width: 33%;">row 3, cell 2</div>
        <div class="table_cell3" style="float:left; text-align: center;  border: 1px red solid;  width: 33%;">row 3, cell 3</div>
    </div>	

</div>
</body>
</html>

**ralph.m** · Sep 17, 2012 21:38

It looks like you should be using a real table for this.

**fredep57** · Sep 18, 2012 07:12

Maybe, but what I am doing does not really require a real table. So, would like to learn more about why this div type table is not lining up properly.
E

**ralph.m** · Sep 18, 2012 07:19

When you have content ordered in columns and rows, that's "tabular data", meaning you need a table.

Anyhow, mixing %widths and pixel-width borders is one of the reasons you'll never get this quite right. I would at least lose the borders and use background colors instead. Remember that 3 x 33% isn't equal to 100%.

**sarahaisling** · Sep 24, 2012 22:28

I think this code helps you
<html>
<head>
<title></title>

</head>
<body>
<div id="table" style="width:1000px; border: 1px blue solid; float:left">
<div style="clear:both; border: 1px black solid; text-align: center;">
Table cell 123 header
</div>
<div class="table_row" style="width: 100%; float:left">
<div class="table_cell1" style="float:left; text-align: center; border: 1px red solid; width: 33%;">row 1, cell 1</div>
<div class="table_cell2" style="float:left; text-align: center; border: 1px red solid; width: 33%;">row 1, cell 2</div>
<div class="table_cell3" style="float:left; text-align: center; border: 1px red solid; width: 33%;">row 1, cell 3</div>
</div>
<div class="table_row" style="clear:both; border: 1px blue;width: 100%; float:left">
<div class="table_cell1" style="float:left; text-align: center; border: 1px red solid; width: 33%;">row 2, cell 1</div>
<div class="table_cell2" style="float:left; text-align: center; border: 1px red solid; width: 33%;">row 2, cell 2</div>
<div class="table_cell3" style="float:left; text-align: center; border: 1px red solid; width: 33%;">row 2, cell 3</div>
</div>
<div class="table_row" style="clear:both; width: 100%; border: 1px blue; float:left">
<div class="table_cell1" style="float:left; text-align: center; border: 1px red solid; width: 33%;">row 3, cell 1</div>
<div class="table_cell2" style="float:left; text-align: center; border: 1px red solid; width: 33%;">row 3, cell 2</div>
<div class="table_cell3" style="float:left; text-align: center; border: 1px red solid; width: 33%;">row 3, cell 3</div>
</div>

</div>
</body>
</html>

User Tag List

Thread: Help with div table

Thread Tools

Display

Help with div table

Bookmarks

Bookmarks

Posting Permissions