Member Avatar for PF2G

Hi, i'm trying to do a table with

border:1px solid #000000

But i want border between rows and columns.
Can someone help me, please?

Here's my table if it helps or something:

<table>
                <thead rowspan=1>
                    <tr>
                        <td>Nome da Banda</td>
                        <td>Estilo</td>
                        <td>Atividade</td>
                        <td>Line Up Atual</td>
                        <td>Line Up Tour</td>
                        <td>Ex-Membros</td>
                        <td>Linguagem</td>
                    </tr>
                </thead>

                <tbody>

                </tbody>
            </table>
  • 3 Contributors
  • 5 Replies
  • 724 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Brief summary of what was happening and the clean fix.

had the right idea with borders but a couple of issues prevented the expected result: a misspelling (boder-collapse) meant the browser ignored the rule, and the table header was marked up oddly (<thead rowspan="1"> is invalid). As pointed out, borders need to be applied to cells; showed a per-side approach when fine control is needed. Below is a compact, alternative method that draws single borders between rows and columns without per-cell classes.

Example markup and CSS (uses adjacent-sibling selectors so each inner line is drawn once and the outer table keeps a single frame):

<table class="grid">
  <thead>
    <tr><th>Nome da Banda</th><th>Estilo</th><!-- etc. --></tr>
  </thead>
  <tbody>
    <tr><td>...</td><td>...</td></tr>
    <!-- more rows -->
  </tbody>
</table>

<style>
.grid { border-collapse: separate; border-spacing: 0; border: 1px solid #000; }
.grid th,.grid td { padding: 6px; background: #fff; }
.grid td + td { border-left: 1px solid #000; }    /* vertical separators */
.grid tr + tr td { border-top: 1px solid #000; }   /* horizontal separators */
</style>

Notes and troubleshooting:

  • The key is valid HTML (use <th> for header cells, remove invalid attributes) and correct CSS names (border-collapse).
  • border-collapse: collapse is the simpler alternative (set a border on th,td and the browser collapses adjacent borders), but the sibling-selector approach above avoids relying on collapse if per-side control is needed.
  • If separators still do not appear, inspect computed styles in dev tools for overridden rules or user-agent defaults. For very old browsers, cellspacing="0" can be used as a fallback.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

Style your <td> elements with a border as well.

Member Avatar for PF2G

That's what i did JorgeM, but it stay everything seperated then i used

boder-collapse:collapse

But nothing happened

Member Avatar for pritaeas

Like this?

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      table, tr { border: 0 }
      td.mid, td.top { border-bottom: 1px solid #000 }
      td.mid, td.bottom { border-top: 1px solid #000 }
      td.middle, td.left { border-right: 1px solid #000 }
      td.middle, td.right { border-left: 1px solid #000 }
    </style>
  </head>
  <body>
    <table cellspacing="0">
      <tr>
        <td class="top left">1A</td>
        <td class="top middle">1B</td>
        <td class="top middle">1C</td>
        <td class="top right">1D</td>
      </tr>
      <tr>
        <td class="mid left">2A</td>
        <td class="mid middle">2B</td>
        <td class="mid middle">2C</td>
        <td class="mid right">2D</td>
      </tr>
      <tr>
        <td class="bottom left">3A</td>
        <td class="bottom middle">3B</td>
        <td class="bottom middle">3C</td>
        <td class="bottom right">3D</td>
      </tr>
    </table>
  </body>
</html>
Member Avatar for PF2G

That's it, thanks man...

Member Avatar for JorgeM

Hello PF2G, this is what i was suggesting in my previous post if you wanted to place a border around the table, rows, and cells.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      table, tr, td {border:1px solid gray;padding:5px;border-collapse:collapse; }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1A</td>
        <td>1B</td>
        <td>1C</td>
        <td>1D</td>
      </tr>
      <tr>
        <td>2A</td>
        <td>2B</td>
        <td>2C</td>
        <td>2D</td>
      </tr>
      <tr>
        <td>3A</td>
        <td>3B</td>
        <td>3C</td>
        <td>3D</td>
      </tr>
    </table>
  </body>
</html>
Edited by JorgeM
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.