SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with div table

    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>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It looks like you should be using a real table for this.

  3. #3
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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%.

  5. #5
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •