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 megváltozott, hogy csak az értéke legyen 1 vagy üres (pl. border = ""). Ha módosítani szeretné a szélesség szélességét, akkor használja a border-width CSS tulajdonság.
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-t
párnázásingatlan az asztalonTDésTHelemekkel. - -A CSS tulajdonság használata
border-spacingaz asztalon. - -CSS stílusok használata
fekete-fehér szín: fekete;ésborder-styleaz asztalon. - -CSS stílusok használata
fekete-fehér szín: fekete;ésborder-stylea táblázat megfelelő elemein. - - Helyette írja le a táblázat szerkezetét a
FELIRATvagy tegye az egész táblát aÁBRAés leírja azt aFIGCAPTION. Alternatív megoldásként egyszerűsítheti a táblázat szerkezetét, így nincs szükség magyarázatra. - - Használja a CSS-t
szélességingatlan.
É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.
igazítsa- Használja a CSS-tmargótulajdon helyett.
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.
- -A CSS tulajdonság használata
háttérszínhelyette. bordercolor-A CSS tulajdonság használataborder-colorhelyette.bordercolorlight-A CSS tulajdonság használataborder-colorhelyette.bordercolordark-A CSS tulajdonság használataborder-colorhelyette.cols-A tulajdonságnak nincs alternatívája.magasság-A CSS tulajdonság használatamagassághelyette.- -A CSS tulajdonság használata
margóhelyette. - -A CSS tulajdonság használata
margóhelyette. - -A CSS tulajdonság használata
fehér űrhelyette. - -A CSS tulajdonság használata
vertical-alignhelyette.
További információ a böngésző specifikus TABLE tulajdonságairól.
HTML5 TABLE elem-attribútumok
Amint azt korábban említettük, csak egy attribútum van a globális attribútumokon túl, ami egy HTML5-en érvényes ASZTAL elem: határ.
A határ attribútummal definiálhatjuk az egész tábla és az összes benne lévő cellák határát. 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 attribútumot, akkor beállítja az értéket 1 ha van egy határ és üres (vagy hagyja abba az attribútumot), ha nincs. A legtöbb böngésző is támogatja 0 nincs határ, és bármely más egész érték (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ábla, amelynek határa van
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 aASZTAL olyan attribútumok, 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áblázat egy 5px határt tartalmaz.
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 becellpadding nak nek0 ha nem szeretne helyet foglalni 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áblázat a cellpadding 20. 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. Mintcellpadding, az alapértelmezés két képpontra van beállítva, ezért be kell állítania0 ha nem kíván semmilyen cellatávolságot.
Ha cellatávolságot szeretne hozzáadni egy táblához, írja be:
<> cellspacing = "20" > Ez a táblázat a cellspacing 20. A sejteket 20 képpont választja el egymástól.
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áblázat lesz csak a bal oldal keretezve.
És egy másik példa az alsó kerettel:
frame = "alatt" >
Ez a táblázat alján egy keret található.
Nézze meg néhány táblázatot keretekkel
Az attribútum hasonló akeret attribútum, csak a táblázat celláinak határait érinti. Szabályokat állíthat be az összes cellára, oszlopok között, a hasonló csoportok közötttBody éstfoot vagy sem.
A sorok közötti sorok létrehozásához írjon:
szabályok = „sort” >
Ez a 4x4-es tábla a sorok nem oszlopok körvonalazva a szabályok attribútum.
És egy másik sorokkal az oszlopok között:
szabályok = „oszlopnál” >
Ez asztal hol a oszlopok vannak kiemelve
Íme egy példa egy szabályos táblázatra
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. Aösszefoglalás attribútum, akkor í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 filler információkat. A táblázat célja egy összefoglaló bemutatása." > az 1. oszlop 1. sorában 2. oszlop 1. sor az 1. oszlop 2. sorában 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 aszélesség nincs beállítva, az asztal csak annyi helyet foglal el, amennyi a tartalom megjelenítéséhez szükséges, a maximális szélességével ugyanaz, mint a szülőelem szélessége.
Egy adott szélességű képpontos táblázatok létrehozásához írj:
<> width = "300" > Ez a táblázat 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áblázat 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
Van egy attribútuma aASZTAL elem, amely elavult a HTML 4.01-ben és elavult a HTML5-ben:igazítsa. 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 a CSS tulajdonságot vagy amargin-left: automatikus; ésmargin-right: automatikus; stílusokat. Aúszó az ingatlan olyan eredményt ad, amely közelebb áll ahhoz, amit aigazítsa attribútumot, de befolyásolhatja az oldal tartalmának további megjelenítését. Amargin-right: automatikus; ésmargin-left: automatikus; amit a W3C alternatívaként ajánl.
Itt egy elavult példa aigazítsa tulajdonság:
<> align = "right" > Ez a táblázat igazítva van A szöveg balra fordul
Lásd az elavult példát aigazítsa tulajdonság.
É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
A következő magyarázzaASZTAL attribútumok, 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.
A következőkben leírjukASZTAL attribútumok, amelyek nem érvényesek a jelenlegi 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ázatokon.
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
Hasonló abgcolor attribútum, abordercolor attribútum segítségével megváltoztathatja 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éllyel rendelkezik.
Abordercolorlight ésbordercolordark 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övid ideig acols attribútum aASZTAL elemet javasoltam, hogy segítse a böngészőket arról, hogy hány oszlopot tartalmaz egy táblázat. 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ó.
Mert van egyszélesség attribútum (elavult a HTML5-ben) sokan azt feltételezték, hogy volt egymagasság táblázatok attribútuma. De mivel a táblák megfelelnek a tartalom szélességének vagy a CSS-ben vagy a megadott szélességbenszélesség attribútum, a magasság nem korlátozható. Így inkább a böngészők engedélyeztékmagasság attribútum a táblázat minimális magasságának meghatározásához. Ha az asztal magasabb volt, mint ez a magasság, akkor magasabbnak látszik. De használja az ingatlant
A CSS segítségévelmagasság tulajdonságot akkor is korlátozhatja, ha a CSS tulajdonságot is használhatja, 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 bal / jobb oldal körül elhelyezkedő tér (hspace) és a felső / alsó (vSpace). 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 a hspace 40 pixel.
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 = "fehér-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ő sorba befednie, 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 fogod, hogy a függőlegesen igazított sejt az aljához igazodik. <> style = "függőleges igazítás: alsó;" > Tartalom alján. Tartalom középen.
