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.
<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>
ralphm
September 18, 2012, 4:38am
2
It looks like you should be using a real table for this.
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.
ralphm
September 18, 2012, 2:19pm
4
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%.
I think this code helps you
</head>
</div>
