Home/ Questions/Q 6911203
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T08:55:18+00:00

I’m trying to learn how to put table content into css floats. My approach

  • 0

I’m trying to learn how to put table content into css floats.

My approach has been to use a div at the “table” level, at the “row” level, and the “cell” level. Not sure this is a good strategy.

Anyway, when I set a background style at the “table” or “cell” level I can see the color change. When I set it at the row level it stays white.

Any guesses what’s going on? Is there a better way to do this?

<h2>"Tables" work</h2>
<div style="width: 455px; background-color:#a4c4fc">
    <div>
        <div style="width: 70px; float: left">ID</div>
        <div style="width: 220px; float: left">Lemons</div>
        <div style="width: 50px; float: left">Horseradish</div>
    </div>
    <br clear: both>
    <div>
        <div style="width: 70px; float: left">1<LEFT></div>
        <div style="width: 220px; float: left">3</div>
        <div style="width: 50px; float: left">4</div>
    </div>
</div>

<br>

<h2>"Row" divs do not seem to work</h2>
<div style="width: 455px">
    <div style="background-color:#a4c4fc">
        <div style="width: 70px; float: left">ID</div>
        <div style="width: 220px; float: left">Lemons</div>
        <div style="width: 50px; float: left">Horseradish</div>
    </div>
    <br clear: both>
    <div style="background-color:#a4c4fc">
        <div style="width: 70px; float: left">0</div>
        <div style="width: 220px; float: left">0</div>
        <div style="width: 50px; float: left">1</div>
    </div>
</div>

<br>

<h2>Individual cell divs work</h2>
<div style="width: 455px">
    <div style="background-color:#a4c4fc">
        <div style="width: 70px; float: left; background-color:#a4c4fc">ID</div>
        <div style="width: 220px; float: left; background-color:#a4c4fc">Lemons</div>
        <div style="width: 50px; float: left; background-color:#a4c4fc">Horseradish</div>
    </div>
    <br clear: both>
    <div style="background-color:#a4c4fc">
        <div style="width: 70px; float: left; background-color:#a4c4fc">0</div>
        <div style="width: 220px; float: left; background-color:#a4c4fc">0</div>
        <div style="width: 50px; float: left; background-color:#a4c4fc">1</div>
    </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This looks like tabular data.

    If it is, you should use a HTML table element to display this information.

    Too many people make the mistake of hearing “tables are bad”, and try and do work arounds using div’s, even when tables are most appropriate.

    When people say you shouldn’t use tables, they are referring to layout structure. It is still fine to use it in this case, they are not evil!

    Then you’ll be able to do:

    <tr style="background-color:#a4c4fc;">

</tr>

    If you are certain on using div’s your issue is because the “cell” divs are all float:left;. Therefore your “row” div doesn’t have a height.

    You could add the following to the bottom of the “cell”‘s to fix this:

    <div style="background-color:#a4c4fc">
        <div style="width: 70px; float: left">ID</div>
        <div style="width: 220px; float: left">Lemons</div>
        <div style="width: 50px; float: left">Horseradish</div>
        <div style="clear:both;overflow:hidden;height:0;"></div>
</div>

    Alternatively, use display:inline-block;

    <div style="background-color:#a4c4fc">
        <div style="width: 70px; display:inline-block;">ID</div>
        <div style="width: 220px; display:inline-block;">Lemons</div>
        <div style="width: 50px; display:inline-block;">Horseradish</div>
</div>

    http://jsfiddle.net/hRCWk/2/

    But don’t do that, use a table 🙂

    • 0