HTML táblázat alapjai

Ez a cikk elkezdi a HTML-táblázatokkal való foglalkozást, amelyek áttekintik az alapokat, például a sorokat és a cellákat, a fejléceket, a cellákat több oszlopon és soron átívelik, valamint az oszlop összes celláját stilizálási céllal csoportosítják.

Előfeltételek: Célkitűzés:
A HTML alapjai (lásd: Bevezetés a HTML-be).
Alapvető ismeretek elsajátítása a HTML táblákkal kapcsolatban.

Mi az a táblázat ?

A táblázat sorokból és oszlopokból álló strukturált adatkészlet (táblázatos adatok). A táblázat segítségével gyorsan és egyszerűen megkeresheti azokat az értékeket, amelyek valamilyen kapcsolatot jeleznek a különböző típusú adatok között, például egy személy és életkora, vagy a hét egy napja, vagy a helyi úszómedence menetrendje.

html

A táblázatokat nagyon gyakran használják az emberi társadalomban, és már régóta használják, amint ezt az 1800-as amerikai népszámlálási dokumentum is bizonyítja:

Ezért nem csoda, hogy a HTML-készítők olyan eszközt biztosítottak, amely segítségével táblázatos adatokat szerkeszthetnek és megjeleníthetnek az interneten.

Hogyan működik egy asztal?

A táblázat lényege, hogy merev. Az információk könnyen értelmezhetők a sor- és oszlopfejlécek vizuális társításával. Nézze meg például az alábbi táblázatot, és találjon egy jovi gázóriást 62 holddal. A választ megtalálja a megfelelő sor- és oszlopfejlécek társításával.

Adatok a Naprendszerünk bolygóiról (Bolygó tények a Nasa Planetary Fact Sheet - Metric. Név Tömeg (10 24 kg) Átmérő (km) Sűrűség (kg/m 3) Súly (m/s 2) Nap hossza (óra) Távolság a naptól (10 6 km) Átlagos hőmérséklet (° C) A holdak száma Megjegyzések A Merkúr földi bolygói Vénusz föld Mars Jovi bolygók Gázóriások Jupiter Szaturnusz Jégóriások Uránusz Neptun Törpe bolygók a Plútó
0,330 4,879 5427 3.7 4222.6 57.9 167 0 Legközelebb a Naphoz
4.87 12,104 5243 8.9 2802.0 108.2 464 0
5.97 12,756 5514 9.8 24.0 149.6 15 1 A mi világunk
0.642 6,792 3933 3.7 24.7 227.9 -65 2 A vörös bolygó
1898 142,984 1326 23.1 9.9 778,6 -110 67 A legnagyobb bolygó
568 120,536 687 9.0 10.7 1433.5 -140 62
86.8 51,118 1271 8.7 17.2 2872.5 -195 27.
102 49,528 1638 11.0 16.1 4495.1 -200 14
0,0146 2,370 2095 0.7 153.3 5906.4 -225 5. 2006-ban besorolták bolygóvá, de ez továbbra is ellentmondásos.

Ha helyesen végezzük, vakok is értelmezhetik a táblázatos adatokat egy HTML-táblázatban - a sikeres HTML-tábla növeli a látás és a látássérült felhasználók élményét egyaránt.

Asztali stílus

Megtekintheti az élő példát is a GitHubon! Egy dolgot észre fog venni, hogy a táblázat valóban kicsit olvashatóbbnak tűnik ott - ez azért van, mert az ezen az oldalon fent látható táblázat minimális stílusú, míg a GitHub verzió jelentősebb CSS-t alkalmaz.

Ne legyen illúzió; Ahhoz, hogy a táblák hatékonyak legyenek az interneten, meg kell adnia néhány stílusinformációt a CSS-sel, valamint jó szilárd szerkezetet kell tartalmaznia a HTML-sel. Ebben a modulban a HTML részre összpontosítunk; hogy megtudja a CSS részt, keresse fel a Styling tables cikkünket, miután itt végzett.

Ebben a modulban nem a CSS-re koncentrálunk, de rendelkezésre bocsátottunk egy minimális CSS-stíluslapot, amely mindenféle stílus nélkül olvashatóbbá teszi a táblázatait, mint az alapértelmezett. A stíluslapot itt találja, valamint a stíluslapot alkalmazó HTML sablont is - ezek együtt jó kiindulópontot nyújtanak a HTML táblákkal való kísérletezéshez.

Mikor NE használjon HTML táblákat?

HTML táblákat kell használni a táblázatos adatokhoz - erre tervezték őket. Sajnos sokan HTML táblákat használtak weboldalak elrendezésére, pl. egy sor tartalmazza a fejlécet, egy sor a tartalmi oszlopokat, egy sor a láblécet stb. További részletek és egy példa megtalálható a Kisegítő lehetőségek tanuló modul oldalelrendezésében. Ezt általában azért használták, mert a böngészők közötti CSS-támogatás régen szörnyű volt; a táblázatok elrendezése manapság sokkal ritkábban fordul elő, de előfordulhat, hogy mégis az internet egyes sarkaiban látja őket.

Röviden, a táblázatok elrendezéshez való használata CSS elrendezési technikák helyett rossz ötlet. A fő okok a következők:

  1. Az elrendezési táblák csökkentik a látássérült felhasználók hozzáférhetőségét: A vakok által használt képernyőolvasók értelmezik a HTML-oldalon található címkéket, és elolvassák a felhasználó tartalmát. Mivel a táblák nem a megfelelő eszközök az elrendezéshez, és a jelölés bonyolultabb, mint a CSS elrendezési technikáknál, a képernyőolvasók kimenete zavaró lesz a felhasználók számára.
  2. Az asztalok taglevest készítenek: Mint fent említettük, a táblázatok elrendezése általában bonyolultabb jelölési struktúrákat tartalmaz, mint a megfelelő elrendezési technikák. Ez azt eredményezheti, hogy a kódot nehezebb írni, karbantartani és hibakeresni.
  3. A táblázatok nem reagálnak automatikusan: Ha megfelelő elrendezési tárolókat használ (például az elem bemutatja a bevezető tartalmat, általában bevezető vagy navigációs segédanyagok csoportját. Ez tartalmazhat néhány címsorelemet, de tartalmazhat logót, keresési űrlapot, szerzői nevet és más elemeket is. ">, Az elem önálló szakaszt képvisel - amelynek nincs konkrétabb szemantikai eleme az ábrázolásához - egy HTML dokumentumban. ">, az elem egy önálló összetételt képvisel egy dokumentumban, oldalon, alkalmazásban vagy webhelyen, amelyet szánt az, hogy függetlenül terjeszthető vagy újrafelhasználható (pl. szindikálásban). ">, vagy) a flow tartalom általános tárolója. A CSS használatával nem befolyásolja a tartalmat vagy az elrendezést.">

Aktív tanulás: Az első táblázat elkészítése

Eléggé megbeszéltük az asztalelméletet, ezért merüljünk el egy gyakorlati példában, és állítsunk össze egy egyszerű táblázatot.

  1. Először készítsen egy helyi másolatot az blank-template.html és a minimal-table.css fájlokról egy új könyvtárba a helyi gépen.
  2. Minden táblázat tartalmát ez a két címke határolja:. Adja hozzá ezeket a HTML-törzsébe.
  3. A táblázatban a legkisebb tároló egy tábla cella, amelyet a elem (a 'td' jelentése 'táblaadatok'). Adja hozzá a következőket a táblázat címkéihez:
  4. Ha négy cellás sort akarunk, ezeket a címkéket háromszor kell lemásolnunk. Frissítse a táblázat tartalmát, hogy így nézzen ki:

Ahhoz, hogy megakadályozzuk ennek a sornak a növekedését, és elkezdhessük a következő cellák elhelyezését a második sorban, használnunk kell a elem ('tr' jelentése 'táblázat sora'). Vizsgáljuk meg ezt most.

Ennek egy olyan táblázatot kell eredményeznie, amely a következőképpen néz ki:

Szia, én vagyok az első cellád. Én vagyok a második cellád. Én vagyok a harmadik cellád. Én vagyok a negyedik cellád.
Második sor, első cella. 2. cella. 3. cella. 4. cella.

jegyzet: Ezt megtalálhatja a GitHubon is, az simple-table.html néven (lásd élőben is).

_elements "> Fejlécek hozzáadása elemekkel

Most fordítsuk figyelmünket a táblázatfejlécekre - olyan speciális cellákra, amelyek egy sor vagy oszlop elején mennek, és meghatározzák a sor vagy oszlop adattípusát (példaként lásd a "Személy" és "Kor" cellákat az első részben. ebben a cikkben látható példa). Annak szemléltetésére, hogy miért hasznosak, tekintse meg a következő táblázat példáját. Először a forráskód:

Most a tényleges renderelt táblázat:

Knocky Flor Ella Juan
Fajta Jack Russell Uszkár Streetdog Cocker spániel
Kor 16. 9. 10. 5.
Tulajdonos Anyós Nekem Nekem Sógornő
Étkezési szokások Megeszi mindenki maradékát Az ételeket rágcsálja Kiadós evő Addig eszik, amíg fel nem robban

A probléma itt az, hogy bár valamennyire ki tudja deríteni, mi történik, a referenciaadatok keresztezése nem olyan egyszerű, mint lehet. Ha az oszlop- és sorfejlécek valamilyen módon kiemelkednének, sokkal jobb lenne.

Aktív tanulás: táblázat fejlécek

Menjünk tovább a táblázat javításán.

jegyzet: Kész példánkat megtalálhatja a dogs-table-fixed.html oldalon a GitHub-on (lásd élőben is).

Miért hasznosak a fejlécek?

Ezt a kérdést már részben megválaszoltuk - könnyebb megtalálni a keresett adatokat, amikor a fejlécek egyértelműen kiemelkednek, és a kialakítás általában jobbnak tűnik.

jegyzet: Az asztalfejlécek alapértelmezett stílusúak - félkövérek és középre állítottak, még akkor is, ha nem adod hozzá a saját stílusodat az asztalhoz, hogy elősegítsék a kiemelkedést.

A táblázatok fejléceinek is van egy további előnyük - a scope attribútummal együtt (amelyet a következő cikkben megtudhatunk) lehetővé teszik a táblázatok hozzáférhetőbbé tételét azáltal, hogy az egyes fejléceket az ugyanazon sorban vagy oszlopban található összes adathoz társítják. A képernyőolvasók ekkor képesek egy egész sor vagy oszlop adatait egyszerre kiolvasni, ami nagyon hasznos.

A cellák több soron és oszlopon átívelő engedélyezése

Néha azt akarjuk, hogy a cellák több sort vagy oszlopot öleljenek fel. Vegyük a következő egyszerű példát, amely megmutatja a közönséges állatok nevét. Bizonyos esetekben a hímek és nőstények nevét meg akarjuk jeleníteni az állat neve mellett. Néha nem, és ilyenkor csak azt akarjuk, hogy az állat neve átfogja az egész táblázatot.

A kezdeti jelölés így néz ki:

De a kimenet nem egészen azt adja nekünk, amit szeretnénk:

Állatok Víziló Ló Krokodil Csirke
Kanca
Csődör
Tyúk
Kakas

Szükségünk van egy módra arra, hogy az "Állatok", a "Víziló" és a "Krokodil" két oszlopra kiterjedjen, a "Ló" és a "Csirke" pedig két sorban lefelé. Szerencsére az asztalfejlécek és cellák tartalmazzák a colspan és a rowpan attribútumokat, amelyek lehetővé teszik számunkra, hogy csak ezeket a dolgokat tegyük meg. Mindkettő elfogadja az egység nélküli számértéket, amely megegyezik a lefedett sorok vagy oszlopok számával. Például a colspan = "2" egy cellát két oszlopon átível.

A táblázat javításához használjuk a colspan és a rowspan értékeket.

  1. Először készítsen helyi másolatot az animals-table.html és minimal-table.css fájljainkból a helyi gép új könyvtárába. A HTML ugyanazokat az állatokat tartalmazza, mint fent.
  2. Ezután a colspan segítségével állítsa be az "Állatok", a "Víziló" és a "Krokodil" két oszlopot.
  3. Végül használja a sorfesztávolságot, hogy a "Ló" és a "Csirke" átfusson két soron.
  4. Mentsen és nyissa meg a kódot egy böngészőben, hogy lássa a javulást.

jegyzet: Kész példánkat megtalálhatja a GitHubon a animals-table-fix.html oldalon (lásd élőben is).

Az oszlopok közös stílusának biztosítása

Vegyük a következő egyszerű példát:

Ez a következő eredményt adja nekünk:

1. adat 2. adat
Calcutta narancssárga
Robotok Dzsessz

Hatékonyan két "stílusoszlopot" határozunk meg, mindegyik oszlophoz meghatározunk egy-egy stílusinformációt. Nem az első oszlopot formázzuk, de mégis tartalmaznunk kell egy üres elemet - ha nem tennénk, akkor a stílus csak az első oszlopra vonatkozna.

Ha a stílusinformációkat mindkét oszlopra alkalmazni szeretnénk, akkor csak egy elemet felvehetünk rajta egy span attribútummal, így:

Csakúgy, mint a colspan és az sortávolság, a span is egység nélküli számértéket vesz fel, amely meghatározza az oszlopok számát, amelyekre a stílus alkalmazandó.

Aktív tanulás: colgroup és col

Itt az ideje, hogy maga menjen el.

Az alábbiakban láthatja a nyelvtanár menetrendjét. Pénteken egész nap új osztályt tanít hollandul, de kedden és csütörtökön néhány időszakig németül is tanít. Ki akarja emelni azokat az oszlopokat, amelyek a tanított napokat tartalmazzák.

Az alábbi lépések végrehajtásával hozza létre újra a táblázatot.

Nézze meg, hogyan áll a példával. Ha elakad, vagy meg akarja nézni a munkáját, akkor a GitHub-on megtalálja verziónkat: timetable-fix.html (nézze meg élőben is).

Összegzés

Ez csak a HTML táblázatok alapjainak összefoglalása. A következő cikkben megnézünk néhány kicsit fejlettebb táblázatfunkciót, és elkezdjük gondolkodni, mennyire hozzáférhetők a látássérültek számára.