Domyślne tabele HTML wyglądają dość rozczarowująco — podkręć je za pomocą dobrze wyglądających efektów CSS.
Dodanie tabeli do witryny to przydatny sposób na przejrzystą prezentację dużej ilości informacji. Tabele zapewniają również efektywne wykorzystanie przestrzeni i ułatwiają odczytywanie i porównywanie złożonych danych.
Możesz projektować tabele, aby były bardziej atrakcyjne wizualnie za pomocą CSS. Może to również poprawić ogólne wrażenia użytkownika w Twojej witrynie.
Nowoczesny projekt pojedynczych rzędów i kolumn
Możesz dodać prosty projekt tabeli z pojedynczymi wierszami i kolumnami bez scalonych komórek. Stylizacja tabeli zapewnia również, że Twoja strona internetowa jest atrakcyjna dla użytkownika. Oprócz stylizacji stołu istnieją inne fajne efekty HTML I CSS wyświetla układy stron internetowych możesz dodać do swojej witryny.
Możesz zobaczyć kod tego ćwiczenia w jego Repozytorium GitHub.
- W nowym pliku HTML dodaj podstawową strukturę kodu HTML:
HTML>
<HTML>
<głowa>
<tytuł>Mój prosty stółtytuł>
głowa>
<ciało>
ciało>
HTML> - Wewnątrz ciała dodaj tagi tabeli:
<tabela>
tabela> - Element tabeli HTML powinien zawierać wiersz tabeli znaczniki dla każdego wiersza w tabeli. Górny rząd jest powszechnie używany do nagłówków. Używać nagłówek tabeli Tagi HTML reprezentujące każdą kolumnę w tabeli:
<tr>
<cz>Nagłówek 1cz>
<cz>Nagłówek 2cz>
<cz>Nagłówek 3cz>
tr> - Dodaj więcej wierszy pod wierszem nagłówka. Używać dane tabeli Tagi HTML do dodawania danych do każdej komórki w tabeli:
<tr>
<td>Wiersz 1, Kolumna 1td>
<td>Wiersz 1, Kolumna 2td>
<td>Wiersz 1, Kolumna 3td>
tr>
<tr>
<td>Wiersz 2, Kolumna 1td>
<td>Wiersz 2, Kolumna 2td>
<td>Wiersz 2, Kolumna 3td>
tr>
<tr>
<td>Wiersz 3, Kolumna 1td>
<td>Wiersz 3, Kolumna 2td>
<td>Wiersz 3, Kolumna 3td>
tr>
<tr>
<td>Wiersz 4, kolumna 1td>
<td>Wiersz 4, Kolumna 2td>
<td>Wiersz 4, Kolumna 3td>
tr>
<tr>
<td>Wiersz 5, Kolumna 1td>
<td>Wiersz 5, Kolumna 2td>
<td>Wiersz 5, Kolumna 3td>
tr> - Dodaj tag stylu wewnątrz tagu head. Dodaj ogólne style do tabeli, takie jak cienie, zaokrąglone rogi tabeli, czcionki i marginesy:
<styl>
tabela {
upadek granicy: zawalić się;
szerokość: 100%;
kolor: #333;
rodzina czcionek: Arial, bezszeryfowe;
rozmiar czcionki: 14piks;
wyrównanie tekstu: lewy;
promień granicy: 10piks;
przelewowy: ukryty;
pudełko-cień: 0 0 20piksrgba(0, 0, 0, 0.1);
margines: automatyczny;
górny margines: 50piks;
margines-dolny: 50piks;
}
styl> - Styl nagłówka tabeli, aby nadać mu kolor tła i wyrównany tekst:
tabelacz {
kolor tła: #ff9800;
kolor: #ffff;
grubość czcionki: pogrubiony;
wyściółka: 10piks;
przekształcanie tekstu: duże litery;
odstępy między literami: 1piks;
szczyt granicy: 1pikssolidny#ffff;
granica-dół: 1pikssolidny#ccc;
} - Stylizuj wiersze tabeli tak, aby zmieniały się kolory szare i białe oraz aby dodać efekt po najechaniu kursorem na wiersz:
tabelatr:n-te dziecko (parzyste)td {
kolor tła: #f2f2f2;
}tabelatr:unosić siętd {
kolor tła: #ffedcc;
} - Stylizuj dane wewnątrz komórek tabeli:
tabelatd {
kolor tła: #ffff;
wyściółka: 10piks;
granica-dół: 1pikssolidny#ccc;
grubość czcionki: pogrubiony;
} - Otwórz plik HTML, aby wyświetlić tabelę w przeglądarce internetowej:
Wieloliniowy projekt tabeli komórek
Niektóre tabele zawierają kolumny ze scalonymi wierszami, które tworzą wielowierszową komórkę.
- Usuń wszystkie bieżące wiersze tabeli, pozostawiając tylko górny z nagłówkami:
<tabela>
<tr>
<cz>Nagłówek 1cz>
<cz>Nagłówek 2cz>
<cz>Nagłówek 3cz>
tr>
tabela> - Utwórz wielowierszową komórkę, używając atrybutu rowspan. Spowoduje to rozszerzenie tej komórki na określoną liczbę wierszy.
Sekcja 1
<tr>
<tdrozpiętość rzędów="2">Komórka wieloliniowatd>
<td>Wiersz 1, Kolumna 2td>
<td>Wiersz 1, Kolumna 3td>
tr>
<tr>
<td>Wiersz 2, Kolumna 2td>
<td>Wiersz 2, Kolumna 3td>
tr> - Dodając kolejną linię wielokomórkową z inną wartością rozpiętości wierszy, dodaj odpowiednią liczbę rzędy tabeli znaczniki HTML. Ma to na celu dopasowanie wysokości lub liczby wierszy, które obejmuje komórka. Na przykład, jeśli komórka ma rozpiętość wierszy równą 3, konieczne będzie dodanie trzech wierszy do pozostałych kolumn, aby prawidłowo wyrównać tabelę.
Sekcja 2
<tr>
<tdrozpiętość rzędów="3">Komórka wieloliniowatd>
<td>Wiersz 3, Kolumna 2td>
<td>Wiersz 3, Kolumna 3td>
tr>
<tr>
<td>Wiersz 4, Kolumna 2td>
<td>Wiersz 4, Kolumna 3td>
tr>
<tr>
<td>Wiersz 5, Kolumna 2td>
<td>Wiersz 5, Kolumna 3td>
tr> - Otwórz plik HTML, aby wyświetlić tabelę w przeglądarce internetowej:
Scalony projekt tabeli wierszy
Podobnie jak w przypadku komórek wielowierszowych, tabele mogą również zawierać wiersze, które łączą się w wielu kolumnach.
- Usuń wszystkie bieżące wiersze tabeli, pozostawiając tylko górny z nagłówkami:
<tabela>
<tr>
<cz>Nagłówek 1cz>
<cz>Nagłówek 2cz>
<cz>Nagłówek 3cz>
tr>
tabela> - Dodaj więcej wierszy tabeli do tabeli. Użyj atrybutu colspan, aby scalić jeden z wierszy w 3 kolumnach:
Sekcja 1
<tr>
<tdstyl=„kolor tła: #ffedcc”kolspan="3">Q1td>
tr>
<tr>
<td>Wiersz 2, Kolumna 1td>
<td>Wiersz 2, Kolumna 2td>
<td>Wiersz 2, Kolumna 3td>
tr>
<tr>
<td>Wiersz 3, Kolumna 1td>
<td>Wiersz 3, Kolumna 2td>
<td>Wiersz 3, Kolumna 3td>
tr>
<tr>
<td>Wiersz 4, kolumna 1td>
<td>Wiersz 4, Kolumna 2td>
<td>Wiersz 4, Kolumna 3td>
tr> - Dodaj kolejny scalony wiersz, aby oddzielić sekcje tabeli:
Sekcja 2
<tr>
<tdstyl=„kolor tła: #ffedcc”kolspan="3">Q2td>
tr>
<tr>
<td>Wiersz 6, kolumna 1td>
<td>Wiersz 6, kolumna 2td>
<td>Wiersz 6, Kolumna 3td>
tr>
<tr>
<td>Wiersz 7, kolumna 1td>
<td>Wiersz 7, kolumna 2td>
<td>Wiersz 7, Kolumna 3td>
tr>
<tr>
<td>Wiersz 8, kolumna 1td>
<td>Wiersz 8, kolumna 2td>
<td>Wiersz 8, Kolumna 3td>
tr> - Otwórz plik HTML, aby wyświetlić tabelę w przeglądarce internetowej:
Korzystaj z atrakcyjnych tabel, aby jak najlepiej wykorzystać swoje dane
Tabele HTML to świetny sposób wyświetlania uporządkowanych danych w Twojej witrynie. Możesz stylizować je za pomocą CSS, aby poprawić domyślny wygląd. Nie daj się jednak ponieść emocjom i używaj tabel do tworzenia układu — ze względu na ułatwienia dostępu trzymaj je wyłącznie do przechowywania danych.
Większe tabele mogą być pracochłonne w tworzeniu i aktualizowaniu, zwłaszcza jeśli korzystasz z kolumn i wierszy, które się rozciągają. Możesz napisać własny kod, aby wygenerować znaczniki lub skorzystać z bardziej przyjaznej składni, takiej jak Markdown.