Guida HTML interattiva: Bordi tabella

Q: Come aggiungo un bordo a una tabella in HTML?

Usa il CSS sulla tabella e sulle sue celle: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. Il bordo sulle celle disegna la griglia, e border-collapse: collapse unisce i bordi vicini in linee singole.

Q: Come arrotondo gli angoli di una tabella?

border-radius non ha effetto su una tabella con border-collapse: collapse. Usa border-collapse: separate con border-spacing: 0, metti il raggio sulla tabella e dai alle celle d'angolo un raggio corrispondente (border-start-start-radius e simili) così i loro sfondi non escono dagli angoli.

Come aggiungere un bordo a una tabella

Per impostazione predefinita le tabelle non hanno bordi. Aggiungili con il CSS: un border su ogni cella disegna la griglia, e border-collapse: collapse sulla tabella unisce ogni coppia di bordi vicini in una sola linea.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table border</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
  </style>
</head>
<body>
  <table>
    <tr><th>Size</th><th>Price</th></tr>
    <tr><td>Small</td><td>3.00</td></tr>
    <tr><td>Large</td><td>4.50</td></tr>
  </table>
</body>
</html>

La scorciatoia border accetta uno spessore, uno stile e un colore, in qualsiasi ordine: 1px solid #6b7280. Mettila su th, td, non solo su table: un bordo sulla tabella disegna solo la cornice esterna.

border-collapse: separate vs collapse

border-collapse decide se le celle condividono i bordi.

Valore	Risultato
`separate` (predefinito)	Ogni cella ha il proprio bordo, con uno spazio tra le celle impostato da `border-spacing`
`collapse`	Le celle vicine condividono un unico bordo; `border-spacing` viene ignorato

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border: 2px solid #2563eb; }
    th, td { border: 2px solid #f59e0b; padding: 6px 10px; }
    .separate { border-collapse: separate; border-spacing: 6px; }
    .collapse { border-collapse: collapse; }
  </style>
</head>
<body>
  <table class="separate">
    <caption>separate</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
  <table class="collapse">
    <caption>collapse</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
</body>
</html>

Nella tabella separate vedi entrambi gli strati: la cornice blu della tabella e un riquadro color ambra separato attorno a ogni cella, con border-spacing tra loro. Cambia 6px in 0 e le celle si toccano, ma le linee restano doppie. Solo collapse le unisce.

Quando due bordi uniti si incontrano e sono diversi, vince il più spesso. A parità di spessore decide lo stile (double batte solid, che batte dashed e dotted), e a parità ancora il bordo della cella batte quello della riga, che batte quello della tabella. Ecco perché il bordo esterno della tabella collapse è color ambra e non blu: lì sia le celle sia la tabella hanno bordi solid da 2px, e vincono le celle.

Solo linee orizzontali, o solo linee interne

La maggior parte delle tabelle moderne non disegna tutte le linee. Due schemi comuni:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border patterns</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 32px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { padding: 6px 12px; text-align: start; }

    /* 1. Row lines only */
    .rows th, .rows td { border-bottom: 1px solid #d1d5db; }
    .rows thead th { border-bottom: 2px solid #111827; }

    /* 2. Inner grid, no outer frame */
    .inner th, .inner td { border: 1px solid #d1d5db; }
    .inner tr:first-child th, .inner tr:first-child td { border-top: 0; }
    .inner tr:last-child th, .inner tr:last-child td { border-bottom: 0; }
    .inner th:first-child, .inner td:first-child { border-inline-start: 0; }
    .inner th:last-child, .inner td:last-child { border-inline-end: 0; }
  </style>
</head>
<body>
  <table class="rows">
    <thead><tr><th>Name</th><th>Score</th></tr></thead>
    <tbody>
      <tr><td>Ana</td><td>92</td></tr>
      <tr><td>Bob</td><td>87</td></tr>
    </tbody>
  </table>

  <table class="inner">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
  </table>
</body>
</html>

La seconda tabella toglie il bordo sul lato esterno di ogni cella di bordo. border-inline-start e border-inline-end indicano l'inizio e la fine della riga, quindi lo stesso CSS resta corretto nelle lingue da destra a sinistra, dove la prima cella sta dall'altro lato.

Angoli arrotondati della tabella

border-radius non fa niente su una tabella con border-collapse: collapse. Le tabelle arrotondate usano il modello separate senza spaziatura, e disegnano ogni linea una volta sola dando alle celle solo un bordo inferiore e uno finale:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rounded table</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #9ca3af;
      border-radius: 10px;
      font-family: system-ui, sans-serif;
    }
    th, td {
      padding: 8px 14px;
      border-bottom: 1px solid #9ca3af;
      border-inline-end: 1px solid #9ca3af;
    }
    th { background: #e5e7eb; }
    tr:first-child > :first-child { border-start-start-radius: 9px; }
    tr:first-child > :last-child { border-start-end-radius: 9px; }
    tr > :last-child { border-inline-end: 0; }
    tr:last-child > * { border-bottom: 0; }
  </style>
</head>
<body>
  <table>
    <tr><th>Plan</th><th>Price</th></tr>
    <tr><td>Free</td><td>0</td></tr>
    <tr><td>Pro</td><td>12</td></tr>
  </table>
</body>
</html>

Le due celle d'angolo dell'intestazione hanno un raggio proprio così lo sfondo grigio segue la curva. Senza, i loro angoli squadrati spuntano oltre il bordo arrotondato. Il raggio è di 9px, cioè i 10px della tabella meno il suo bordo da 1px, così le due curve combaciano.

Colore e spessore del bordo per ogni parte

I bordi possono cambiare a seconda della parte della tabella. I selettori su thead, tfoot e sulle singole righe impostano una linea più spessa sotto l'intestazione o sopra i totali:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border per part</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 14px; border: 1px solid #e5e7eb; text-align: start; }
    thead th { border-bottom: 3px solid #2563eb; }
    tfoot td { border-top: 3px double #111827; font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Month</th><th>Sales</th></tr></thead>
    <tbody>
      <tr><td>July</td><td>120</td></tr>
      <tr><td>August</td><td>135</td></tr>
    </tbody>
    <tfoot><tr><td>Total</td><td>255</td></tr></tfoot>
  </table>
</body>
</html>

Le linee da 3px vincono su quelle grigie da 1px dove si incontrano, seguendo le regole di collapse viste sopra. Per il resto della struttura della tabella (thead, tfoot, th), vedi tabelle HTML.

L'attributo border

I vecchi tutorial usano attributi sul tag <table>:

<table border="1" cellspacing="0" cellpadding="6">

I browser rispettano ancora border="1": disegna un bordo sulla tabella e su ogni cella, nel modello separate, che dà l'effetto dei bordi doppi. Tutti e tre gli attributi sono obsoleti in HTML5. Gli equivalenti CSS sono border sulle celle, border-spacing (o border-collapse: collapse) sulla tabella e padding sulle celle.

Errori comuni

Bordo solo su table. Ottieni una cornice senza linee interne. Aggiungi il bordo a th, td.
Dimenticare border-collapse: collapse, e poi vedere linee doppie.
border-radius con border-collapse: collapse. Il raggio viene ignorato.
border-spacing con border-collapse: collapse. La spaziatura funziona solo nel modello separate.
Bordi su <tr> nel modello separate. Le righe non disegnano bordi se la tabella non è in collapse; dai lo stile alle celle.
Usare border="1" nel codice nuovo. Funziona ancora, ma non può impostare un colore ed è obsoleto.

Domande frequenti

Come aggiungo un bordo a una tabella in HTML?

Usa il CSS sulla tabella e sulle sue celle: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. Il bordo sulle celle disegna la griglia, e border-collapse: collapse unisce i bordi vicini in linee singole.

Perché la mia tabella ha i bordi doppi?

Per impostazione predefinita ogni cella disegna il proprio bordo con uno spazio tra una cella e l'altra (border-collapse: separate), quindi le celle vicine mostrano due linee. Imposta border-collapse: collapse sulla <table> per unirle in una.

L'attributo border della tabella è ancora valido?

<table border="1"> disegna ancora i bordi in tutti i browser, ma in HTML5 è obsoleto e non ti dà nessun controllo su colore o stile. Usa invece la proprietà CSS border.

Come arrotondo gli angoli di una tabella?

border-radius non ha effetto su una tabella con border-collapse: collapse. Usa border-collapse: separate con border-spacing: 0, metti il raggio sulla tabella e dai alle celle d'angolo un raggio corrispondente (border-start-start-radius e simili) così i loro sfondi non escono dagli angoli.

Come tolgo il bordo da una tabella?

Le tabelle non hanno bordi a meno che qualcosa non li aggiunga. Togli l'attributo border dal tag <table>, oppure imposta border: none su table, th, td per annullare un foglio di stile che li aggiunge.

Concetti correlati