HTML/CSS, Poradniki webdevelopera

Jak wdrożyć tabelę w HTML?

0

Podczas codziennej pracy, może się zdarzyć, że na własnej stronie internetowej, będziesz musiał wdrożyć tabelę. Można posłużyć się oczywiście kreatorami tabel lub po prostu przekopiować tabelę z programu np. Microsoft Word, nie mniej jednak znajomość struktury tabel w HTML może być naprawdę przydatna. W tym artykule przedstawimy i objaśnimy wszystkie zagadnienia odnośnie tabel.

Struktura tabel HTML

Poniżej przedstawiamy prawidłową strukturę tabeli w HTML:

<table>
	<thead>
		<tr>
			<th>...</th>
			<th>...</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>...</td>
			<td>...</td>
		</tr>
	</tbody>
</table>

Objaśnijmy tagi:

<table></table> – Tagi otwierające tabelę

<thead></thead> – Tagi odpowiadające za część nagłówkową

<tr> </tr> – Tagi odpowiadające za wiersz

<th></th> – Tagi odpowiadająće za kolumnę (wyróżnioną)

<tbody></tbody> – Tagi odpowiadające za część główną

<td></td> – Tagi odpowiadające za kolumnę

Praktyczny przykład tabeli z danymi:

<!Doctype html>
<html lang="pl">
<head>
<title>Ćwiczymy tabele</title>
<style>
table thead tr th {
    vertical-align: bottom;
    padding: 10px;
    text-align: center;
}
table tbody tr td {
    padding: .75rem;
    border-top: 1px solid #dee2e6;
    text-align: center;
    vertical-align: middle;
}
table {
    color: #fff;
    background-color: #212529;
    max-width: 100%;
    margin-bottom: 1rem;
    width: 300px;
}
</style>
</head>
<body>
<table>
<thead>
		<tr>
			<th>Usługa</th>
			<th>Cena</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Mycie okien</td>
			<td>100 zł</td>
		</tr>
		<tr>
			<td>Sprzątanie</td>
			<td>120 zł</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Efekt kodu:

Przykład kodu tabeli

Uwaga!

Aby tabela była przejrzysta, użyliśmy oscylowania w języku CSS w sekcji <head></head> pomiędzy znacznikami <style></style>. Sprawdź jak dodać CSS do HTML

Jak połączyć wiersze w tabeli?

W celu połączenia poszczególnych wierszy w tabeli, musimy skorzystać z polecenia rowspan, Objaśnimy to za pomocą prostego przykładu:

<table>
<thead>
		<tr>
			<th>Usługa</th>
			<th>Cena</th>
			<th>Suma</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Czyszczenie dachu</td>
			<td>200 zł</td>
			<td rowspan="2">220zł</td>
		</tr>
		<tr>
			<td>Mycie tapicerki</td>
			<td>140 zł</td>
		</tr>
	</tbody>
</table>

Uzyskany efekt:

Efekt połączenia wierszy

Objaśnienie:

Jak widzimy, aby połączyć wiersze, należy skorzystać z polecenia

– parametr „2” jest zmienny – w kontekście naszej tabeli ma łączyć 2 wiersze, jeżeli potrzeba będzie połączyć więcej to wystarczy zmienić ten parametr.

Jak połączyć kolumny tabeli?

W celu połączenia kolumn tabeli należy skorzystać z polecenia colspan, objaśnijmy to za pomocą przykładu:

<table>
<thead>
		<tr>
			<th>Usługa</th>
			<th>Cena</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Sprzątanie pokoju</td>
			<td>50 zł</td>
		</tr>
		<tr>
			<td>Mycie podsufitki</td>
			<td>140 zł</td>
		</tr>
		<tr>
		<td colspan="2">Suma: 190 zł</td>
		</tr>
	</tbody>
</table>

Uzyskany efekt:

Efekt połączenia kolumn tabeli

Objaśnienie:

Jak widzimy połączenie kolumn opiera się na użyciu parametru

– podobnie jak w przypadku rowspan – zmienną jest liczba, jeżeli chcemy połączyć więcej kolumn, wystarczy zmienić ten parametr.

Podsumowanie

Zapoznając się z artykułem posiadłeś podstawową wiedzę na temat tabel w HTML. Każdy przedstawiony przykład wraz z kodem są sprawne i można je śmiało wykorzystać na swoim serwisie internetowym. Jeżeli masz jakieś pytania to zapraszamy do pozostawienia komentarza.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *