A lehető legegyszerűbb táblázat

Először is építsük fel a táblázathoz szükséges szemantikus HTML kódot � a példában most Észak-Amerika vulkánkitöréseit fogjuk megnézni. Nagyon szeretem a vulkánokat, és gyerekkoromban sikerült is meggyőznöm az édesanyámat, hogy vigyen el ezekhez a vulkánokhoz, amikor meglátogattuk a nagymamát. Nagyon reménykedtem benne, hogy a vakáció alatt valamelyik ki fog törni, de sajnos hiába. Lássuk akkor az első táblázatunkat:

<table>
    <tr>
        <td>Vulkán neve</td>
        <td>Hely</td>
        <td>Utolsó nagyobb kitörés</td>
        &tt;td>Kitörés típusa</td>
    </tr>
    <tr>
        <td>Mt. Lassen</td>
        <td>Kalifornia</td>
        <td>1914-17</td>
        <td>Explozív kitörés</td>
    </tr>
    <tr>
        <td>Mt. Hood</td>
        <td>Oregon</td>
        <td>1790</td>
        <td>Piroklaszt-torlóár és lávafolyás</td>
    </tr>
    <tr>
        <td>Mt .St. Helens</td>
        <td>Washington</td>
        <td>1980</td>
        <td>Explozív kitörés</td>
    </tr>
</table>

Lássuk, milyen részekből áll a fenti kódban látható HTML jelölés:

• <table></table>: A table tag mondja meg a böngészőnek, hogy a benne található tartalmat táblázatos formában szeretnéd elrendezni.
• <tr></tr>: A tr elemmel hozhatsz létre egy sort a táblázatban. Ezáltal a böngésző tudni fogja, hogy minden tartalmat a <tr> és </tr> tagek között vízszintesen rendezzen el, a táblázat egy sorában.
• <td></td>: A td elemmel határozhatsz meg egy cellát a táblázatban, vagy más önálló tartalmat a soron belül. Figyelj arra, hogy mindig csak annyi td elemet használj a cellákhoz, amennyire az adatoknak szüksége van. Ne használj üres cellákat azért, hogy kitöltsd a helyet, vagy távolabb tedd egymástól a cellákat � ilyen esetekben használhatod a CSS-t, amellyel könnyen készíthetsz kitöltéseket a táblázatban. Ez nem csak azért jobb módszer, mert szétválasztja a megjelenést az adatoktól, hanem a táblázat struktúrája is érthetőbb lesz például a gyengénlátók számára, akik képernyő-felolvasóval férnek hozzá a táblázatod tartalmához.

Az alap elemeket a következőképpen ágyazhatod egymásba:

<table>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

Ha más sorrendben használod őket, akkor az a böngésző számára olyan, mint egy hajcsomó: megpróbálhatja kigubancolni a kódot, de az eredmény nem garantált, sőt az sem biztos, hogy egyáltalán megjelenik a táblázat.

Adjunk hozzá több funkciót:

Most, hogy már megvan az alap táblázatunk, adjunk hozzá néhány komplexebb funkciót is � először is adunk neki egy címet és az oszlopoknak egy fejlécet, amelyek javítják a táblázat szemantikáját, és egyúttal megkönnyíti a képernyő-felolvasókat használók életét is. A módosított táblázat így néz ki:

<table>
    <caption>A legutóbbi nagyobb vulkánkitörések Észak-Amerikában</caption>
    <tr>
        <th>Vulkán neve</th>
        <th>Hely</th>
        <th>Utolsó nagyobb kitörés</th>
        <th>Kitörés típusa</th>
    </tr>
    <tr>
        <td>Mt. Lassen</td>
        <td>Kalifornia</td>
        <td>1914-17</td>
        <td>Explozív kitörés</td>
    </tr>
    <tr>
        <td>Mt. Hood</td>
        <td>Oregon</td>
        <td>1790</td>
        <td>Piroklaszt-torlóár és lávafolyás</td>
    </tr>
    <tr>
        <td>Mt .St. Helens</td>
        <td>Washington</td>
        <td>1980</td>
        <td>Explozív kitörés</td>
    </tr>
</table>

A következő új elemeket használtuk ebben:

• <caption></caption>: A caption elemmel adhatsz egy címet a táblázat adatainak. A legtöbb böngésző alapesetben a címet középre helyezi, és a szélessége akkora lesz, mint a táblázaté, kivéve, ha ezt átállítod CSS-ben.
• <th></th>: A th elem jelöli a táblázat oszlopainak a fejlécét. Ez azért hasznos, mert szemantikusan is jelöli a tartalom funkcióját, valamint segít abban, hogy a böngészők és a különböző eszközök pontosabban jelenítsék meg a tartalmat. A fenti példa a th elem legegyszerűbb használatát mutatja be.

Alakítsuk tovább a táblázatot:

A táblázat strukturálásában utolsó lépésként megadom a táblázat fejléc- és törzsszakaszait, hozzáadunk egy láblécet, valamint megadjuk a sorok és oszlopok hatókörét. Hozzáadunk még egy summary attribútumot is, amelyben összefoglaljuk a táblázat tartalmát.

<table summary="összefoglaló a legnagyobb vulkánkitörésekről Észak-Amerikában">
    <caption>A legutóbbi nagyobb vulkánkitörések Észak-Amerikában</caption>
    <thead>
        <tr>
            <th scope="col">Vulkán neve</th>
            <th scope="col">Hely</th>
            <th scope="col">Utolsó nagyobb kitörés</th>
            <th scope="col">Kitörés típusa</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">Készítette Ms. Jen 2008-ban</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">Mt. Lassen</th>
            <td>Kalifornia</td>
            <td>1914-17</td>
            <td>Explozív kitörés</td>
        </tr>
        <tr>
            <th scope="row">Mt. Hood</th>
            <td>Oregon</td>
            <td>1790</td>
            <td>Piroklaszt-torlóár és lávafolyás</td>
        </tr>
        <tr>
            <th scope="row">Mt .St. Helens</th>
            <td>Washington</td>
            <td>1980</td>
            <td>Explozív kitörés</td>
        </tr>
    </tbody>
</table>

A fent bemutatott elemek és attribútumok már elegendőek arra, hogy egy jó adattáblát készíthess. Most, hogy a HTML struktúra már megvan, néhány egyszerű CSS tulajdonsággal sokat javíthatunk a táblázat megjelenésén:

body {
	background: #ffffff;
	margin: 0;
	padding: 20px;
	line-height: 1.4em;
	font-family: tahoma, arial, sans-serif;
	font-size: 62.5%;
}

table {
	width: 80%;
	margin: 0;
	background: #FFFFFF;
	border: 1px solid #333333;
	border-collapse: collapse;
}

td, th {
	border-bottom: 1px solid #333333;
	padding: 6px 16px;
	text-align: left;
}

th {
	background: #EEEEEE;
}

caption {
	background: #E0E0E0;
	margin: 0;
	border: 1px solid #333333;
	border-bottom: none;
	padding: 6px 16px;
	font-weight: bold;
}

• body: A fenti példában hozzáadtam a CSS-hez néhány tulajdonságot. Beállítottam a margót (ebben az esetben nullára), a kitöltést, hogy legyen egy kis hely, a háttérszínt (fehérre), a betűméretet és a betűcsaládot, valamint a sormagasságot a levegősebb sorok kedvéért. A fenti példakódot innen töltheted le � változtasd meg nyugodtan a CSS tulajdonságokat, és próbáld ki, mi hogyan működik.
• table: Beállítottam a kereteket a CSS border tulajdonságával. Ahhoz, hogy ez jól működjön, be kellett állítanom a border-collapse tulajdonságot is a collapse értékre, hogy összevonjam a táblázat kereteit, és hogy később a border-bottom tulajdonság a teljes sorra vonatkozzon, és ne szakadjon meg minden cellánál. A szélességet 80%-ra állítottam (ez azt jelenti, hogy a táblázat a rendelkezésre álló szélesség 80%-át tölti ki; ha változtatjuk a böngésző szélességét, akkor a táblázat szélessége is változni fog).
• th és td: A fenti példa CSS-ben először balra igazítottam a szöveget, de te állíthatod középre is, sőt ha a th, td és tr elemekhez osztályneveket rendelsz, akkor a CSS-ben külön állíthatod a sorok, oszlopok, fejlécek stílusát. Mind a th, mind a td elemekhez adtam egy kevés kitöltést, hogy szélesebbek, és ezáltal olvashatóbbak legyenek a sorok. A fenti th szelektornál beállítottam egy eltérő színt is, hogy elválasszam a címeket a táblázat többi részétől.
• caption: Ha a caption szelektornak nem változtatod meg a tulajdonságait CSS-ben, akkor nem kap keretet, és a háttere ugyanolyan színű lesz, mint a lap többi részének a háttere, annak ellenére, hogy a HTML jelölés a caption elemhez már a table elemen belül van. Ezért a fenti példában adtam a caption elemnek egy keretet (a keret alsó része hiányzik, mivel azt a táblázat kerete már biztosítja), egy saját háttérszínt, valamint félkövér megjelenést, hogy elválasszam a táblázat fejlécétől.