tabele HTML

Tabele służą do tworzenia zestawień w postaci tabelarycznej.
Do tego celu używa się znaczników: <table>, <tr>, <th>, <td> i <caption>.
Natomiast formatowanie tabel powinno się odbywać za pomocą stylów CSS, w związku z czym w HTML5 większość atrybutów związanych z formatowaniem tabel jest traktowana jako przestarzała.

Tabele składają się z wierszy. Każdy wiersz ma określoną liczbę komórek, dlatego tworząc tabelę w języku HTML, należy nie tylko zdefiniować ją za pomocą znacznika <table>, ale także zdefiniować każdy jej wiersz przy użyciu znacznika <tr> oraz każdą komórkę w wierszu za pomocą znacznika <td>.
Nagłówek tabeli jest definiowany z zastosowaniem znacznika <th>.

Domyślnie tabela jest wyświetlana bez obramowań.
Rodzaj i styl obramowania są ustawiane za pomocą właściwości obramowań w arkuszach stylów CSS.

Po wprowadzeniu następującego kodu:

<table>
	<tr><th>Nazwisko</th><th>Imię</th><th>Wiek</th></tr>
	<tr><td>Kowalski</td><td>Tadeusz</td><td>36</td></tr>
	<tr><td>Polak</td><td>Adam</td><td>27</td></tr>
	<tr><td>Makowska</td><td>Anna</td><td>23</td></tr>
	<tr><td>Baranowska</td><td>Monika</td><td>24</td></tr>
</table>

otrzymamy tabelę:

Jak widać, tabela oraz komórki nie posiadają obramowania.
Należy zdefiniować je korzystając z arkusza CSS.
Definicje wprowadzamy w nagłówku strony.
Dodajemy następujący kod:

<style>
	table, th, td {
		border: 1px solid black;
	}
</style>

Po dodaniu opisu stylu otrzymamy tabelę:

Obramowanie tabeli i komórek możemy połączyć stosując właściwość CSS border-collapse z wartością collapse
Dodajemy do definicji stylu tabeli:

<style>
	table, th, td {
		border: 1px solid black;
		border-collapse: collapse;
	}
</style>

Nasza tabela wygląda teraz następująco:

Formatowanie komórek tabeli z zastosowaniem właściwości CSS:

• padding - margines wewnętrzny,
• border - obramowania,
• background - tło,
• text-align - położenie poziome,
• vertical-align - położenie pionowe,

Łączenie komórek tabeli

W języku HTML oprócz tabel, które mają taką samą liczbę komórek w każdym wierszu, można tworzyć tabele z różną liczbą komórek w wierszu. Efekt ten uzyskujemy poprzez łączenie komórek z sąsiednich kolumn.

Aby połączyć kilka komórek w wierszu, należy w znaczniku <td> lub <th>, opisującym komórkę tabeli, zdefiniować atrybut colspan="n", gdzie n określa, ile sąsiednich komórek zostanie połączonych.

Połączymy w jednej komórce zapis Nazwisko i imię stosując atrybut colspan:
<th colspan=2>Nazwisko i imię</th>

<table>
	<tr><th colspan=2>Nazwisko i imię</th><th>Wiek</th></tr>
	<tr><td>Kowalski</td><td>Tadeusz</td><td>36</td></tr>
	<tr><td>Polak</td><td>Adam</td><td>27</td></tr>
	<tr><td>Makowska</td><td>Anna</td><td>23</td></tr>
	<tr><td>Baranowska</td><td>Monika</td><td>24</td></tr>
</table>

efekt:

Łączenie komórek tabeli może się odbywać również w kolumnach.
Łączone są komórki tej samej kolumny znajdujące się w sąsiednich wierszach.
Do takiego łączenia komórek służy definiowany w znaczniku <td> atrybut rowspan="n".

Dodamy kolumnę miejscowość, gdzie dwie pierwsze osoby mieszkają w Warszawie.
<td rowspan=2>Warszawa</td>

kod tabeli:

<table>
<tr><th>Nazwisko</th><th>Imię</th><th>Miejscowość</th></tr>
<tr><td>Kowalski</td><td>Tadeusz</td><td rowspan="2">Warszawa</td></tr>
<tr><td>Polak</td><td>Adam</td></tr>
<tr><td>Makowska</td><td>Anna</td><td>Gdańsk</td></tr>
<tr><td>Baranowska</td><td>Monika</td><td>Poznań</td></tr>
</table>

efekt:

Znacznik <caption>

Znacznik <caption> pozwala dodać do tabeli tytuł. Znacznik ten musi być umieszczony bezpośrednio po znaczniku <table>. Przeglądarki internetowe tytuł podany w znaczniku <caption> umieszczają jako tekst wycentrowany nad tabelą.

stylizacja

W celu poprawienia czytelnoći tabeli wiersze mogą mieć inny styl dla parzystych odd i nieparzystych even.
Zmianę stylu uzyskujemy stosując właściwość:

• tr:nth-child(even) - wiersze nieparzyste
• tr:nth-child(odd) - wiersze parzyste

Zastosowanie następującej definicji stylu: (kolorem zielonym oznaczono elementy wprowadzające stylizację

<style>
	table {
		width:100%;
	}
	table, th, td {
		border: 1px solid black;
		border-collapse: collapse;
	}
	th, td {
		padding: 15px;
		text-align: left;
	}
	tr:nth-child(even) {
		background-color: #ccc;
	}
	tr:nth-child(odd) {
		background-color: #fff;
	}
	th {
		background-color: #888;
		color: white;
	}
</style>

daje efekt:

podsumowanie

• HTML <table> tworzy tabelę
• HTML <tr> tworzy wiersz
• HTML <td> tworzy komórkę tabeli
• HTML <th> tworzy komórkę nagłówka
• HTML <caption> tworzy tytuł tabeli
• CSS border definiuje obramowanie
• CSS border-collapse łączy obramowania komórek
• CSS padding określa wewnętrzny margines komórki
• CSS text-align określa poziome położenie tekstu
• CSS vertical-align określa pionowe położenie tekstu
• CSS border-spacing ustala odstęp między komórkami
• colspan łączy komórki poziomo
• rowspan łączy komórki pionowo