Jak stylizować tabele za pomocą CSS

Poniżej podano ważne i podstawowe właściwości CSS, które pomagają w stylu przychylny:

• Dodaj granice
• Dostosuj granice
• Upadek
• Dostosuj szerokość i wysokość stołu
• Wyrównaj tekst pionowy
• Wyrównaj tekst poziomy
• Dodaj wyściółkę
• Zdefiniuj kolory komórek

Omówimy teraz wszystkie wyżej oddane właściwości CSS, aby stylizować tabele HTML z odpowiednimi przykładami.

Tabele stylowe za pomocą właściwości granicznej CSS

CSS oferuje nieruchomość „graniczną”, która służy do dodawania granic w tabeli. Aby dodać granicę, możesz przyjąć następujący przykład.

Przykład
Poniższy przykład wyświetli solidne „czarny„Granica z„1px„Szerokość dla całego stołu”tabela”, Nagłówki„th”I kolumny„TD”:

Wyjście

Stylowa granica stołowa za pomocą właściwości szerokości CSS

W poprzednim przykładzie widziałeś metodę wstawiania granicy wokół stołu w CSS. Dana "granica„Własność nie określa szerokości, ponieważ możesz ją dostosować zgodnie z wymaganiami. Aby to zrobić, sprawdź podany przykład.

Przykład
W tym przykładzie utworzymy tabelę HTML i stylizujemy ją w taki sposób, aby obejmował cały skan z pełną szerokością ”100%”:

Pełna szerokość stołu

Wyjście

Tabele stylowe za pomocą właściwości obramowania CSS

Jak widać, tabela utworzona w powyższym przykładzie ma osobną granicę dla każdego wiersza i kolumny, która może nie przynieść przyzwoitego wyglądu na stronie internetowej. Jednak CSS pozwala ci na zawalić się granice do jednej granicy za pomocą „Zakładanie granic" nieruchomość.

Przykład
Teraz wykorzystamy „Zakładanie granic„Właściwość do stylizowania utworzonej tabeli za pomocą jednej granicy dla rzędów i kolumn:

Zakochanie granic stołowych

Wyjście

Tabela stylu za pomocą właściwości CSS i właściwości wysokości

W CSS „szerokość" I "wysokość„Właściwości są wykorzystywane przede wszystkim do zmiany macierzy tabeli. Na przykład, w poniższym przykładzie, ustawimy tabelę szerokość Jak "90%”I wysokość komórki nagłówka stołowego jako „90px”:

Stylowe stoły za pomocą CSS

Przykład ustawienia wysokości i szerokości:

Wyjście

Wyrównanie komórek tabeli stylów za pomocą właściwości pionowej CSS

CSS „Pion-align„Właściwość jest wykorzystywana do wyrównania tekstu w komórce tabeli z górnej, dolnej lub środkowej, ale musisz wybrać, czy wyrównać wiersz, czy kolumny pionowo. Sprawdźmy podany przykład:

Stoły stylizacyjne w HTML

Przykład ustawienia wyrównania pionowego

Powyższy przykład zostanie pionowo wyrównany tekst komórki tabeli do dołu:

Wyrównanie komórek tabeli stylów za pomocą właściwości poziomej CSS

CSS oferuje „poziom poziomy„Własność w celu wyrównania tekstu w poziomie. Ta właściwość może pomóc w wyrównaniu tekstu po lewej, prawej lub centrum:

Stoły stylizacyjne w HTML

Przykład ustawienia wyrównania poziomego

Powyższy przykład wyrównuje tekst dodany w komórce tabeli w odniesieniu do spód:

Tabele stylowe za pomocą właściwości wyściółki CSS

„„wyściółka„Właściwość CSS jest wykorzystywana do kontrolowania przestrzeni między komórkami tekstowymi a granicą. Jest używany głównie do

Przykład

Stoły stylizacyjne w HTML

Przykład korzystania z właściwości wyściółki

Poniższe obrazy oznaczają, że z powodzeniem dodajemy wyściółkę „20px” między granicą a tekstem komórki:

Tabele stylowe za pomocą właściwości koloru tła CSS

CSS pozwala osobno definiować kolory dla każdej tabeli każdej kolumny, wiersz lub komórka. Na przykład poniższa tabela będzie zawierać tło nagłówka stołowego „th" Jak "Pomarańczowy" kolor i wszystkich "Nth-Child (nawet)„Jeszcze liczba wierszy”tr" będzie miał "szary" kolor tła:

Kolorowy nagłówek stołowy

Wyjście

Wniosek

Do Styl html Tabele, możesz skorzystać różne właściwości CSS Do dodawania i dostosowywania granic, tworzenia oblążków, dostosowywania szerokości i wysokości tabeli, wyrównania tekstu w poziomie lub pionowym, dodawaniu wierszy lub dostosowywania, kolumn lub komórek o określonych kolorach. Ten blog pokazał użycie różnych właściwości CSS dla tabel stylów dla strony internetowej. Spróbujcie stylizację stolików HTML w nowy sposób!

• « To najwyższy dysk rozmiaru 106 GB wystarczający do mojego laptopa?
• Jak zgłosić kogoś na niezgodę »