piątek, 2020-10-23

Atrybuty związane z tabelą

Znaczniki HTML związane z tabelami mają kilka charakterystycznych dla siebie atrybutów.

We wszystkich przykładach zastosowano te same reguły CSS. Zostały one zamieszczone poniżej.

table{border-collapse: collapse; width: 768px;}
td, th{padding: 5px; border: solid 1px #777; width: 33%;}

Atrybuty colspan i rowspan pozwalają na scalanie komórek w pionie lub w poziomie.

Uczeń		Klasa
Kowalski	Jan	2TI
Lipny	Karol

<table>
	<tr>
		<th colspan="2">Uczeń</th>
		<th>Klasa</th>
	</tr>
	<tr>
		<td>Kowalski</td>
		<td>Jan</td>
		<td rowspan="2">2TI</td>
	</tr>
	<tr>
		<td>Lipny</td>
		<td>Karol</td>
	</tr>
</table>

Atrybut headers służy do kojarzenia komórek danych z komórkami nagłówka w tabelach. Nie daje on żadnych efektów wizualnych w standardowych przeglądarkach. może być wykorzystany przez czytniki ekranu.

Nazwisko	Imię	Klasa
Kowalski	Jan	2TI
Lipny	Karol	2TI

<table>
	<tr>
		<th id="nazwisko">Nazwisko</th>
		<th id="imie">Imię</th>
		<th id="klasa">Klasa</th>
	</tr>
	<tr>
		<td headers="nazwisko">Kowalski</td>
		<td headers="imie">Jan</td>
		<td headers="klasa">2TI</td>
	</tr>
	<tr>
		<td headers="nazwisko">Lipny</td>
		<td headers="imie">Karol</td>
		<td headers="klasa">2TI</td>
	</tr>
</table>

Atrybut scope określa, czy nagłówek dotyczy kolumny, wiersza czy grupy kolumn lub wierszy. Nie daje on żadnych efektów wizualnych w standardowych przeglądarkach. może być wykorzystany przez czytniki ekranu.

	Imię	Klasa
Kowalski	Jan	2TI
Lipny	Karol	2TI

<table>
	<tr>
		<th></th>
		<th scope="col">Imię</th>
		<th scope="col">Klasa</th>
	</tr>
	<tr>
		<th scope="row">Kowalski</th>
		<td>Jan</td>
		<td>2TI</td>
	</tr>
	<tr>
		<th scope="row">Lipny</th>
		<td>Karol</td>
		<td>2TI</td>
	</tr>
</table>

Atrybut span może być stosowany w znacznikach col i colgroup. Jego funkcja to określenie liczby kolumn, które obejmuje element. W poniższym kodzie nie ma błędu, znacznik col nie wymaga domknięcia.

Nazwisko	Imię	Klasa
Kowalski	Jan	2TI
Lipny	Karol	2TI

<table>
	<col span="2">
	<col>
	<tr>
		<th>Nazwisko</th>
		<th>Imię</th>
		<th>Klasa</th>
	</tr>
	<tr>
		<td>Kowalski</td>
		<td>Jan</td>
		<td>2TI</td>
	</tr>
	<tr>
		<td>Lipny</td>
		<td>Karol</td>
		<td>2TI</td>
	</tr>
</table>