HTML alapok › 5. modul: Táblázat › 5.3 lecke
HTML alapok · 5.3 lecke
Összetett táblázat: cellák összevonása
Dupla matekóra az órarendben, egy közös „hétvége” oszlop, egy torna programja: néha egy cellának több sort vagy oszlopot kell elfoglalnia. Ebben a leckében megtanulod a cellák összevonását, és azt is, mikor jobb egyszerűbb táblázatot készíteni.
A lecke végére
- vízszintesen összevonsz cellákat a
colspanattribútummal; - függőlegesen összevonsz cellákat a
rowspanattribútummal; - ellenőrzöd, hogy összevonás után is stimmel-e a cellák száma;
- tudod, hogy túl bonyolult táblázat helyett jobb több egyszerűt készíteni.
Mielőtt elkezded
Szükséged lesz az akadálymentes táblázat ismeretére.
Vízszintes összevonás: colspan
<tr> <th scope="row">Szombat</th> <td colspan="3">Egész napos kirándulás</td></tr>
A colspan="3" azt jelenti: ez a cella három oszlop szélességű. Ebben a sorban ezért csak egy td kell a három helyett.
Függőleges összevonás: rowspan, a dupla óra
<tr> <th scope="row">1. óra</th> <td rowspan="2">Informatika (dupla óra)</td> <td>Angol</td></tr><tr> <th scope="row">2. óra</th> <!-- itt nincs hétfői cella: az informatika lefoglalta --> <td>Matek</td></tr>
| Óra | Hétfő | Kedd |
|---|---|---|
| 1. óra | Informatika (dupla óra) | Angol |
| 2. óra | Matek |
Jósold meg!
Mi történne, ha a második sorba is írnál egy hétfői cellát?
Megoldás
A sor eggyel több cellát tartalmazna, mint kellene, így a „Matek” egy oszloppal jobbra csúszna, egy nem létező szerda oszlopba. Az összevont cella helyét a következő sorokban üresen kell hagyni.
Az aranyszabály: számolj cellát!
Minden sor ugyanolyan széles
Összevonás után is minden sorban ugyanannyi „helynek” kell lennie. Számolj így: egy sima cella 1 hely, a colspan="3" 3 hely, és ha felülről egy rowspan „belelóg” a sorba, az is foglal egy helyet.
Kihívás: cellaszámláló
Egy 4 oszlopos táblázat egyik sorában ez áll: egy th, egy colspan="2" cella és egy sima td. Hány hely ez? Jó így a sor? És ha a sor fölött egy rowspan-es cella lóg be?
Megoldás
1 + 2 + 1 = 4 hely, tehát jó. Ha egy rowspan is belelóg, akkor már 5 lenne, ezért az egyik sima cellát el kell hagyni.
Mértékkel: az egyszerű táblázat a legjobb
Túl bonyolult?
A sok összevonás a szemnek is nehéz, a felolvasóknak pedig még nehezebb. A W3C akadálymentességi útmutatója azt javasolja: ha egy táblázat nagyon bonyolult, bontsd több egyszerű táblázatra.
Széles táblázat mobilon
A sok oszlopos táblázat telefonon kilóghat. Erre a CSS ad megoldást (például egy vízszintesen görgethető keret), erről a CSS-tanfolyamon tanulsz. Már most is jó szabály: csak annyi oszlop, amennyi valóban kell.
Hibavadászat
1. Túl sok cella
<tr><th>Szombat</th><td colspan="3">Kirándulás</td><td></td></tr>
Mi a baj?
A colspan már 3 helyet foglal, az üres td egy ötödik oszlopot csinál. Hagyd el.
2. Ottmaradt cella a rowspan alatt
<tr><th>1. óra</th><td rowspan="2">Informatika</td><td>Angol</td></tr><tr><th>2. óra</th><td>Informatika</td><td>Matek</td></tr>
Mi a baj?
A második sorban nem kell újra hétfői cella, azt a rowspan már lefoglalta. A „Matek” emiatt jobbra csúszik.
3. colspan a rossz oszlopszámmal
<tfoot><tr><td colspan="2">Forrás: …</td></tr></tfoot> <!-- a táblázat 4 oszlopos -->
Mi a baj?
A forrássor csak két oszlopnyi széles lesz egy 4 oszlopos táblázatban. Helyesen: colspan="4".
Projekt: a saját órarended, dupla órákkal
Folytasd a saját oldalad projektet!
- Fejleszd tovább az 5.1-ben készült órarendedet: a dupla órákat vond össze rowspan-nel.
- Adj neki captiont, thead-et és tbody-t, a fejlécekre scope-ot.
- A táblázat alá (tfoot-ba) kerüljön egy megjegyzés colspan-nel (például „Az órarend a 2. félévre érvényes”).
- Számold végig soronként a helyeket!
Kész vagy, ha…
…minden sor ugyanannyi helyet foglal, a dupla órák helyesen összevontak, és a táblázat mobilon is áttekinthető.
Ellenőrizd magad!
Mit csinál a colspan="2"?
Két oszlop szélességűre nyújtja a cellát.
Mit csinál a rowspan="2"?
Két sor magasságúra nyújtja a cellát.
Mi a teendő a rowspan alatti sorban?
Az összevont cella helyére nem kell újabb cella.
Mit tegyél, ha egy táblázat nagyon bonyolult lenne?
Bontsd több egyszerű táblázatra.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: összetettebb táblázat a weblapon. A cellák összevonása a táblázatkezelésből és a szövegszerkesztésből is ismerős lehet, ami transzfert ad.
Módszertan
A dupla óra az órarendben mindenki számára ismerős helyzet, így a rowspan azonnal értelmet kap. A „cellaszámláló” kihívás egy egyszerű, algoritmikus ellenőrző eljárást tanít, a leggyakoribb hiba (elcsúszó cellák) megelőzésére.
Időterv
colspan: 8 perc. rowspan: 12 perc. Cellaszámolás: 10 perc. Mértékkel: 5 perc. Hibavadászat: 10 perc.