A HTML tábla attribútumok sokkal jobban kontrollálják a HTML táblákat. Nagyon sok attribútum áll a táblák rendelkezésére, hogy érdekesebbé tegyék és megváltoztassák az oldal megjelenését.
HTML TÁBLÁZAT elemattribútumok
Ban ben HTML5 az elem a globális attribútumokat és egy másik attribútumot használ, és megváltozott, hogy csak 1 vagy üres legyen az értéke (azaz határ = ""). Ha meg akarja változtatni a szegély szélességét, akkor használja a szegély szélességét CSS tulajdonság.
Az alábbiakban megtudhatja az érvényes HTML5 táblaattribútumokat.
Számos attribútum is része a HTML 4.01 specifikációnak, amely elavulttá vált a HTML5-ben:
- —A táblázat TD és TH elemein használja a CSS kitöltési tulajdonságot.
- - Használja a CSS tulajdonsághatárok közötti távolságot az asztalon.
- - CSS stílusok használata: border-color: black; és határ stílusú az asztalon.
- - CSS stílusok használata: border-color: black; és szegély stílusú a táblázat megfelelő elemein.
- - Ehelyett írja le a táblázat felépítését egy CAPTION-ban, vagy helyezze a teljes táblázatot egy ÁBRA-ba, és írja le egy FIGCAPTION-ban. Alternatív megoldásként egyszerűsítheti a táblázat felépítését úgy, hogy nincs szükség magyarázatra.
- - Használja a CSS width tulajdonságot.
És egy attribútum, amely elavult a HTML 4.01-ben, és elavult a HTML5-ben is.
- igazítás - használja inkább a CSS margó tulajdonságot.
Számos olyan attribútum is létezik, amely nem része egyetlen HTML-specifikációnak sem. Használja ezeket az attribútumokat, ha tudja, hogy az Ön által támogatott böngészők képesek kezelni őket, és nem érdekli az érvényes HTML.
- - Helyette használja a CSS tulajdonság háttérszínét.
- bordercolor - Helyette használja a CSS tulajdonság border-color értékét.
- bordercolorlight - Használja helyette a CSS tulajdonság szegélyszínét.
- bordercolordark - Használja helyette a CSS tulajdonság szegélyszínét.
- cols - Ennek az attribútumnak nincs alternatívája.
- magasság - használja inkább a CSS tulajdonságmagasságot.
- - Használja helyette a CSS tulajdonság margót.
- - Használja helyette a CSS tulajdonság szóközt.
- - Használja helyette a CSS tulajdonság függőleges igazítását.
HTML5 TABLE elem elemattribútumok
Amint fentebb említettük, a globális attribútumokon kívül csak egy attribútum érvényes egy HTML5 TABLE elemre: border.
A határ attribútummal határokat határozhatunk meg a teljes tábla és a benne lévő összes cella körül. Némi kérdés merült fel benne, hogy bekerül-e a HTML5 specifikációba, de azért maradt, mert egyszerűen a stílus implikációin túl információkat szolgáltatott a táblázat szerkezetéről.
A határ attribútum hozzáadásához az értéket 1-re állítja, ha van határ, és üres (vagy hagyja el az attribútumot), ha nincs. A legtöbb böngésző támogatja a 0 nélküli szegélyt, és bármely más egész értéket (2, 3, 30, 500 stb.) A szegély szélességének pixelben történő deklarálásához, de ez a HTML5-ben elavult. Ehelyett CSS szegélystílus tulajdonságokat kell használnia a szegély szélességének és más stílusok meghatározásához.
Határral rendelkező tábla létrehozásához írja be:
határ = "1">
Ez egy szegéllyel ellátott asztal
Ez a HTML 4.01-ben érvényes, de a HTML-ben elavult TABLE attribútumokat írja le HTML5. Ha továbbra is HTML 4.01 dokumentumokat ír, használhatja ezeket az attribútumokat, de a legtöbbjüknek vannak olyan alternatívái, amelyek az oldalakat jövőbiztosabbá teszik, amikor áttér a HTML5-re.
Érvényes HTML 4.01 attribútumok
A fent leírt tulajdonság. Az egyetlen különbség a HTML 4.01-ben a HTML5-től abban az, hogy megadhat bármilyen egész számot (0, 1, 2, 15, 20, 200 stb.) A határ szélességének pixelben történő meghatározásához.
5 képpontos szegéllyel rendelkező tábla készítéséhez írja be:
határ = "5">
Ez a táblázat 5 képpontos szegéllyel rendelkezik.
Az attribútum meghatározza a cellák határai és a cella tartalma közötti tér nagyságát. Az alapértelmezett két képpont. Állítsa a celladarabot 0-ra, ha nem kíván helyet hagyni a tartalom és a szegélyek között.
A cella kitöltésének 20-ra állításához írja be:
cellpadding = "20">
Ennek a táblázatnak 20 cellapad-ja van.
A cellahatárokat 20 képpont választja el.
Tekintse meg a tábla példáját cellpadding-el.
Az attribútum meghatározza a táblázat cellái és a cellatartalom közötti tér nagyságát. A cellpaddinghez hasonlóan az alapértelmezett érték két pixel, ezért 0-ra kell állítania, ha nem szeretne cellatávolságot.
Cellatávolság hozzáadásához a táblához írja:
cellspacing = "20">
Ennek a táblának a cellatere 20.
A cellákat 20 pixel választja el egymástól.
Az attribútum meghatározza, hogy a szegély mely részei veszik körül a tábla külsejét. Az asztalát mind a négy oldalra keretezheti, bármelyik oldalra, felül és alul, balra és jobbra, vagy egyikre sem.
Itt található a táblázat HTML-je, amelynek csak a bal oldali szegélye van:
frame = "lhs">
Ez a táblázat
lesz
csak a
bal oldal bekeretezve.
És még egy példa az alsó kerettel:
frame = "alatt">
Ennek az asztalnak alul kerete van.
Nézzen meg néhány kerettel ellátott táblázatot.
Az attribútum hasonló a frame attribútumhoz, csak a táblázat 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 és a TFOOT, vagy egyik sem.
Ha olyan táblázatot szeretne felépíteni, amelynek sorai csak a sorok között vannak, írja:
szabályok = "sorok">
Ez a 4x4-es asztal rendelkezik
a sorok nem oszlopok
vázolta a
szabályok attribútum.
És egy másik az oszlopok között vonalakkal:
rules = "cols">
Ez
asztal
hol a
oszlopok
vannak
kiemelve
A attribútum ad információt a képernyőolvasók és más felhasználói ügynökök táblájáról, amelyeknek problémái lehetnek a táblák olvasásával. Az összefoglaló attribútum használatához írjon fel egy rövid leírást a tábláról, és adja meg ezt az attribútum értékeként. Az összefoglaló a legtöbb szabványos böngészőben nem jelenik meg a weboldalon.
Így írhat egy egyszerű táblázatot összefoglalóval:
summary = "Ez egy mintatábla, amely kitöltési információkat tartalmaz. A táblázat célja egy összefoglaló bemutatása. ">
1. oszlop 1. sor.
2. oszlop 1. sor.
1. oszlop 2. sor.
2. oszlop 2. sor.
Az attribútum meghatározza a táblázat szélességét pixelben vagy a tároló elem százalékában. Ha a szélesség nincs megadva, akkor a táblázat csak annyi helyet foglal el, amennyi a tartalom megjelenítéséhez szükséges, maximális szélessége megegyezik a szülő elem szélességével.
Táblázat készítéséhez meghatározott szélességű képpontokban írja:
width = "300">
Ez a táblázat a tároló szélességének 80% -a.
És egy tábla felépítéséhez, amelynek szélessége a szülőelem százalékának felel meg, írja:
szélesség = "80%">
Ez a táblázat a tároló szélességének 80% -a.
Elavult HTML 4.01 TABLE attribútum
A TABLE elemnek van egy attribútuma, amely elavult a HTML 4.01-ben és elavult a HTML5-ben: align. Ez az attribútum lehetővé teszi annak beállítását, hogy a táblázat hol helyezkedjen el az oldalon a mellette lévő szöveghez képest. Ez az attribútum elavult a HTML 4.01 fájlban, és kerülje annak használatát. Ehelyett a CSS tulajdonságot vagy a bal margót kell használnia: auto; és margó-jobb: auto; stílusok. Az float tulajdonság olyan eredményt ad, amely közelebb áll az align attribútumhoz, de befolyásolhatja az oldal többi tartalmának megjelenítését. Jobb szél: automatikus; és bal szél: auto; a W3C ajánlja alternatívaként.
Itt van egy elavult példa az align attribútum használatával:
align = "right">
Ez a táblázat igazítva van.
Szöveg folyik körülötte balra.
És hogy érvényes (nem elavult) HTML esetén ugyanezt a hatást érje el, írja:
style = "float: right;">
Ez a táblázat igazítva van.
Szöveg folyik körülötte balra.
Elavult TABLE attribútumok
Az előző információk leírják a HTML elem attribútumait, amelyek érvényesek a HTML 4.01-ben, de elavultak a HTML5-ben.
Az alábbiakban olyan TABLE attribútumokat írunk le, amelyek érvényesek egyetlen aktuális specifikációban sem. Ha nem érdekel, hogy az oldalai érvényesülnek-e, és a felhasználók olyan böngészőt használnak-e, amely támogatja ezeket az elemeket, akkor ezeket az elemeket is használhatja. De a legtöbbjük vagy nem támogatott a modern böngészőkben, vagy alternatíváik vannak, amelyek jobban megfelelnek a szabványoknak.
Nem javasoljuk ezeknek az attribútumoknak a használatát HTML tábláin.
Az attribútum egy régi attribútum, amelyet a CSS széles körű támogatása előtt vezettek be. Ez lehetővé teszi az asztal háttérszínének megváltoztatá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őbiztos HTML esetén ne használja, hanem CSS-t használjon.
Az attribútum jobb alternatívája a stílus tulajdonság.
A táblázat háttérszínének megváltoztatásához írja be:
style = "background-color: #ccc;">
Ez a táblázat szürke háttérrel rendelkezik.
A bgcolor attribútumhoz hasonlóan a bordercolor attribútum lehetővé teszi az attribútum színének megváltoztatását. Ezt az attribútumot csak az Internet Explorer támogatja. Ehelyett a border-color stílus tulajdonságot kell használnia.
Az asztal szegélyének színének megváltoztatásához írja:
style = "border-color: red;">
Ez az asztal piros szegéllyel rendelkezik.
A bordercolorlight és a bordercolordark attribútumokat beépítették az Internet Explorerbe, hogy 3D-s szegélyt hozzanak létre az asztal körül. Az IE8 és újabb verzióitól kezdve azonban ez csak az IE7 szabványos módban és Quirks mód. A Microsoft kijelenti, hogy ezeket a tulajdonságokat már nem támogatják.
Rövid időre a TABLE elem cols attribútumát javasolták, hogy a böngészők segítsék a táblázat hány oszlopának megismerését. Az előfeltevés az volt, hogy ez elősegíti a nagy asztalok renderelését. Ezt azonban csak az Internet Explorer hajtotta végre, és az IE8 és újabb verzióktól kezdve ezt csak az IE7 szabványos és a quirks mód támogatja.
Mivel van szélességi attribútum (a HTML5-ben elavult), sokan feltételezték, hogy a táblákhoz is van magassági attribútum. De mivel a táblák megfelelnek a tartalmuk szélességének, vagy a CSS vagy szélesség attribútumában megadott szélességnek, a magasságot nem lehetett korlátozni. Tehát ehelyett a böngészők megengedték a magasság attribútumnak, hogy meghatározza a táblázat minimális magasságát. Ha az asztal ennél a magasságnál magasabb lenne, akkor magasabb lenne. De használja az ingatlant.
A CSS height tulajdonsággal korlátozhatja a magasságot, ha a CSS tulajdonságot is használja annak meghatározásához, hogy mi történik a felesleges tartalommal.
Az asztal 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 hozzáadott szóköz a táblázat bal / jobb oldala (hspace) és felső / alsó (vspace) körül. Inkább a style tulajdonságot kell használnia.
Ha a függőleges teret 20 pixelre, a vízszintes helyet pedig 40 pixelre szeretné állítani, írja be:
style = "margó: 20px 40px;"
Ennek a táblának a 20 pixeles és 40 pixeles hspace-je van.
Az attribútum logikai attribútum, amely meghatározza, hogy a táblázat tartalmának be kell-e borulnia a szülő elem vagy ablak szélére, vagy vízszintes görgetést kell-e végrehajtania. Ehelyett meg kell határoznia az egyes táblák celláinak csomagolási jellemzőit a CSS tulajdonság használatával.
Ha azt szeretné, hogy a sok szöveget tartalmazó oszlop ne kerüljön beírásra, írja:
style = "white-space: nowrap;"> Ez egy oszlop, rengeteg tartalommal. De még akkor is, ha a tároló szélesebb, mint a tároló, a szövegnek nem szabad átgördülnie a következő sorra, hanem a böngészőablak vízszintes görgetésére kell kényszerítenie az összes tartalmat.
Végül az attribútum meghatározza, hogyan kell az egyes cellák tartalmának függőlegesen igazodni a cellán belül. Az érvénytelen attribútum helyett a CSS tulajdonságot kell használnia minden olyan cellán, amelynek igazítását módosítani szeretné. Csak akkor veszi észre ennek a stílusnak a hatásait, ha a cella tartalma kevesebb, mint a többi, nagyobb cellában létrehozott rendelkezésre álló terület.
A cellának az aljára igazításának kényszerítésére (alapértelmezetten a középső helyett) írja be:
Ez a cella hosszabb, mint a többi, és így magasabb magasságra kényszeríti a magasságot. Tehát látni fogja, hogy a függőlegesen igazított cella az aljához igazodik.
style = "vertical-align: bottom;"> Tartalom alul.
Tartalom középen.