HTML alapok › 5. modul: Táblázat › 5.1 lecke
Táblázat alapjai: sorok, oszlopok, cellák
HTML alapok · 5.1 lecke
Órarend, bajnoki tabella, telefonok összehasonlítása: ha adatokat sorokba és oszlopokba rendezünk, táblázatot kapunk. Ebben a leckében megépíted az első HTML-táblázatodat, és kiderül, miért néz ki meglepően „csupaszon”.
A lecke végére
- táblázatot készítesz a
table,tr,tdésthcímkékkel; - megkülönbözteted a fejléccellát és az adatcellát;
- eldöntöd, mikor való egy tartalomhoz táblázat, és mikor nem;
- kijavítod a leggyakoribb táblázathibákat.
Mielőtt elkezded
Szükséged lesz a HTML-dokumentum felépítésére.
Mikor való táblázat?
Táblázat akkor kell, ha az adatoknak két „iránya” van: soronként és oszloponként is összehasonlíthatók. Például egy bajnoki tabellában soronként a csapatokat, oszloponként a pontokat, a győzelmeket és a vereségeket olvasod.
Táblázat vagy sem?
Döntsd el! a) a hét órarendje; b) egy vers; c) három telefon ára, tárhelye és kamerája; d) egy bevásárlólista.
Megoldás
Táblázat: a) és c), mert soronként és oszloponként is van értelmük. A vers bekezdés br-rel (2.3), a bevásárlólista ul (2.4).
Építsük meg: egy osztálybajnokság tabellája
<table> <tr> <th>Csapat</th> <th>Győzelem</th> <th>Pont</th> </tr> <tr> <td>9.A</td> <td>4</td> <td>12</td> </tr> <tr> <td>9.B</td> <td>3</td> <td>9</td> </tr></table>
Soronként gondolkodj
A HTML-táblázat soronként épül: először megnyitod a sort (tr), beleteszed a cellákat balról jobbra, aztán lezárod a sort. Oszlopot nem kell külön megadni: az oszlop az egymás alatti cellákból áll össze.
Meglepetés: a csupasz táblázat
Jósold meg!
Lesznek vonalak a cellák között, ha így megnyitod a böngészőben?
| Csapat | Győzelem | Pont |
|---|---|---|
| 9.A | 4 | 12 |
| 9.B | 3 | 9 |
Megoldás
Nem! A böngésző alapból keret nélkül, csak igazítva mutatja a táblázatot. A HTML a szerkezetet adja meg (mi fejléc, mi adat), a vonalakat, a színeket és a térközöket a CSS. A fejléccellák viszont alapból félkövérek és középre igazítottak.
Egy kis CSS-sel (amit a CSS-tanfolyamon tanulsz) így néz ki ugyanez:
| Csapat | Győzelem | Pont |
|---|---|---|
| 9.A | 4 | 12 |
| 9.B | 3 | 9 |
Fejléccella: nem csak félkövér
A th nem azért van, hogy félkövér legyen a szöveg. Azt jelenti: ez a cella a sor vagy az oszlop címe. A felolvasóprogramok ebből tudják, hogy egy adat melyik oszlophoz tartozik, például: „Pont: 12”. Erről az 5.2 leckében részletesen lesz szó.
Kihívás: telefon-összehasonlítás
Készíts táblázatot három (akár kitalált) telefonról: név, ár, tárhely és kamera. Az első sor legyen fejléc. Melyiket vennéd meg, és a táblázat alapján miért?
Hibavadászat
1. Cella sor nélkül
<table> <td>9.A</td><td>12</td></table>
Mi a baj?
A td csak tr-ben állhat. Minden sort tr fog közre.
2. Hiányzó cella
<tr><th>Csapat</th><th>Győzelem</th><th>Pont</th></tr><tr><td>9.C</td><td>2</td></tr>
Mi a baj?
A 9.C sorából hiányzik a pont cella, így a táblázat „kilyukad”, és a felolvasó rossz oszlophoz rendelheti az adatot. Minden sorban ugyanannyi cella legyen (ha nincs adat, üres cella vagy „–”).
3. Táblázat elrendezésre
Mi a baj?
Régen a weboldalakat táblázatokkal rendezték hasábokba. Ma ez hiba: a felolvasó adattáblának hiszi, mobilon nem rendeződik át. Az elrendezés a CSS dolga, a táblázat csak adatokra való.
Projekt: órarend a saját oldaladon
Folytasd a saját oldalad projektet!
- Készíts egy
orarend.htmloldalt, és linkeld a menüből. - Készítsd el benne a heti órarendedet: az első sor a napok, az első oszlop az órák sorszáma legyen, mindkettő fejléccellával.
- Nézd meg a böngészőben: minden sor egyforma hosszú?
Kész vagy, ha…
…az órarend minden sora egyforma számú cellából áll, a fejlécek th-ban vannak, és egy társad elsőre kiolvassa belőle, mi a csütörtöki harmadik órád.
Ellenőrizd magad!
Mikor való táblázat egy tartalomhoz?
Ha az adatok soronként és oszloponként is összehasonlíthatók.
Mi a tr, a td és a th?
Sor, adatcella, fejléccella.
Miért nincs keret a táblázat körül?
Mert a keretet és a formázást a CSS adja, nem a HTML.
Szabad-e táblázattal oldalt elrendezni?
Nem; táblázat csak adatokra való, az elrendezés a CSS feladata.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: táblázat a weblapon. Kapcsolódik a táblázatkezelés (adatok sorokba és oszlopokba rendezése) témaköréhez.
Módszertan
A „csupasz táblázat” jóslós feladat a tartalom és a megjelenés szétválasztását teszi láthatóvá. A tabella, az órarend és a telefon-összehasonlítás a diákok saját világából jön. A „Táblázat vagy sem?” döntés a helyes elemválasztást gyakoroltatja.
Időterv
Mikor táblázat?: 6 perc. Építés: 12 perc. Csupasz táblázat: 6 perc. Fejléccella és kihívás: 11 perc. Hibavadászat: 10 perc. Az órarend-projekt otthoni vagy következő órai feladat.