Pozbądź się funky spacji w swoich tabelach HTML

Młody programista kodujący nowy projekt

Lightcome / Getty Images





Jeśli używasz tabel do układu strony ( nie-nie w XHTML ), prawdopodobnie zauważysz nieestetyczne dodanie dodatkowej przestrzeni w układach. Aby rozwiązać ten problem, musisz sprawdzić zarówno definicję tabeli HTML, jak i specyfikę dowolnego zarządzającego arkuszem stylów.

Definicja tabeli HTML

HTML etykietka dla tabel domyślnie nie kontroluje niektórych wymagań dotyczących odstępów. Sprawdź trzy rzeczy na temat stół tag w dokumencie HTML:



  1. Czy Twoja tabela ma atrybut cellpadding ustawiony na 0?
    |_+_|
  2. Czy Twoja tabela ma atrybut cellpacing ustawiony na 0?
    |_+_|
  3. Czy są jakieś spacje przed lub za treścią i tagami tabeli?

Numer 3 to kicker. Wielu edytorów HTML lubi mieć cały kod rozłożony, aby był łatwy do odczytania. Jednak wiele przeglądarek interpretuje te tabulatory, spacje i powrót karetki jako pożądane dodatkowe miejsce w tabelach. Pozbądź się białej przestrzeni otaczającej Twoje tagi, a będziesz mieć bardziej wyraziste stoły.

Arkusze stylów

Jednak może to nie być wyłączony kod HTML. Kaskadowe arkusze stylów kontrolują niektóre atrybuty wyświetlania tabel i, w zależności od strony, możesz celowo dodać CSS specyficzne dla tabeli w pierwszej kolejności.



Przeskanuj właściwy plik CSS w poszukiwaniu dowolnej z następujących wartości wewnątrz stół , ten , lub td właściwości i dostosuj w razie potrzeby:

    granica: Określa atrybuty tabeli lub obramowania komórki obramowanie-zwiń: Traktuje sąsiednie obramowania jako jedno, aby uniknąć powielania szerokości obramowania wyściółka: Oferuje pustą przestrzeń, w pikselach, wokół każdej komórki wyrównanie tekstu: Określa wyrównanie tekstu w komórce odstępy między obramowaniami: Ustawia odstępy między komórkami w pikselach

Alternatywy

Chociaż nadal możesz używać tabel HTML (standard jest dobrze ugruntowany i powszechnie obsługiwany w dzisiejszych przeglądarkach), większość nowoczesnych responsywnych projektów internetowych wykorzystuje kaskadowe arkusze stylów do umieszczania elementów na stronie. Tabele nadal mają sens ze względu na ich pierwotny cel, jakim było wyświetlanie danych tabelarycznych, ale do organizowania układu i zawartości strony znacznie lepiej jest użyć układu CSS.