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
  • 288 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by grafic.web

Dani AI

Generated

Quick expert note: for genuinely tabular data (rows and columns that belong together semantically), the native <table> element is still the correct choice — it preserves semantics, keyboard navigation and screen‑reader behavior. For purely visual layout, modern CSS (Grid or Flexbox) is simpler and more responsive than trying to "fake" a table with lots of wrappers. 's demonstration showed a CSS approach that works; the most common reason rules don't apply is a small syntax error (missing }) as discovered.

A compact CSS Grid pattern that reproduces a 3×2 layout cleanly:

<div class="grid">
  <div class="cell">TEXT</div>
  <div class="cell">TEXT</div>
  <div class="cell">TEXT</div>
  <div class="cell">TEXT</div>
  <div class="cell">TEXT</div>
  <div class="cell">TEXT</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 960px;
  margin: 50px auto;
}
.cell {
  padding: 8px;
  min-height: 30px;
  border-bottom: 1px solid #eaeaea;
}

Accessibility and troubleshooting notes: when using non‑table elements for tabular content, add ARIA roles (role="table", role="row", role="cell" or role="columnheader") but treat ARIA as a fallback — native tables are preferred for real data. Debugging steps: inspect computed styles in DevTools, check for missing braces or selector specificity, confirm box model (box-sizing), and use min-height, line-height, or Grid alignment properties for vertical centering. Cross‑browser fallbacks may be needed only for very old browsers; otherwise Grid gives predictable equal columns and simpler responsive behaviour.

Acknowledgement: this thread shows the right approach and common pitfalls — good catch by and the follow‑up by confirming it worked across browsers.

Recommended Answers

All 5 Replies

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.