Zbavenie sa priestorov v tabuľkách HTML

Ak na rozloženie stránky používate tabuľky (nie v XHTML), je pravdepodobné, že vo svojich rozloženiach zažijete nevzhľadné pridanie priestoru navyše. Ak chcete vyriešiť tento problém, musíte skontrolovať definíciu tabuľky HTML aj špecifiká akejkoľvek šablóny štýlov.

Definícia tabuľky HTML

HTML značka pre tabuľky predvolene neriadi niektoré požiadavky na medzery. Overte tri veci týkajúce sa stôl značka v dokumente HTML:

  1. Je vo vašej tabuľke nastavený atribút cellpadding na 0?
    1. cellpadding = "0"
  2. Je vo vašej tabuľke nastavený atribút rozmiestnenia buniek na 0?
    1. cellspacing = "0"
  3. Existujú nejaké medzery pred alebo za vaším obsahom a značkami tabuľky?

Číslo 3 je kicker. Veľa Editory HTML chcem mať celý kód rozmiestnený tak, aby bol ľahko čitateľný. Ale veľa prehľadávačov interpretuje tieto karty, medzery a návraty vozíka ako požadovaný ďalší priestor vo vašich tabuľkách. Zbavte sa prázdneho priestoru obklopujúceho vaše značky a budete mať ostrejšie stoly.

Štýly

Nemusí to byť však vypnutý kód HTML.

instagram viewer
Kaskádové štýly ovládajte niektoré atribúty zobrazenia tabuliek a v závislosti od stránky ste mohli alebo nemuseli zámerne pridávať CSS špecifické pre jednotlivé tabuľky.

Naskenujte v riadiacom súbore CSS ktorúkoľvek z nasledujúcich hodnôt vo vnútri súboru stôl, thalebo tdvlastnosti a podľa potreby upravte:

  • hranica: Určuje atribúty hranice tabuľky alebo bunky
  • kolaps hraníc: Považuje susedné okraje za jedno, aby nedochádzalo k duplikovaniu šírok okrajov
  • vypchávka: Ponúka prázdne miesto okolo každej bunky v pixeloch
  • zarovnať text: Určuje zarovnanie textu v bunke
  • medzery medzi riadkami: Nastaví medzery medzi bunkami v pixeloch

Alternatívy

Aj keď stále môžete používať tabuľky HTML (štandard je v dnešnej dobe zavedený a univerzálne podporovaný) prehľadávače), najmodernejší responzívny webový dizajn používa na umiestnenie prvkov na stránku kaskádové štýly. Tabuľky majú stále zmysel pre svoj pôvodný zamýšľaný účel zobrazenia tabuľkových údajov, ale pre usporiadanie rozloženia a obsahu stránky je oveľa lepšie použiť rozloženie CSS.