ZAWODNIK

Listy, tabele i odnośniki w HTML

INF.03 · teoria
autor: redakcja · 07.09.2026 · aktualizacja: 08.09.2026
Listy wypunktowane, numerowane i definicji, budowa tabeli od caption do tfoot, scalanie komórek atrybutami colspan i rowspan oraz odnośniki: do pliku, do miejsca na stronie i do adresu e-mail. Lekcja 3.5 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: htmlĆwicz dział: html
Lista, tabela i od­no­śnik to trzy ele­men­ty strony, z któ­rych arkusz CKE każe zbu­do­wać prawie każdą wi­try­nę: menu to lista od­no­śni­ków, cennik to tabela, a plik do po­bra­nia to od­no­śnik. W części pi­sem­nej wra­ca­ją py­ta­nia z ry­sun­kiem: jaki kod dał tę listę, ile ko­mó­rek scala colspan, który znacz­nik tworzy od­no­śnik i czym różni się href od src. W za­da­niu prak­tycz­nym po­le­ce­nie brzmi zwykle „lista nu­me­ro­wa­na wy­peł­nia­na przez skrypt PHP", „tabela z wier­sza­mi z bazy" i „od­no­śnik do pliku", więc te trzy ele­men­ty pi­szesz na każdym eg­za­mi­nie.

Listy: wy­punk­to­wa­na, nu­me­ro­wa­na, de­fi­ni­cji

Lista to zbiór punk­tów, w którym każdy punkt jest osob­nym ele­men­tem, a prze­glą­dar­ka sama do­kła­da przed nim punk­tor albo numer. Ro­dza­je są trzy, a różni je tylko znacz­nik ze­wnętrz­ny.
Lista wy­punk­to­wa­na (nie­nu­me­ro­wa­na) to <ul> (unordered list, lista nie­upo­rząd­ko­wa­na). Każdy punkt siedzi w <li> (list item, ele­ment listy). Lista nu­me­ro­wa­na to <ol> (ordered list, lista upo­rząd­ko­wa­na), z tym samym <li> w środku. Ko­lej­ność ma zna­cze­nie tylko w <ol>: to ona de­cy­du­je o nu­me­rach.
1
2
3
4
5
6
7
8
9
10
<ul>
<li>Klawiatury</li>
<li>Myszy</li>
<li>Monitory
<ul>
<li>24 cale</li>
<li>27 cali</li>
</ul>
</li>
</ul>
Tak wy­glą­da lista ka­te­go­rii sklepu z listą za­gnież­dżo­ną. Pod­li­sta stoi WEWNĄTRZ <li>, do któ­re­go należy, a nie między dwoma <li>. Prze­glą­dar­ka wcina ją i zmie­nia punk­tor, więc py­ta­nie „który kod dał ten wygląd" roz­strzy­ga się po tym, gdzie zamyka się <li> ro­dzi­ca.
Pu­łap­ka: dziec­kiem <ul> i <ol> może być wy­łącz­nie <li>. Akapit <p> albo na­głó­wek wrzu­co­ny prosto do listy to błąd wa­li­da­cji; tekst wkłada się do środka <li>.
Sposób nu­me­ro­wa­nia w <ol> zmie­nia­ją atry­bu­ty.
Zapis
Nu­me­ra­cja
<ol>
1, 2, 3
<ol type="A">
A, B, C (type="a" daje małe litery)
<ol type="I">
I, II, III (type="i" daje małe cyfry rzym­skie)
<ol start="5">
pierw­szy punkt do­sta­je numer 5, ko­lej­ne 6 i 7
<ol reversed>
od­li­cza w dół, od liczby punk­tów do je­dyn­ki
Trzeci rodzaj to lista de­fi­ni­cji <dl> (description list, lista opi­so­wa). Ma inną budowę: za­miast <li> stoją w niej pary, gdzie <dt> (definition term) to hasło, a <dd> (definition description) to jego wy­ja­śnie­nie. Jedno hasło może mieć kilka opisów.
1
2
3
4
5
6
<dl>
<dt>Klawiatura mechaniczna</dt>
<dd>Klawiatura z osobnym przełącznikiem pod każdym klawiszem.</dd>
<dt>Monitor IPS</dt>
<dd>Matryca o szerokim kącie widzenia.</dd>
</dl>
Menu strony to w HTML5 lista od­no­śni­ków za­mknię­ta w <nav>: znacz­nik sekcji mówi, że to na­wi­ga­cja, lista daje struk­tu­rę, a CSS usta­wia punkty obok siebie i chowa kropki. Znacz­ni­ki sekcji omawia lekcja o znacz­ni­kach sekcji.

Tabela: od cap­tion do tfoot

Tabela to siatka wier­szy i kolumn, w której jedna ko­mór­ka trzyma jedną war­tość. Buduje się ją wier­sza­mi, nie ko­lum­na­mi: ko­lum­ny po­wsta­ją same z tego, ile ko­mó­rek stoi w każdym wier­szu.
Znacz­nik
Znaczy
<table>
cała tabela
<caption>
tytuł tabeli, musi stać jako pierw­szy ele­ment w środku <table>
<thead>
grupa wier­szy na­głów­ka
<tbody>
grupa wier­szy z danymi
<tfoot>
grupa wier­szy pod­su­mo­wa­nia
<tr>
wiersz (table row)
<th>
ko­mór­ka na­głów­ko­wa (table header), do­myśl­nie po­gru­bio­na i wy­środ­ko­wa­na
<td>
ko­mór­ka z danymi (table data)
Cennik sklepu wy­glą­da w kodzie tak:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<caption>Cennik</caption>
<thead>
<tr><th>Kategoria</th><th>Produkt</th><th>Cena</th><th>Sztuk</th></tr>
</thead>
<tbody>
<tr><td rowspan="2">akcesoria</td><td>Klawiatura</td><td>120 zł</td><td>15</td></tr>
<tr><td>Mysz</td><td>45 zł</td><td>0</td></tr>
<tr><td>monitory</td><td>Monitor 24</td><td>650 zł</td><td>4</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">Razem sztuk</td><td>19</td></tr>
</tfoot>
</table>
Po­dział na <thead>, <tbody> i <tfoot> nie zmie­nia wy­glą­du, dopóki nie doj­dzie CSS, ale po­rząd­ku­je tabelę i po­zwa­la osty­lo­wać sam na­głó­wek albo samo pod­su­mo­wa­nie. <caption> to tytuł wi­docz­ny nad tabelą, a nie dymek: różni się tym od atry­bu­tu title.
Tabela cen z podpisanymi częściami: caption nad tabelą, thead z komórkami th, tbody z komórkami td, tfoot, komórka scalona w poziomie colspan i komórka scalona w pionie rowspan
Wygląd tabeli usta­wia się dziś w CSS, ale w ban­kach pytań siedzą jesz­cze atry­bu­ty z HTML 4: border ry­so­wał ramkę, cellpadding od­su­wał treść od kra­wę­dzi ko­mór­ki, cellspacing roz­su­wał ko­mór­ki od siebie. W HTML5 robią to wła­ści­wo­ści border, padding i border-spacing, a osobna wła­ści­wość border-collapse skleja po­dwój­ne ramki są­sied­nich ko­mó­rek w jedną linię.
Tabela służy do danych, nie do układu strony. Roz­kła­da­nie banera, menu i stopki na ko­mór­kach tabeli to sposób sprzed HTML5, dziś obo­wią­zu­ją znacz­ni­ki sekcji i CSS, a arkusz CKE wprost każe po­dzie­lić stronę „za pomocą znacz­ni­ków sekcji".

col­span i row­span: sca­la­nie ko­mó­rek

colspan (column span, roz­pię­tość na ko­lum­ny) scala ko­mór­ki w po­zio­mie, rowspan (row span, roz­pię­tość na wier­sze) w pionie. Obydwa stawia się przy ko­mór­ce, która ma być więk­sza, i podaje liczbą, ile miejsc zaj­mu­je.
W cen­ni­ku wiersz pod­su­mo­wa­nia ma colspan="3": napis „Razem sztuk" roz­cią­ga się na ko­lum­ny Ka­te­go­ria, Pro­dukt i Cena. Tabela ma cztery ko­lum­ny, ta jedna ko­mór­ka zaj­mu­je trzy, więc w całym wier­szu stoją tylko DWA znacz­ni­ki <td>, nie cztery. To jest sedno pytań z ry­sun­kiem: liczba ko­mó­rek w wier­szu nie równa się licz­bie kolumn, kiedy wy­stę­pu­je sca­la­nie. Spraw­dza się to do­da­wa­niem: suma za­ję­tych miejsc w wier­szu musi dać tyle, ile tabela ma kolumn, czyli 3 plus 1.
rowspan="2" przy ko­mór­ce „ak­ce­so­ria" działa tak samo, tylko w dół: Kla­wia­tu­ra i Mysz należą do tej samej ka­te­go­rii, więc jedna ko­mór­ka opi­su­je dwa wier­sze. Wiersz z Myszą ma przez to trzy ko­mór­ki za­miast czte­rech, bo pierw­sza jest już zajęta przez ko­mór­kę z wier­sza wyżej. Licząc ko­mór­ki ko­lej­ne­go wier­sza, zawsze naj­pierw odej­mij te, które zjadł rowspan z góry.

Od­no­śni­ki: znacz­nik a i atry­but href

Od­no­śnik (hi­per­łą­cze) to frag­ment strony, który po klik­nię­ciu prze­no­si w inne miej­sce. Tworzy go <a> (anchor, ko­twi­ca) z atry­bu­tem href (hypertext reference, adres celu). Kli­kal­ny jest tekst między znacz­ni­kiem otwie­ra­ją­cym a za­my­ka­ją­cym.
Rodzaj
Zapis
adres bez­względ­ny
<a href="https://cke.gov.pl">CKE</a>
adres względ­ny
<a href="kontakt.html">Kontakt</a>
plik do po­bra­nia
<a href="cennik.pdf" download>Cennik PDF</a>
miej­sce na tej samej stro­nie
<a href="#cena">Przejdź do cen</a>
adres e-mail
<a href="mailto:sklep@example.com">Napisz</a>
numer te­le­fo­nu
<a href="tel:+48123456789">Zadzwoń</a>
nowa karta
<a href="regulamin.html" target="_blank" rel="noopener">Regulamin</a>
Adres bez­względ­ny za­wie­ra pro­to­kół i domenę, więc działa z do­wol­nej strony. Adres względ­ny liczy się od po­ło­że­nia bie­żą­ce­go pliku: kontakt.html to plik obok, pliki/cennik.pdf to plik w pod­ka­ta­lo­gu, ../index.html to plik ka­ta­log wyżej, a /regulamin.html to ścież­ka od ka­ta­lo­gu głów­ne­go wi­try­ny.
Od­no­śnik z siatką # pro­wa­dzi w to samo miej­sce, w którym stoi ele­ment z takim samym id. Zapis href="#cena" prze­wi­ja stronę do ele­men­tu id="cena", a nie otwie­ra nowego pliku. Atry­but download mówi prze­glą­dar­ce, żeby plik pobrać za­miast wy­świe­tlać. target="_blank" otwie­ra cel w nowej karcie i do­pi­su­je się do niego rel="noopener", bo bez tego nowa karta do­sta­je dostęp do okna, z któ­re­go wyszła. Atry­but title daje dymek po na­je­cha­niu myszą.
Od­no­śni­kiem może być nie tylko tekst: obraz wsta­wio­ny przez <img> we­wnątrz <a> staje się kli­kal­ny w ca­ło­ści. Wsta­wia­nie ob­ra­zów opi­su­je lekcja o ob­ra­zach i mul­ti­me­diach.
Pu­łap­ka: href mówi, DOKĄD pro­wa­dzi od­no­śnik, a src (source, źródło), SKĄD pobrać plik do wsta­wie­nia w stronę. Dla­te­go <a href="..."> i <link href="...">, ale <img src="..."> i <video src="...">.
Kolor od­wie­dzo­ne­go od­no­śni­ka i zmiana po na­je­cha­niu to już CSS: robią to pseu­do­kla­sy :link, :visited, :hover i :active, a nie żaden atry­but HTML.

Wszyst­ko razem na stro­nie sklepu

Trzy ele­men­ty tej lekcji spo­ty­ka­ją się na jednej stro­nie: menu jako lista od­no­śni­ków w <nav>, cennik jako tabela w <main>, od­no­śnik do re­gu­la­mi­nu w stopce.
1
2
3
4
5
6
7
8
9
10
11
12
13
<nav>
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="#cennik">Cennik</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<main id="cennik">
<h2>Cennik</h2>
</main>
<footer>
<a href="regulamin.pdf" download>Regulamin sklepu (PDF)</a>
</footer>
Punkt menu „Cennik" nie pro­wa­dzi do osob­ne­go pliku, tylko prze­wi­ja stronę do bloku <main>, bo ma on id="cennik". Tabela cen z tej lekcji wcho­dzi do tego bloku pod na­głó­wek.

Na eg­za­mi­nie

W części pi­sem­nej py­ta­nia z tej lekcji mają kilka sta­łych kształ­tów. Ry­su­nek listy plus cztery frag­men­ty kodu: roz­strzy­ga, czy punkty mają numery (<ol>) czy punk­to­ry (<ul>) oraz gdzie zamyka się <li> przy za­gnież­dże­niu. Py­ta­nie o znacz­nik, który tworzy od­no­śnik: od­po­wie­dzią jest <a>, a nie <p>, <div> ani <img>. Py­ta­nie o atry­but wska­zu­ją­cy plik gra­ficz­ny: src, pod­czas gdy href pro­wa­dzi do celu od­no­śni­ka. Ry­su­nek tabeli i cztery kody, w któ­rych różnią się war­to­ści colspan i rowspan, albo py­ta­nie wprost, który atry­but scala ko­mór­ki w po­zio­mie. Wraca też lista de­fi­ni­cji: znacz­ni­kiem listy de­fi­ni­cji jest <dl>, a nie <td>, <abbr> czy <label>. Osobne py­ta­nie do­ty­czy target="_blank", czyli otwar­cia w nowym oknie albo nowej karcie.
Pu­łap­ka: przy py­ta­niu z ry­sun­kiem tabeli policz ko­mór­ki wiersz po wier­szu, za­miast pa­trzeć na całość. Ko­mór­ka z colspan="3" liczy się za trzy, a rowspan z wier­sza wyżej zaj­mu­je miej­sce w wier­szu niż­szym.
W za­da­niu prak­tycz­nym po­le­ce­nie „lista nu­me­ro­wa­na wy­peł­nia­na danymi przez skrypt PHP" znaczy tyle: w HTML pi­szesz <ol>, a po­je­dyn­cze <li> po­wsta­ją w pętli skryp­tu, po jednym na rekord z bazy. Tabela „której wier­sze wy­peł­nia skrypt" działa tak samo, tylko w pętli po­wsta­je <tr> z ko­mór­ka­mi <td>, a wiersz na­głów­ka z <th> pi­szesz ręcz­nie. Trze­cie stałe po­le­ce­nie to od­no­śnik do pliku po­da­ne­go w ar­ku­szu: nazwa pliku i ka­ta­log muszą zga­dzać się co do znaku, bo serwer roz­róż­nia wiel­kość liter, a od­no­śnik do nie­ist­nie­ją­ce­go pliku kosz­tu­je punkt w kry­te­rium „dzia­ła­nie wi­try­ny".

Ściąga

Ele­ment
Znacz­nik i atry­but
Uwaga
lista wy­punk­to­wa­na
<ul> z <li>
dziec­kiem może być tylko <li>
lista nu­me­ro­wa­na
<ol> z <li>
type="A", type="I", start="5", reversed
lista de­fi­ni­cji
<dl> z <dt> i <dd>
<dt> to hasło, <dd> to opis
tabela
<table>, <tr>, <th>, <td>
liczba kolumn wynika z liczby ko­mó­rek w wier­szu
części tabeli
<caption>, <thead>, <tbody>, <tfoot>
<caption> stoi jako pierw­szy w <table>
sca­la­nie w po­zio­mie
colspan="3"
ko­mór­ka liczy się za trzy ko­lum­ny
sca­la­nie w pionie
rowspan="2"
zaj­mu­je miej­sce także w wier­szu niż­szym
od­no­śnik
<a href="...">tekst</a>
href to cel, src to źródło pliku
od­no­śnik do pliku
<a href="cennik.pdf" download>
download po­bie­ra za­miast otwie­rać
od­no­śnik w stro­nie
<a href="#cena"> i id="cena"
prze­wi­ja do ele­men­tu o tym id
e-mail i te­le­fon
href="mailto:...", href="tel:..."
otwie­ra pro­gram pocz­to­wy albo dzwoni
nowa karta
target="_blank" rel="noopener"
rel za­bez­pie­cza otwie­ra­ne okno
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Znaczniki sekcji: header, nav, main, section, article, aside, footernastępna: Obrazy i multimedia: img, figure, audio, video, iframe, svg, canvasspis działu: HTML

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (51)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulaminKontakt
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.