Zbavte se prostorů v tabulkách HTML

Pokud pro rozložení stránky používáte tabulky (ne-ne v XHTML), je pravděpodobné, že ve svých rozloženích zažijete nevzhledné přidání dalšího prostoru. Chcete-li tento problém vyřešit, musíte zkontrolovat jak definici tabulky HTML, tak specifika libovolné šablony stylů.

Definice tabulky HTML

HTML štítek pro tabulky ve výchozím nastavení neovlivňuje některé požadavky na mezery. Ověřte tři věci o stůl značka v dokumentu HTML:

  1. Má vaše tabulka atribut cellpadding nastaven na 0?
    1. cellpadding = "0"
  2. Má vaše tabulka atribut cellspacing nastaven na 0?
    1. cellspacing = "0"
  3. Existují mezery před nebo za vaším obsahem a značkami tabulky?

Číslo 3 je kicker. Mnoho Editory HTML chtěli bychom mít celý kód rozložený, aby byl snadno čitelný. Ale mnoho prohlížečů interpretuje tyto karty, mezery a návrat vozíku jako požadovaný další prostor uvnitř vašich tabulek. Zbavte se mezer obklopujících vaše značky a budete mít ostřejší tabulky.

Šablony stylů

Nemusí to však být vypnutý HTML. Kaskádové styly ovládejte některé atributy zobrazení tabulek a v závislosti na stránce můžete nebo nemusíte mít záměrně přidán CSS specifický pro tabulku.

instagram viewer

Naskenujte v řídícím souboru CSS některou z následujících hodnot uvnitř souboru stůl, thnebo tdvlastnosti a podle potřeby upravte:

  • okraj: Určuje atributy ohraničení tabulky nebo buňky
  • kolaps hranic: Zachází se sousedními okraji jako s jedním, aby nedocházelo k duplikování šířek okrajů
  • polstrování: Nabízí prázdné místo v pixelech kolem každé buňky
  • zarovnání textu: Určuje zarovnání textu uvnitř buňky
  • mezery mezi okraji: Nastaví mezery mezi buňkami v pixelech

Alternativy

I když stále můžete používat tabulky HTML (standard je dnes dobře zavedený a všeobecně podporovaný prohlížeče), nejmodernější responzivní webový design používá kaskádové šablony stylů k umístění prvků na stránku. Tabulky stále dávají smysl pro jejich původní zamýšlený účel zobrazení tabulkových dat, ale pro uspořádání rozvržení a obsahu stránky je mnohem lepší použít místo toho rozvržení CSS.

instagram story viewer