Atrybuty tabeli HTML dają o wiele większą kontrolę nad tabelami HTML. Istnieje wiele atrybutów dostępnych w tabelach, aby uczynić je bardziej interesującymi i zmienić wygląd strony.
Atrybuty elementów HTML TABLE
W HTML5 element wykorzystuje atrybuty globalne i jeden inny atrybut:. I zmieniło się, by mieć tylko wartość 1 lub puste (tj. border = ""). Jeśli chcesz zmienić szerokość ramki, powinieneś użyć szerokość granicy Właściwość CSS.
Zobacz poniżej, aby poznać prawidłowe atrybuty tabeli HTML5.
Istnieje również kilka atrybutów, które są częścią specyfikacji HTML 4.01, która stała się przestarzała w HTML5:
- -Użyj CSS
wyściółkawłasność na stoleTDiTHelementy. - -Użyj właściwości CSS
border-spacingna stole. - -Użyj stylów CSS
kolor obramowania: czarny;iw stylu granicznymna stole. - -Użyj stylów CSS
kolor obramowania: czarny;iw stylu granicznymna odpowiednich elementach tabeli. - -Instead, powinieneś opisać strukturę tabeli w
PODPISlub umieścić cały stół wPOSTAĆi opisując go wFIGURKA. Alternatywnie możesz uprościć strukturę tabeli, aby nie było potrzeby wyjaśniania. - -Użyj CSS
szerokośćwłasność.
I jeden atrybut, który został wycofany w HTML 4.01 i jest również przestarzały w HTML5.
Dowiedz się więcej o atrybutach TABLE HTML 4.01.
wyrównać-Użyj CSSmargineszamiast tego właściwość.
Istnieje również kilka atrybutów, które nie są częścią żadnej specyfikacji HTML. Użyj tych atrybutów, jeśli wiesz, że obsługiwane przeglądarki obsługują je i nie dbasz o prawidłowy kod HTML.
- -Użyj właściwości CSS
kolor tłazamiast. kolor ramki-Użyj właściwości CSSkolor ramkizamiast.bordercolorlight-Użyj właściwości CSSkolor ramkizamiast.bordercolordark-Użyj właściwości CSSkolor ramkizamiast.cols- Nie ma alternatywy dla tego atrybutu.wysokość-Użyj właściwości CSSwysokośćzamiast.- -Użyj właściwości CSS
margineszamiast. - -Użyj właściwości CSS
margineszamiast. - -Użyj właściwości CSS
Biała przestrzeńzamiast. - -Użyj właściwości CSS
wyrównanie w pioniezamiast.
Dowiedz się więcej o atrybutach TABELI specyficznych dla przeglądarki.
Atrybuty elementów tabeli HTML5
Jak wspomniano powyżej, istnieje tylko jeden atrybut, poza atrybutami globalnymi, który jest poprawny w HTML5 STÓŁ element: granica.
The granica atrybut służy do definiowania obramowania wokół całej tabeli i wszystkich znajdujących się w niej komórek. Pojawiło się pytanie, czy będzie ono zawarte w specyfikacji HTML5, ale pozostało, ponieważ zawierało informacje o strukturze tabeli, wykraczające poza zwykłe konsekwencje stylu.
Aby dodać granica atrybut, ustaw wartość na 1 jeśli jest tam granica i jest pusta (lub pozostaw ten atrybut), jeśli nie jest. Obsługuje również większość przeglądarek 0 bez granicy, oraz inne wartości liczby całkowitej (2, 3, 30, 500, itd) uznania Szerokość ramki w pikselach, ale jest przestarzała HTML5. Zamiast tego należy użyć właściwości stylu krawędzi CSS, aby zdefiniować szerokość ramki i inne style.
Aby utworzyć tabelę z ramką, napisz:
border = "1" >
To jest stół z obramowaniem
Istnieją HTML 4.01 atrybuty, które są przestarzałe w HTML5. Jeśli planujesz pisać dokumenty HTML 4.01, możesz je poznać, w przeciwnym razie możesz je zignorować. Większość tych atrybutów ma alternatywy opisane powyżej.
Opisujemy atrybuty elementu, które są poprawne w HTML5 (i HTML 4.01). Opisuje toSTÓŁ atrybuty poprawne w HTML 4.01, ale przestarzałe w HTML5. Jeśli nadal piszesz dokumenty HTML 4.01, możesz użyć tych atrybutów, ale większość z nich ma alternatywy, które spowodują, że twoje strony będą bardziej odporne na przyszłość, gdy przejdziesz na HTML5.
Prawidłowe atrybuty HTML 4.01
Atrybut, który opisaliśmy powyżej. Jedyną różnicą w HTML 4.01 z HTML5 jest to, że można określić każdą pełną liczbę całkowitą (0, 1, 2, 15, 20, 200, itd.), Aby określić szerokość obramowania w pikselach.
Aby zbudować tabelę z granicą 5px, napisz:
<> border = "5" > Ta tabela ma granicę 5 pikseli.
Zobacz przykład dwóch tabel z ramkami.
Atrybut określa ilość przestrzeni między granicami komórek a zawartością komórki. Wartością domyślną są dwa piksele. Ustawcellpadding do0 jeśli nie chcesz mieć przestrzeni między zawartością a granicami.
Aby ustawić dopełnienie komórki na 20, napisz:
<> cellpadding = "20" > Ta tabela ma cellpadding z 20. Granice komórek będą oddzielone 20 pikselami.
Zobacz przykład tabeli z blokowaniem komórek
Atrybut określa ilość miejsca między komórkami tabeli a zawartością komórki. Lubićcellpadding, wartość domyślna to dwa piksele, więc musisz ją ustawić0 jeśli nie chcesz odstępów między komórkami.
Aby dodać odstępy między komórkami do tabeli, napisz:
<> cellspacing = "20" > Ta tabela ma przestrzeń komórkowa z 20. Komórki będą oddzielone 20 pikselami.
Zobacz tabelę ze spacją komórkową
Atrybut określa, które części obramowania na zewnątrz tabeli będą widoczne.Możesz oprawić stół ze wszystkich czterech stron, z jednej strony, u góry i u dołu, z lewej i prawej strony lub bez żadnego.
Oto kod HTML tabeli z tylko lewą krawędzią strony:
frame = "lhs" >
Ten stół będzie miał tylko lewa strona oprawiona.
I kolejny przykład z dolną ramką:
frame = "below" >
Ta tabela ma ramę na dole.
Sprawdź niektóre stoły z ramkami
Atrybut jest podobny dorama atrybut, tylko wpływa na granice wokół komórek tabeli. Możesz ustawić reguły dla wszystkich komórek, między kolumnami, między grupami takimi jakTBODY iTFOOT lub brak.
Aby zbudować tabelę z liniami tylko pomiędzy wierszami, napisz:
rules = "rows" >
Ten stół 4x4 ma wiersze nie kolumny nakreślone z atrybut reguł.
I kolejna z liniami między kolumnami:
rules = "cols" >
To jest stół gdzie kolumny są podświetlony
Oto przykład tabeli z regułami
Atrybut dostarcza informacji o tabeli dla czytników ekranu i innych agentów użytkownika, które mogą mieć problemy z odczytywaniem tabel. Aby użyćstreszczenie atrybut, zapisujesz krótki opis tabeli i umieszczasz go jako wartość atrybutu. Podsumowanie nie będzie wyświetlane na stronie internetowej w większości standardowych przeglądarek internetowych.
Oto jak napisać prostą tabelę z podsumowaniem:
<> summary = "To jest przykładowa tabela, która zawiera informacje o wypełniaczach. Celem tej tabeli jest przedstawienie podsumowania." > kolumna 1 wiersz 1 kolumna 2 wiersz 1 kolumna 1 wiersz 2 kolumna 2 wiersz 2
Wyświetl tabelę z podsumowaniem
Atrybut określa szerokość tabeli w pikselach lub jako procent elementu kontenera. Jeśliszerokość nie jest ustawiona, tabela zajmie tylko tyle miejsca, ile potrzeba, aby wyświetlić zawartość, z maksymalną szerokością taką samą jak szerokość elementu nadrzędnego.
Aby utworzyć tabelę o określonej szerokości w pikselach, napisz:
<> szerokość = "300" > Ta tabela ma 80% szerokości kontenera, w którym się znajduje.
Aby utworzyć tabelę o szerokości stanowiącej procent elementu nadrzędnego, napisz:
<> width = "80%" > Ta tabela ma 80% szerokości kontenera, w którym się znajduje.
Zobacz przykład tabeli o szerokości
Przestarzały atrybut HTML 4.01 TABLE
Istnieje jeden atrybutSTÓŁ element przestarzały w HTML 4.01 i przestarzały w HTML5:wyrównać. Ten atrybut pozwala określić, gdzie powinna znajdować się tabela na stronie względem tekstu, który jest obok niej. Ten atrybut został uznany za przestarzały w wersji HTML 4.01 i należy go unikać. Zamiast tego powinieneś użyć właściwości CSS lubmargin-left: auto; imargin-right: auto; style. Thepływak Właściwość daje wynik, który jest bliżej tego, cowyrównać dostarczony atrybut, ale może wpłynąć na sposób wyświetlania reszty zawartości strony. Themargin-right: auto; imargin-left: auto; są tym, co W3C zaleca jako alternatywę.
Oto nieprzydatny przykład z użyciemwyrównać atrybut:
<> align = "right" > Ta tabela jest wyrównana do prawej Tekst płynie wokół niego w lewo
Zobacz nieaktualny przykład przy użyciuwyrównać atrybut.
Aby uzyskać ten sam efekt za pomocą prawidłowego (nie-przestarzałego) kodu HTML, napisz:
<> style = "float: right;" > Ta tabela jest wyrównana do prawej Tekst płynie wokół niego w lewo
Poniższe wyjaśnieniaSTÓŁ atrybuty, które nie są częścią żadnej specyfikacji HTML.
Poprzednia informacja opisuje atrybuty elementu HTML, które są poprawne w HTML 4.01, ale są przestarzałe w HTML5.
Poniżej opisanoSTÓŁ atrybuty, które nie są prawidłowe w żadnej aktualnej specyfikacji. Jeśli nie zależy Ci na tym, czy Twoje strony sprawdzają, a użytkownicy korzystają z przeglądarki obsługującej te elementy, możesz użyć tych elementów. Ale większość z nich jest albo nieobsługiwana w nowoczesnych przeglądarkach, albo ma alternatywy, które są bardziej zgodne ze standardami.
Nie zalecamy używania tych atrybutów na twoich tabelach HTML.
Atrybut to stary atrybut, który został uwzględniony przed szeroko obsługiwanym CSS. Umożliwia zmianę koloru tła tabeli. Możesz ustawić nazwę koloru lub kod szesnastkowy. Ten atrybut nadal działa w wielu przeglądarkach, ale w przypadku HTML, który ma być odporny na przyszłe wersje, nie powinieneś go używać i zamiast niego używać CSS.
Lepszą alternatywą dla tego atrybutu jest właściwość stylu.
Aby zmienić kolor tła tabeli, napisz:
<> style = "background-color: #ccc;" > Ta tabela ma szare tło
Podobny dobgcolor atrybut,kolor ramki atrybut pozwala zmienić kolor atrybutu. Ten atrybut jest obsługiwany tylko przez Internet Explorer. Zamiast tego należy użyć właściwości stylu border-color.
Aby zmienić kolor obramowania stołu, napisz:
style = "border-color: red;" >
Ta tabela ma czerwoną obwódkę.
Thebordercolorlight ibordercolordark atrybuty zostały uwzględnione w programie Internet Explorer, aby umożliwić utworzenie obramowania 3D wokół stołu. Jednak od IE8 i wyżej jest to obsługiwane tylko w trybie standardów IE7 i trybie dziwactwa. Microsoft twierdzi, że te właściwości nie są już obsługiwane.
Przez krótki czascols atrybut naSTÓŁ element został zaproponowany, aby pomóc przeglądarkom dowiedzieć się, ile kolumn ma tabela. Założono, że pomogłoby to przyspieszyć renderowanie dużych tabel. Jednak został on zaimplementowany tylko przez Internet Explorera, a od wersji IE8 i wyższej jest obsługiwany tylko w Trybie standardów IE7 i trybie Quirks.
Ponieważ istniejeszerokość atrybut (przestarzały w HTML5) wielu ludzi założyło, że istniejewysokość atrybut również dla tabel. Ale ponieważ tabele odpowiadają szerokości ich treści lub określonej szerokości w CSS lubszerokość atrybut, wysokość nie może być ograniczona. Zamiast tego przeglądarki zezwoliły nawysokość atrybut określający minimalną wysokość tabeli. Jeśli stół byłby wyższy niż ta wysokość, byłby wyższy. Ale powinieneś korzystać z nieruchomości
Z CSSwysokość Właściwość można ograniczyć wysokość, jeśli używasz również właściwości CSS, aby zdefiniować, co dzieje się z nadmiarem treści.
Aby ustawić minimalną wysokość na stole, napisz:
<> style = "height: 30em;" > Ten stół ma co najmniej 30 ems wysokości.
Dwa atrybuty i dodana przestrzeń wokół lewej / prawej strony (hspace) i góra / dół (vspace) tabeli. Zamiast tego należy użyć właściwości stylu.
Aby ustawić pionową spację na 20 pikseli, a przestrzeń poziomą na 40 pikseli, napisz:
<> style = "margin: 20px 40px;" Ta tabela ma przestrzeń 20 pikseli i przestrzeń 40 pikseli.
Atrybut to atrybut boolowski określający, czy zawartość tabeli powinna być zawijana na krawędzi elementu lub okna rodzica, czy wymuszać przewijanie w poziomie. Zamiast tego należy zdefiniować charakterystykę zawijania każdej komórki tabeli za pomocą właściwości CSS.
Aby utworzyć kolumnę z dużą ilością tekstu, która nie jest zawijana, napisz:
<> style = "white-space: nowrap;" > To jest kolumna z dużą ilością treści. Ale nawet jeśli jest szerszy niż kontener, tekst nie powinien zawijać do następnego wiersza, ale zmusić okno przeglądarki do przewijania w poziomie, aby zobaczyć całą zawartość.
Na koniec atrybut określa, w jaki sposób zawartość każdej komórki powinna być wyrównana pionowo w obrębie komórki. Zamiast tego nieprawidłowego atrybutu należy użyć właściwości CSS w każdej komórce, którą chcesz zmienić wyrównanie. Nie zauważysz efektów tego stylu, chyba że zawartość komórki jest mniejsza niż dostępna przestrzeń utworzona przez inne, większe komórki.
Aby zmusić komórkę do wyrównania do dołu (a nie do środka, jako wartości domyślnej), napisz:
Ta komórka jest dłuższa niż reszta i dlatego wymusi wzrost wysokości. Więc zobaczysz, że pionowo wyrównana komórka jest wyrównana do dołu. <> style = "vertical-align: bottom;" > Zawartość na dole. Treści w środku.
