tabele i listy
📚 1. Wprowadzenie teoretyczne
🔹 Do czego służą tabele
Tabele w HTML służą do:
✅ prezentacji danych tabelarycznych
✅ zestawień
✅ rankingów
✅ harmonogramów
❌ NIE do budowania layoutu strony (ważne!)
🧱 2. Podstawowe znaczniki
Struktura tabeli
<table>
<tr>
<td>Dane</td>
</tr>
</table>
🔹 Znaczniki
| Znacznik | Znaczenie |
|---|---|
<table> | tabela |
<tr> | wiersz |
<td> | komórka |
<th> | komórka nagłówkowa |
✅ Przykład podstawowy
<table border="1">
<tr>
<th>Imię</th>
<th>Wiek</th>
</tr>
<tr>
<td>Jan</td>
<td>20</td>
</tr>
</table>
🧠 3. Nagłówki tabeli
Różnica td vs th
<td>— zwykła komórka<th>— nagłówek (pogrubiony, wyśrodkowany)
Semantyczna struktura
<table>
<thead>
<tr>
<th>Produkt</th>
<th>Cena</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chleb</td>
<td>4 zł</td>
</tr>
</tbody>
</table>
🔗 4. Scalanie komórek
🔹 colspan — scalanie poziome
<td colspan="2">Scalona komórka</td>
🔹 rowspan — scalanie pionowe
<td rowspan="2">Scalona pionowo</td>
✅ Przykład
<table border="1">
<tr>
<th colspan="2">Dane ucznia</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
</tr>
</table>
🎨 5. Stylowanie tabel w CSS
❌ Przestarzałe
<table border="1">
✅ Poprawnie w CSS
<style>
table {
border-collapse: collapse;
}td, th {
border: 1px solid black;
padding: 8px;
}
</style>
⭐ Efekt zebra
tr:nth-child(even) {
background-color: blue;
}
przykład tabelki oraz listy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, td , th
{
border: 1px solid black;
border-collapse: collapse;
}
tr:nth-child(3n)
{
background-color: grey;
}
ul
{
list-style-type: disc;
list-style-position: inside;
}
ol
{
list-style-type: decimal;
list-style-position: inside;
}
.zag > li
{
color: red;
}
.zag > ol > li:first-child
{
color: blue;
}
</style>
</head>
<body>
<header>
<h2>
tabelka obecności ;)
</h2>
<p>tekst powyżej jest umieszczony w semantycznym znaczku nagłówkowym jako nagłówek 2 stopnia</p>
</header>
<main>
<table>
<tr>
<th>Imie</th>
<th>Nazwisko</th>
<th>Wiek</th>
<th>Uwagi</th>
</tr>
<tr>
<td>Maurycy</td>
<td>Nowak</td>
<td>36</td>
<td>Wrocław</td>
</tr>
<tr>
<td>Julia</td>
<td>Kowalska</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>Julek</td>
<td>Kowal</td>
<td>42</td>
<td>paszport polsatu</td>
</tr>
<tr>
<td>Julia</td>
<td>Kowalska</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>Julek</td>
<td>Kowal</td>
<td>42</td>
<td>paszport polsatu</td>
</tr>
<tr>
<td>Julia</td>
<td>Kowalska</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>Julek</td>
<td>Kowal</td>
<td>42</td>
<td>paszport polsatu</td>
</tr>
</table>
<section>
<h3>
lista nieuporządkowana (nienumerowana - ul)
</h3>
<ul> Przedmioty szkolne
<li>matematyka</li>
<li>historia</li>
<li>fizyka</li>
<li>w-f</li>
</ul>
<h3>Lista uporządkowana (numerowana - ol)</h3>
<ol>Ranking obecności
<li>1a</li>
<li>2b</li>
<li>4e</li>
<li>3c</li>
</ol>
<h3>
zagnieżdzanie list
</h3>
<ul class="zag"> top seriali
<li>kryminał</li>
<ol>
<li>Kości</li>
<li>Zabójcze umysły</li>
<li>Czarna lista </li>
</ol>
<li>Fantasy</li>
<ol>
<li>Gra o tron</li>
<li>Stranger things</li>
<li>Ród smoka</li>
</ol>
<li>Komedie</li>
<ol>
<li>Teoria Wielkiego podrywu</li>
<li>Friends</li>
<li>Rick i Morty</li>
</ol>
</ul>
</section>
</main>
<footer>
<p><strong>imie i nazwisko</strong></p>
</footer>
</body>
</html>