Bár elavult szerkezeti struktúra, de a középfokú informatika érettségin még mindig kérik a táblázatok használatát különféle oldalszerkezetek kialakításához.
Ennek az igénynek eleget téve, nézzük át, hogyan használjuk fel a táblázatot, illetve annak tulajdonságait weboldalak szerkesztéséhez.
Legfőképp az alábbi tulajdonságokat fogjuk felhasználni:
- táblázat szélessége és igazítása
- sor/cella magassága és szélessége
- vízszintes és függőleges cellaegyesítés
- a sorok és cellák háttérszínének meghatározása
Ezek után nézzük a mintafeladatot!
Célunk az alábbi oldalszerezet megvalósítása:
Ehhez a következő táblázati szerkezettel is eljuthatunk - visszafelé haladva bemutatva:
|
|
|
|
|
| Céltáblázat - 5. lépés |
4. lépés |
3. lépés |
2. lépés |
1. lépés - kiinduló táblázat |
És akkor most már nézzük normál értelmezésben, előre haladva a kiindulástól a célig:
- 1. lépés: elkészítjük az kiinduló táblázatot, amelynek 4 oszlopa és 7 sora van. A cellákat feltöltjük
sorszámokkal, azért, hogy a későbbiek során, a cellák egyesítésekor segítségünkre legyenek abban, melyik cella a felesleges a szerkezet kialakításában.
|
|
| forrás (részlet) |
eredmény |
- 2-3. lépés: Emeljük meg a sorok magasságát a következők szerint:
- 1. sor: 200pt
- 2. sor: 30pt
- 3-6. sor: 80pt
- 7. sor: 25pt
|
|
| forrás (részlet) |
eredmény |
- 4. lépés: a leírásban következő 4. lépésben nem a cellák háttérszínének megváltoztatásával kezdjük, hanem a "colspan" (vízszintes cellaegyesítés
és a "rowspan" (függőleges cellaegyesítés) tulajdonságok megfelelő használatával érjük el a céltálbázat szerkezetének állapotát.
|
|
| forrás (részlet) |
eredmény |
Az előző feladat elvégzése után látható, hogy a függőleges cellaegyesítést a 10. cellára kell kiadni, méghozzá a 10., a 14., a 18. és a 22. cellát értve ezalatt.
Ez 4 cella függőleges egyesítését eredményezi majd, tehát megkapjuk a mintafeladat elején deklarált "Tartalom" részt
|
|
| forrás |
eredmény |
Jól látható a függőleges cellaegyesítés eredménye:
|
|
| forrás |
eredmény |
- 5. lépés: Végül, de nem utolsó sorban határozzuk meg azt, hogy az 5., 6., 7. és a 8. cella szélessége azonos legyen. Ha tudjuk, hogy a táblázat teljes
szélessége 600 pt, akkor logikus, hogy a négy cellára egyenként 150 pt jut. Állítsuk be ezt az értéket.
|
|
| forrás |
eredmény |
Gyakorló feladat
- A tanultak alapján hozzuk léter az alábbi oldalszerkezeteket (A sor/oszlop szélességét és magasságát egyénileg határozzuk meg!):
Táblázat készítése - felelet
A tanultak alapján, továbbá az alábbi feladatsor és a minta segítségével készítsd el a táblázatot.
- Készíts el egy szabályos html oldalszerkezetet. A böngészőfülön megjelenő szöveg: Táblázat - felelet
- Az oldal háttérszíne legyen rgb(0,96,125) kódolású
- A táblázat legyen középre igazított, 1000pt széles. A forráskódot lásd el megjegyzésekkel.
