Eliminare gli spazi nelle tabelle HTML

click fraud protection

Se utilizzi le tabelle per il layout di pagina (un no-no in XHTML), è probabile che sperimenterai l'aggiunta sgradevole di spazio extra nei tuoi layout. Per risolvere questo problema, è necessario controllare sia la definizione della tabella HTML che le specifiche di qualsiasi foglio di stile governativo.

Definizione della tabella HTML

L'HTML etichetta per le tabelle per impostazione predefinita non controlla alcuni requisiti di spaziatura. Verifica tre cose sul tavolo tag all'interno del tuo documento HTML:

  1. La tua tabella ha l'attributo cellpadding impostato su 0?
    1. cellpadding="0"
  2. La tua tabella ha l'attributo di cellspacing impostato su 0?
    1. cellspace = "0"
  3. Ci sono spazi prima o dopo il contenuto e i tag della tabella?

Il numero 3 è il kicker. Molti Editor HTML Mi piace avere il codice tutto distanziato, per renderlo facile da leggere. Ma molti browser interpretano quelle schede, spazi e ritorni a capo come spazio extra desiderato all'interno delle tabelle. Sbarazzati degli spazi bianchi che circondano i tuoi tag e avrai tabelle più nitide.

instagram viewer

Fogli di stile

Tuttavia, potrebbe non essere l'HTML a essere disattivato. Fogli di stile controlla alcuni attributi di visualizzazione delle tabelle e, a seconda della pagina, potresti o meno aver aggiunto deliberatamente CSS specifici per la tabella in primo luogo.

Scansiona il file CSS di governo per uno dei seguenti valori all'interno del tavolo, questo, o tdproprietà e regolare secondo necessità:

  • confine: specifica gli attributi di una tabella o del bordo di una cella
  • confine-collasso: Tratta i bordi adiacenti come uno solo, per evitare di duplicare le larghezze dei bordi
  • imbottitura: offre uno spazio vuoto, in pixel, attorno a ogni cella
  • allineare il testo: Determina il allineamento del testo all'interno della cellula
  • spaziatura dei bordi: Imposta la spaziatura tra le celle, in pixel

alternative

Sebbene tu possa ancora usare le tabelle HTML (lo standard è ben consolidato e universalmente supportato negli odierni browser), il web design reattivo più moderno utilizza fogli di stile a cascata per posizionare gli elementi in una pagina. Le tabelle hanno ancora senso per il loro scopo originale di visualizzare dati tabulari, ma per organizzare il layout e il contenuto di una pagina, è molto meglio usare il layout CSS.

instagram story viewer