Spisie treści
W przeszłości używano tabel HTML do kontrolowania układu stron, aby zachować proporcje treści, tworzyć sekcje, dzielić informacje itp. Obecnie jest to zła praktyka, w rzeczywistości przy nowych specyfikacjach przedmiotu stół W HTML5 dołożono wszelkich starań, aby służyło to jego prawdziwemu celowi, czyli wyświetlaniu danych w dwuwymiarowych tablicach.Element stołu
Element stół jest świetnym pojemnikiem i może znajdować się w każdym elemencie, który jest przepływem, takim jak div. Element wewnętrzny stół będziemy mieli elementy: podpis, colgroup, thead, tbody, tfoot, tr, th Tak td, które są wymagane do nadania konstytucji naszej tabeli, dodatkowo nowy standard sprawił, że następujące atrybuty stały się przestarzałe w ramach stół i muszą być używane wyłącznie przez CSS: podsumowanie, wyrównanie, szerokość, kolor bg, wypełnienie komórek, odstępy między komórkami, ramka, reguły. Konwencja CSS dla tego elementu będzie następująca:
tabela {wyświetlacz: tabela; border-collapse: oddzielny; odstępy między obramowaniami: 2px; kolor obramowania: szary; }
Tr element
Jak dobrze wiemy, tabele składają się z dwóch podstawowych elementów, wierszy i kolumn, gdzie wiersze reprezentują każdy rekord informacji, a kolumny strukturę i rodzaj informacji, zobaczmy element użyty do utworzenia wierszy, ten element jest tr. Może to być dziecko następujących elementów: stół, thead, tfoot, tbodyJak widać, może to być bezpośrednie dziecko tabeli lub dziecko elementów, które są dziećmi tabeli i definiują jej strukturę. Musi zawierać 1 lub więcej elementów td lub NS w stosownych przypadkach niektóre z jego przestarzałych atrybutów zostały również umieszczone w nowym standardzie HTML5, są to: wyrównanie, char, charoff, valign, bgcolor. Które muszą być obsługiwane wyłącznie przez CSS, wspomniany CSS ma następującą strukturę jako konwencję:
tr {wyświetlanie: wiersz tabeli; wyrównanie w pionie: dziedziczenie; kolor-obramowania: dziedziczenie;}
Element Td
Ten element definiuje kolumny w naszych wierszach w tabeli, co pozwala nam oddzielić informacje w rekordzie i dzięki temu móc je sklasyfikować zgodnie z naszymi potrzebami, jest dzieckiem elementu tr, prawidłowe atrybuty, które może mieć to: colspan, rowspan, nagłówki a przestarzałe atrybuty, które teraz muszą być obsługiwane w CSS to: skrót, oś, wyrównanie, szerokość, znak, charoff, valign, bgcolor, wysokość, nowrap, zakres. Konwencja CSS dla tego elementu jest następująca:
td {wyświetlacz: komórka tabeli; wyrównanie w pionie: dziedziczenie; }
Nasz pierwszy stół
Zastosujmy w praktyce to, co widzieliśmy do tej pory, już wiemy, że do naszej tabeli potrzebujemy wierszy i kolumn w naszym kontenerze lub elemencie nadrzędnym, zobaczmy jak zabierzemy to do kodu HTML:
Przykład
Jabłka | Zielony | Średni |
Pomarańcze | Pomarańczowy | Wielki |
Ten kod daje nam strukturę tabeli z 2 wierszami i 3 kolumnami, ponieważ widzimy, że jest to prosty tekst, który prowadzi nas do tego wyniku:
Jak widzimy dość łatwo stworzyć tabelę w HTML5 w tej chwili jest to tylko tekst, a bez formatowania, w dalszej części tutoriala zobaczymy jak zrobić nieco bardziej zaawansowaną tabelę z zawartością CSS.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt