Member Avatar for grafic.web

Hi there,

i woul love to make a table whitout using the TABLE tag but the DIV...

For Example the same one with div:

    <table id="body" cellpadding="0">


            <tr style="height: 30px">
                <td>
                    TEXT
                </td>
                <td>
                    TEXT
                </td>
                <td>
                    TEXT
                </td>
            </tr>
            <tr style="height: 30px">
                <td>
                    TEXT
                </td>
                <td>
                    TEXT
                </td>
                <td>
                    TEXT
                </td>
            </tr>
            </table>
  • 3 Contributors
  • 5 Replies
  • 252 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by grafic.web
Member Avatar for cereal

Something like this should work:

<!DOCTYPE html>
<html>
    <head>
        <title>Tabless</title>
        <style type="text/css">
            *{margin:0;padding:0;}
            .table { display:table; margin:50px auto; width:960px; position:relative; }
            .tr { display:table-row; margin:10px 0; }
            .td { display:table-cell; height:30px; }
            .strong {font-weight:bold;}
        </style>
    </head>
    <body>

        <div class="table">
            <ul class="tr strong">
                <li class="td">TEXT</li>
                <li class="td">TEXT</li>
                <li class="td">TEXT</li>
            </ul>
            <ul class="tr">
                <li class="td">TEXT</li>
                <li class="td">TEXT</li>
                <li class="td">TEXT</li>
            </ul>
        </div>

    </body>
</html>

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display

Bye!

Edited by cereal
Member Avatar for grafic.web

Thanks, but this not working....

Member Avatar for cereal

Hi,

if it does not work give us some more information: How it does not work? What result do you expect? What kind of problem you get? And possibly show your code. My example works fine for me in Google Chrome, Mozilla Firefox and Opera. Bye!

Member Avatar for JorgeM

Looks fine to me as well.

Member Avatar for grafic.web

Yes it's perfect!!!!

I have forgotten a "}"

Thanks a lot!!!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.