Na początku tworzenia stron internetowych tabele HTML były bardzo proste i brakowało im rozbudowanych opcji stylizacji. Jednak obecnie większość tabel jest stylizowana tak, aby zapewnić użytkownikom bardziej estetyczne i funkcjonalne wrażenia.
CSS zapewnia zestaw atrybutów stylu tabeli. Atrybuty te umożliwiają między innymi oddzielanie komórek tabeli, określanie obramowań tabeli oraz określanie szerokości i wysokości tabeli.
Ten samouczek wyjaśni z przykładami, jak stylizować tabelę za pomocą CSS . Pod koniec tego samouczka będziesz ekspertem.
Tabele HTML
Kod HTML definiuje strukturę tabel. Użyj znacznika
, aby zdefiniować tabelę. Tagi
,
i
określają odpowiednio wiersze, nagłówki tabeli i komórki zawartości.
Przyjrzyjmy się przykładowej tabeli HTML. W poniższym przykładzie mamy tabelę z listą pięciu najlepszych książek na liście bestsellerów New York Times w tygodniu od 23 marca 2020 r.:
Kod naszej tabeli wygląda następująco:
Ta tabela ma trzy kolumny i sześć wierszy, w tym wiersz „on”. Twój umysł.
Tabele CSS
CSS służy do stylizowania tabel. Chociaż powyższa tabela przedstawia dane w zorganizowany sposób, są one napisane w zwykłym HTML (nie ma stylów). Korzystając z CSS, możesz poprawić wygląd tabel.
Istnieje wiele funkcji CSS, których możesz użyć do styl tabeli. Za pomocą CSS możesz:
dodawać obramowania
kompresować obramowania
dostosować odstępy obramowania
dostosować szerokość i wysokość tabela
dodaj dopełnienie
wyrównaj tekst w poziomie
wyrównaj tekst w pionie
dodaj funkcję myszy jog (najechanie kursorem)
ustaw kolory komórek
ustaw sposób wyświetlania pustych komórek
Wszystkie te tematy omówimy w poniższej dyskusji.
Obramowania
Załóżmy, że chcemy dodać obramowanie wokół tablicy lub elementów, które ona zawiera.
Aby dodać obramowanie, możemy użyć właściwości border. Oto przykład, w którym właściwość border służy do dodawania obramowań do tabeli i jej komórek, w tym komórek nagłówka:
W naszym kodzie definiujemy jednolitą czarną ramkę o szerokości 1 piksela. Oto wynik naszego kodu:
Zauważ, że nasza tabela zawiera podwójne Borders Dzieje się tak, ponieważ zastosowaliśmy obramowanie do samej tabeli (
), jej nagłówków (
) i jej komórek (
). podwójne obramowania do pojedynczych obramowań, możemy użyć właściwości border-collapse.
Właściwość border-collapse konwertuje podwójne obramowania tabeli na pojedyncze obramowania.Domyślna wartość własności border-collapse jest zwijana.Jeżeli własność border-collapse otrzymuje wartość zwiń , obramowania wokół tablicy zostaną zwinięte.
Oto przykład właściwości b command-collapse w działaniu:
Nasz kod zwraca:
Nasza tabela i jej zawartość mają teraz jedno obramowanie.
Border Spac pol
Właściwość border-spacing służy do definiowania odstępów między komórkami w tabeli. Właściwość border-spacing definiuje odstępy w poziomie i w pionie między komórki - i robi to w tej kolejności.
Oto przykład użycia właściwości border-spacing w naszej tabeli początkowej (tej bez zwiniętych ramek):
Nasz kod zwraca:
Każda z naszych komórek ma odstęp 10px w poziomie i pionowe obramowania.
Szerokość i wysokość
Szerokość i wysokość tabeli oraz jej właściwości można określić za pomocą atrybutów szerokości i wysokości .
Załóżmy, że chcemy, aby szerokość naszej tabeli powyżej (tej z zwiniętymi obramowaniami) była szerokością samej strony internetowej i załóżmy, że chcemy, aby wysokość nagłówka każdej tabeli była wysoka na 30 pikseli. Możemy to zrobić używając następującego kodu CSS:
Nasz kod zwraca:
Jak widać, nasza tabela ma teraz szerokość strony internetowej. Ponadto nagłówki kolumn w naszej tabeli mają wysokość 30 pikseli.
Padding
Możesz użyć właściwości padding, aby dodać trochę przestrzeni między krawędziami komórki w tabeli i zawartość tych komórek. Właściwość padding może być używana w tagach
i
.
Załóżmy, że chcemy dodać dopełnienie 10 pikseli wokół komórki zawartość naszej tabeli, w tym komórki nagłówka. Możemy to zrobić za pomocą tego kodu:
Nasz kod zwraca:
Zawartość każdego z wierszy i nasza tabela nagłówków teraz mieć dopełnienie 10px na wszystkich krawędziach.
Wyrównanie tekstu w poziomie
Właściwość text-align umożliwia wyrównanie tekstu przechowywanego w lub
w domyślnie, elementy
są wyrównane do środka, a elementy
są wyrównane do lewej.
Najczęściej używane wartości atrybutu wyrównania tekstu to:< br>
lewy, środek, prawy (obsługiwane przez wszystkie przeglądarki z wyjątkiem Microsoft Edge i Internet Explorer)
początek i koniec (obsługiwane przez wszystkie przeglądarki z wyjątkiem Microsoft Edge i Internet Explorer) )
Załóżmy, że chcemy wyśrodkować elementy
w naszej tablicy i wyrównać elementy
do lewej strony każdej komórki. Możemy to zrobić za pomocą tego kodu:
Nasz kod zwraca:
W tym przykładzie wyśrodkowaliśmy tekst poza komórką. `tekst nagłówka i komórki nagłówka są wyrównane do lewej.
Pionowe wyrównanie tekstu
CSS Właściwość vertical-align jest używana do określenia pionowego wyrównania treści w
lub
. Domyślnie wartość właściwości wyrównania w pionie jest ustawiona na middle , co oznacza, że zawartość jest wyrównana w pionie do środka komórki.
Załóżmy, że chcemy wyrównać tekst w naszych komórkach
do dołu komórek. W takim przypadku robimy to za pomocą tego kodu:
