A HTML-táblázatok maximális kihasználása a táblázatos attribútumok megismerésével
A HTML táblázati attribútumok sokkal többet tudnak irányítani a HTML táblázatokon. Számos attribútum áll rendelkezésre a táblázatokhoz, hogy érdekesebbé tegye őket, és megváltoztassa oldalának megjelenését.
HTML TABLE elem attribútumok
A HTML5-ben az elem a globális attribútumokat és egy másik attribútumot használja:. És csak 1-es vagy üres (azaz border = "") értéke változott. Ha módosítani szeretné a szélesség szélességét, akkor használja a szélesség szélességű CSS tulajdonságot.
Az alábbiakban olvashatsz az érvényes HTML5 táblázati attribútumokról.
A HTML5-ben már elavult HTML 4.01-specifikáció részét képező több attribútum is létezik:
- - Használja a CSS padding tulajdonságot az asztal TD és TH elemein.
- - Használja a CSS tulajdonság határvonalát az asztalon.
- -CSS stílusok használata border-color: black; és a határvonalon az asztalon.
- -CSS stílusok használata border-color: black; és a határvonalon a táblázat megfelelő elemein.
- - Helyette írja le a táblázat struktúráját CAPTION-ban, vagy tegye az egész táblázatot ÁBRÁBA, és írja le egy FIGCAPTION-ban. Alternatív megoldásként egyszerűsítheti a táblázat szerkezetét, így nincs szükség magyarázatra.
- -A CSS szélesség tulajdonság használata.
És egy attribútum, amely elavult a HTML 4.01-ben, és elavult a HTML5-ben is.
További információ a HTML 4.01 TABLE tulajdonságairól.
- align - Használja a CSS margin tulajdonságot.
Vannak olyan tulajdonságok is, amelyek nem tartoznak semmilyen HTML-specifikációhoz.
Használja ezeket az attribútumokat, ha tudják, hogy a támogatott böngészők képesek kezelni őket, és nem érdekli az érvényes HTML.
- -Ahelyett használja a CSS tulajdonság háttérszínét.
- bordercolor - Használja a CSS tulajdonság határszíne helyett.
- bordercolorlight - Használja a CSS tulajdonság border-color helyett.
- bordercolordark - Használja a CSS tulajdon border-color helyett.
- cols -Ez a tulajdonságnak nincs alternatívája.
- magasság - használja a CSS tulajdonságmagasságát.
- -Ahelyett használja a CSS tulajdonság-margót.
- -Ahelyett használja a CSS tulajdonság-margót.
- -Ahelyett használja a CSS tulajdonság fehér-területét.
- -Használja a CSS tulajdonság vertikális igazítását helyette.
További információ a böngésző specifikus TABLE tulajdonságairól.
HTML5 TABLE elem-attribútumok
Amint fent említettük, csak egy attribútum van a globális attribútumokon túl, ami egy HTML5 TABLE elemen érvényes: határ.
A border attribútum segítségével határokat határoznak meg az egész tábla és az összes benne lévő cellák köré. Volt kérdés, hogy a HTML5 specifikációban szerepelt volna-e, de azért maradt, mert a táblázati struktúrával kapcsolatos információkat szolgáltatta, egyszerűen a stílus jellegzetességeit illetően.
A határérték-attribútum hozzáadásához az értéket 1-re állítja, ha van egy határ és üres (vagy hagyja abba az attribútumot), ha nincs. A legtöbb böngésző támogatja a 0-t sem szegély nélkül, és bármely más egész értéket (2, 3, 30, 500 stb.), Hogy kijelölje a szélesség szélességét képpontokban, de ez elavult a HTML5-ben. Ehelyett a CSS határstílus-tulajdonságokat kell használnia a határ szélességének és egyéb stílusainak meghatározásához.
Ha táblát szeretne létrehozni, írjon:
border = "1" >
Ez egy táblázatot tartalmazó határ
A HTML5-ben elavult HTML 4.01-attribútumok vannak. Ha HTML 4.01-es dokumentumokat szeretne írni, akkor megtudhatja őket, különben figyelmen kívül hagyhatja őket. Ezeknek az attribútumoknak a többsége a fent leírt alternatívákkal rendelkezik.
Az elem attribútumait a HTML5 (és a HTML 4.01-ben érvényes) attribútumaiban ismertetjük. Ez leírja a TABLE tulajdonságokat, amelyek érvényesek a HTML 4.01-ben, de elavultak a HTML5-ben. Ha még mindig HTML 4.01-es dokumentumokat írsz, használhatod ezeket az attribútumokat, de a legtöbb közülük olyan alternatívákkal rendelkezik, amelyekkel az oldalak jövőképesebbek lesznek a HTML5-ös áttéréskor.
Érvényes HTML 4.01 attribútumok
A fent ismertetett attribútum.
Az egyetlen különbség a HTML 4.01-ben a HTML5-ből, hogy megadhat bármilyen egész egész számot (0, 1, 2, 15, 20, 200 stb.), Hogy meghatározza a szegély szélességét pixelben.
Ha egy táblát szeretne létrehozni egy 5px határral, írja:
border = "5" >
Ez a tábla 5px határral rendelkezik.
Lásd a két, határokkal ellátott táblázatot.
Az attribútum határozza meg a cellák határainak és a cellák tartalmának helyet. Az alapértelmezés két képpont. Állítsa a cellpadding-t 0-ra, ha nem kíván helyet a tartalom és a határok között.
A cellatömítés 20-ra állításához írja be:
cellpadding = "20" >
Ez a tábla 20 cellatábla.
A cellák határait 20 képpont választja el.
Egy cellatábla-tábla példájának megtekintése
Az attribútum határozza meg az asztalcellák és a cellatartalom közötti térfogatot. A cellapadhoz hasonlóan az alapértelmezett beállítás két képpontra van állítva, ezért a cellák közötti távolságot 0-ra kell állítani.
Ha cellatávolságot szeretne hozzáadni egy táblához, írja be:
cellspacing = "20" >
Ez a táblázat 20 cellaponttal rendelkezik.
A cellákat 20 képpont választja el.
Lásd a táblázatot cellaponttal
Az attribútum azonosítja, hogy a tábla külső részét körülvevő határ mely részei láthatók lesznek. Az asztalt mind a négy oldalra, mindegyik oldalra felfelé és lefelé, balra és jobbra, vagy sem.
Itt van a HTML a táblázat csak a bal oldali határ:
frame = "lhs" >
Ez a tábla
lesz
csak a
bal oldali keret.
És egy másik példa az alsó kerettel:
frame = "alább" >
Ez a tábla alján egy keret található.
Nézze meg néhány táblázatot keretekkel
Az attribútum hasonló a keret attribútumhoz, csak a tábla cellái körüli határokat érinti. Szabályokat állíthat be az összes cellára, oszlopok között, olyan csoportok között, mint a TBODY vagy a TFOOT vagy sem.
A sorok közötti sorok létrehozásához írjon:
rules = "sorok" >
Ez a 4x4-es tábla
a sorok nem oszlopok
a kifejezéssel
szabályok attribútum.
És egy másik sorokkal az oszlopok között:
rules = "cols" >
Ez
táblázat
ahol a
oszlopok
jelentése
kiemelt
Íme egy példa aa táblázatra a szabályokkal
Az attribútum tájékoztatást nyújt a képernyőolvasók és más felhasználói ügyfelek táblázata számára, amelyek esetleg problémákat okozhatnak az asztalok olvasása során. Az összefoglaló attribútum használatához írja le a táblázat rövid leírását, és tegye azt az attribútum értékeként. Az összefoglaló nem jelenik meg a weboldalon a legtöbb hagyományos böngészőben.
Így írhat egy egyszerű táblázatot összefoglalóval:
summary = "Ez egy minta tábla, amely tartalmaz fillerinformációkat. A táblázat célja összefoglaló bemutatása." >
1. oszlop 1. sorában
2. oszlop 1. sor
1. oszlop 2. sor
2. oszlop 2. sor
Táblázat megtekintése összefoglalóval
Az attribútum határozza meg a táblázat szélességét sem pixelben, sem pedig a konténerelem százalékában. Ha a szélesség nincs beállítva, akkor a táblázat csak annyi helyet foglal el, amennyi a tartalom megjelenítéséhez szükséges, és a maximális szélesség ugyanolyan, mint a szülőelem szélessége.
Egy adott szélességű képpontos táblázatok létrehozásához írj:
= "300" >
Ez a tábla a konténer szélességének 80% -a.
És egy olyan szélességű asztal létrehozásához, amely a szülőelem százalékában van, írja:
width = "80%" >
Ez a tábla a konténer szélességének 80% -a.
Lásd egy szélességű asztal példáját
Elavult HTML 4.01 TABLE tulajdonság
A TABLE elemnek egy olyan attribútuma van, amely elavult a HTML 4.01-ben és elavult a HTML5-ben: align . Ez az attribútum lehetővé teszi, hogy beállíthassa, hogy a táblázat hol helyezkedjen el az oldalon a hozzá tartozó szöveghez képest. Ez az attribútum elavult a HTML 4.01-ben, ezért ne használja azt. Ehelyett használja a CSS tulajdonságot vagy a margó-bal oldali: auto; és margin-right: auto; stílusokat. Az úszó tulajdonság olyan eredményt ad, amely közelebb áll a hozzárendelt attribútumhoz, de ez befolyásolhatja az oldal tartalmának további megjelenítését. A margó-jobb: auto; és margin-left: auto; amit a W3C alternatívaként ajánl.
Itt egy elavult példa az igazítás attribútum használatával:
align = "right" >
Ez a táblázat igazítva van
A szöveg balra fordul
Lásd az elavult példát az igazítás attribútum használatával.
És hogy ugyanazt a hatást érje el az érvényes (nem elavult) HTML-kóddal, írja:
style = "float: right;" >
Ez a táblázat igazítva van
A szöveg balra fordul
Az alábbiakban a TABLE tulajdonságok magyarázhatók, amelyek nem tartoznak semmilyen HTML specifikációhoz.
Az előző információk leírják a HTML elem azon attribútumait, amelyek érvényesek a HTML 4.01-ben, de elavultak a HTML5-ben.
Az alábbiakban a TABLE attribútumokat írja le, amelyek nem érvényesek az aktuális specifikációban. Ha nem érdekli, hogy az oldalak érvényesek-e, és a felhasználók olyan böngészőt használnak, amely támogatja ezeket az elemeket, akkor ezeket az elemeket használhatja. De a legtöbbjük nem támogatott a modern böngészőkben, vagy olyan alternatívákkal rendelkezik, amelyek több szabványnak felelnek meg.
Ezeket az attribútumokat nem javasoljuk a HTML táblázatokban.
Az attribútum egy régi attribútum, amely a CSS széles körű támogatása előtt szerepelt. Lehetővé teszi az asztal háttérszínének módosítását. Beállíthat egy színnevet vagy egy hexadecimális kódot. Ez az attribútum még mindig sok böngészőben működik, de a jövőbeni HTML-kód esetében nem szabad használni, és helyette a CSS-t használni.
A tulajdonság jobb alternatívája a stílus tulajdonsága.
Egy táblázat háttérszínének módosításához írja be:
style = "background-color: #ccc;" >
Ez a táblázat szürke háttér
A bgcolor attribútumhoz hasonlóan a bordercolor attribútum segítségével módosíthatja az attribútum színét. Ezt az attribútumot csak az Internet Explorer támogatja. Ehelyett használja a szegély-színstílus tulajdonságot.
Az asztal határa színének megváltoztatásához írja:
style = "border-color: piros;" >
Ez a táblázat piros szegély.
A bordercolorlight és a bordercolordark attribútumokat az Internet Explorer tartalmazza, így 3D-s szegélyt hozhat létre az asztal körül. Azonban az IE8 és újabb verziók közül ez csak az IE7 szabvány és a Quirks módban használható . A Microsoft kijelenti, hogy ezek a tulajdonságok már nem támogatottak.
Röviden, a TABLE elemen található cols attribútumot arra javasolták, hogy a böngészők tudják, hogy hány oszlop van egy táblázatban. Az előfeltétel az volt, hogy ez nagy táblák megjelenítésének felgyorsítását segítené. Azonban ezt csak az Internet Explorer hajtotta végre, és az IE8 és újabb verziók közül ez csak az IE7 szabvány és a Quirks módban használható.
Mivel van egy width attribútum (elavult a HTML5-ben), sokan azt feltételezték, hogy a táblákhoz magassági attribútum is létezett. Mivel azonban a táblázatok megfelelnek a tartalom szélességének vagy a CSS vagy width attribútum meghatározott szélességének, a magasság nem korlátozható. Így a böngészők megengedték a magassági attribútumnak, hogy meghatározza a táblázat minimális magasságát. Ha az asztal magasabb volt, mint ez a magasság, akkor magasabbnak látszik. De használja az ingatlant
A CSS magasság tulajdonságával korlátozhatja a magasságot, ha a CSS tulajdonságot is megadja, hogy meghatározza, mi történik a felesleges tartalmakkal.
A táblázat minimális magasságának beállításához írja be:
style = "height: 30em;" >
Ez a táblázat legalább 30 ems magas.
A két attribútum és a tér bal / jobb oldala (hspace) és felső / alsó (vspace) környéke. Használnia kell a stílus tulajdonságát.
Ha a függőleges helyet 20 képpontra és a vízszintes mezőt 40 képpontra kívánja állítani, írja be:
style = "margin: 20px 40px;"
Ez a tábla 20 pixelnyi, és 40 pixeles hspace-t tartalmaz.
Az attribútum egy logikai attribútum, amely meghatározza, hogy a tábla tartalma a szülőelem vagy ablak szélén befedje vagy a vízszintes görgetést kényszerítse-e. Ehelyett meg kell határoznia az egyes táblázatcellák csomagolási jellemzőit a CSS tulajdonság segítségével.
Ha olyan oszlopot szeretne létrehozni, amellyel sok szöveget nem csomagol, írjon:
style = "white-space: nowrap;" > Ez egy oszlop, amelynek tonna tartalma van. De még akkor is, ha szélesebb, mint a konténer, a szövegnek nem kell a következő sorra elkeskenyednie, hanem inkább a vízszintes görgetésre kényszeríti a böngészőablakot, hogy megnézze az összes tartalmat.
Végül az attribútum határozza meg, hogy az egyes cellák tartalma függőlegesen legyen a cellán belül. Az érvénytelen attribútum helyett minden olyan cella CSS tulajdonságát használja, amelyik módosítani szeretné a. Nem fogja észrevenni ennek a stílusnak a hatásait, hacsak a cellatartalom nem éri el a más, nagyobb cellák által létrehozott szabad helyet.
Ahhoz, hogy egy cellát összehangoljon az aljára (a közep helyett az alapértelmezett), írja be:
Ez a cella hosszabb, mint a többi, így a magasság magasabb lesz. Tehát látni fogja, hogy a függőlegesen igazított cellák alulról vannak igazítva.
style = "függőleges igazítás: alsó;" > Tartalom alján.
Tartalom középen.