Tabele dodajemy za pomocą znaczników table, który tworzy tabele; tr, który tworzy kolumne; td, który tworzy wiersz; th, który także tworzy wiersz, który reprezentuje kolumnę lub wiersz. Domyślnie w tabelach jest zastosowany padding 5px jednak możemy go zmienić w dowolnym miejscu używając | style="padding:10px;" w moim przypadku jest on zastowsowany dla całej tabeli. Używamy w tabeli także border-spacing, które pozwala nam na określenie odległości między obramowaniami w tabeli | w przypadku mojej tabeli jest to border-spacing:5px;. Jeśli jednak chcemy uniknąć podwójnych lini w tabeli stosujemy | border-collaps:collaps;. Możemy w nich użyć hovera podobnie jak w linkach. Możemy dowolnie zmieniać wysokość i szerokość komórki. Możemy także scalać komórki tabeli colspan i rowspan. Scalanie wykonujemy w komórkach th i td rowspan scala wiersze a rowspan kolumny.
| Zmiana szerokości | style="width:50px;" | Zmiana wysokości, szerokość automatyczna | style="height: 50px; |
| To jest scalona komórka | colspan="2" | |
| To jest scalona komórka | rowspan="2" | |
| Możemy zarządzać tym jak ułożony będzie tekst w komórce np. | vertical-align:bottom; | |
To są style lini podkreślających. Bordery możemy także zaokrąglać co jest pokazane w tabeli powyżej i zostało wykonane za pomocą | border-radius: 10px;. Możemy wybierać w którym miejscu ma być umiejscowiona linia, jej grubość, styl oraz kolor:
Dodatkowa informacja dla ambitnych:
Aby wystylizować każdy inny element wiersza tabeli, użyj :nth-child(even) selektora w ten sposób:
jeśli użyjesz (odd)zamiast (even), stylizacja będzie miała miejsce w wierszu 1,3,5 itd. zamiast 2,4,6
itd.