Els atributs de la taula HTML us donen molt més control sobre les taules HTML. Hi ha molts atributs disponibles per a taules per fer-los més interessants i canviar l'aspecte de la vostra pàgina.
Atributs d'element HTML TABLE
A HTML5, l'element utilitza els atributs globals i un altre atribut: I ha canviat per tenir només el valor de 1 o buida (és a dir, border = ""). Si voleu canviar l 'amplada del límit, heu d' utilitzar el ample de la vora Propietat CSS.
Vegeu a continuació per obtenir informació sobre els atributs de taula HTML5 vàlids.
També hi ha diversos atributs que formen part de l'especificació HTML 4.01 que s'ha convertit en obsolet en HTML5:
- -Utilitzeu el CSS
farcitpropietat a la taulaTDiTHelements. - -Utilitzeu la propietat CSS
espaiat fronterera la taula. - -Utilitzeu estils CSS
color fronterer: negre;iestil fronterera la taula. - -Utilitzeu estils CSS
color fronterer: negre;iestil frontereren els elements apropiats de la taula. - -En canvi, hauríeu de descriure l'estructura de la taula en un
CAPÇÓo posa tota la taula en unFIGURAi descriure'l en unFIGCAPTION. Alternativament, podeu simplificar l'estructura de la taula de manera que no cal una explicació. - -Utilitzeu el CSS
ampladapropietat.
I un atribut que estava obsolet en HTML 4.01 i també està obsolet en HTML5.
Més informació sobre els atributs HTML 4.01 TABLE.
alinear-Utilitzeu el CSSmargepropietat en lloc d'això.
També hi ha diversos atributs que no formen part d'una especificació HTML. Utilitzeu aquests atributs si sap que els navegadors que admeten poden gestionar-los i no us interessen els HTML vàlids.
- -Utilitzeu la propietat CSS
color de fonsen canvi. bordercolor-Utilitzeu la propietat CSScolor frontereren canvi.bordercolorlight-Utilitzeu la propietat CSScolor frontereren canvi.bordercolordark-Utilitzeu la propietat CSScolor frontereren canvi.cols-No hi ha alternativa a aquest atribut.altura-Utilitzeu la propietat CSSalturaen canvi.- -Utilitzeu la propietat CSS
margeen canvi. - -Utilitzeu la propietat CSS
margeen canvi. - -Utilitzeu la propietat CSS
espai blancen canvi. - -Utilitzeu la propietat CSS
alineació verticalen canvi.
Més informació sobre els atributs TABLE específics del navegador.
Atributs d'element HTML5 TABLE
Com hem esmentat anteriorment, només hi ha un atribut, més enllà dels atributs globals, que sigui vàlid en un HTML5 TAULA element: frontera.
El frontera L'atribut s'utilitza per definir un límit al voltant de tota la taula i totes les cel·les dins d'ella. Hi va haver una pregunta sobre si s'inclouria a l'especificació HTML5, però es va mantenir perquè proporcionava informació sobre l'estructura de la taula, més enllà de les implicacions d'estil.
Per afegir la frontera atribut, estableix el valor a 1 si hi ha una vora i buida (o deixa l'atribut) si no n'hi ha. La majoria de navegadors també admetran 0 sense límit, i qualsevol altre valor enter (2, 3, 30, 500, etc) per declarar l'amplada de la vora en píxels, però això està obsolet en HTML5. En lloc d'això, haureu d'utilitzar les propietats d'estil de la vora CSS per definir l'amplada del límit i altres estils.
Per crear una taula amb una vora, escriviu:
border = "1" >
Aquesta és una taula amb una vora
Hi ha atributs HTML 4.01 que estan obsolets en HTML5. Si teniu previst escriure documents HTML 4.01, podeu aprendre-los, altrament, podeu ignorar-los. La majoria d'aquests atributs tenen alternatives, descrits anteriorment.
Es descriuen els atributs de l'element vàlids en HTML5 (i HTML 4.01). Això descriu elTAULA atributs que són vàlids en HTML 4.01, però que estan obsolets en HTML5. Si encara escriu documents HTML 4.01, podeu utilitzar aquests atributs, però la majoria tenen alternatives que faran que les vostres pàgines estiguin més a prova de futur quan es mogui a HTML5.
Atributs HTML 4.01 vàlids
L'atribut que hem descrit anteriorment. L'única diferència en HTML 4.01 de HTML5 és que podeu especificar qualsevol sencer sencer (0, 1, 2, 15, 20, 200, etc.) per definir l'amplada del límit en píxels.
Per crear una taula amb una vora de 5 píxels, escriviu:
<> border = "5" > Aquesta taula té una vora 5px.
Vegeu un exemple de dues taules amb vora.
L'atribut defineix la quantitat d'espai entre les vores de les cel·les i els continguts de la cel·la. El valor predeterminat és de dos píxels. Estableix elcellpadding a0 si no voleu espais entre els continguts i les vores.
Per configurar el farciment de la cel·la a 20, escriviu:
<> cellpadding = "20" > Aquesta taula té una cellpadding de 20. Les vores de cel·la es separaran per 20 píxels.
Vegeu un exemple d'una taula amb cellpadding
L'atribut defineix la quantitat d'espai entre les cel·les de la taula i el contingut de la cel·la. M'agradacellpadding, el valor predeterminat s'estableix en dos píxels, de manera que haureu d'establir-lo0 si no voleu espaiar cel·lulars.
Per afegir espai entre cel·les a una taula, escriviu:
<> cellspacing = "20" > Aquesta taula té una cel·lularització de 20. Les cel·les estaran separades per 20 píxels.
Vegeu una taula amb el marge de cel·les
L'atribut identifica quines parts de la vora que envolten l'exterior d'una taula estaran visibles.Podeu emmarcar la taula als quatre costats, a un costat, cap a dalt i inferior, a l'esquerra i a la dreta, o cap.
Aquí teniu l'HTML per a una taula amb només la vora del costat esquerre:
frame = "lhs" >
Aquesta taula tindrà només el costat esquerre enquadrat.
I un altre exemple amb el marc inferior:
frame = "below" >
Aquesta taula té un marc a la part inferior.
Consulteu algunes taules amb marcs
L'atribut és similar almarc atribut, només afecta les vores al voltant de les cel·les de la taula. Podeu establir regles a totes les cel·les, entre columnes, entre grups com araTBODY iTFOOT o cap.
Per crear una taula amb línies només entre les files, escriviu:
rules = "rows" >
Aquesta taula 4x4 té les files no les columnes esbossat amb el atribut de les regles.
I una altra amb línies entre les columnes:
rules = "cols" >
Això és una taula ón el columnes són destacat
Aquí teniu un exemple d'una taula amb regles
L'atribut proporciona informació sobre la taula per als lectors de pantalla i altres agents d'usuari que poden tenir problemes per llegir taules. Per utilitzar elresum atribut, escriu una breu descripció de la taula i posa-ho com el valor de l'atribut. El resum no es mostrarà a la pàgina web en la majoria de navegadors web estàndard.
Aquí teniu la forma d'escriure una taula senzilla amb un resum:
<> summary = "Aquesta és una taula d'exemple que conté informació de farciment. L'objectiu d'aquesta taula és demostrar un resum". > columna 1 fila 1 columna 2 fila 1 columna 1 fila 2 columna 2 fila 2
Veure una taula amb un resum
L'atribut defineix l'amplada de la taula en píxels o com a percentatge de l'element contenidor. Si elamplada no s'estableix, la taula només ocuparà tants espais com necessiti mostrar els continguts, amb un ample màxim igual que l'ample de l'element primari.
Per construir una taula amb un ample específic en píxels, escriviu:
<> width = "300" > Aquesta taula és del 80% de l'amplada del contenidor on es troba.
I per construir una taula amb un ample que sigui un percentatge de l'element primari, escriviu:
<> width = "80%" > Aquesta taula és del 80% de l'amplada del contenidor on es troba.
Vegeu un exemple d'una taula amb un ample
HTML atribut HTML 4.01 desactivat
Hi ha un atribut delTAULA element que està obsolet en HTML 4.01 i obsolet en HTML5:alinear. Aquest atribut us permet establir on s'ha de situar la taula a la pàgina relativa al text que hi ha al costat. Aquest atribut ha quedat obsolet en HTML 4.01, i hauríeu d'evitar-ne l'ús. En el seu lloc, haureu d'usar la propietat CSS o la propietatmargin-left: auto; imarge-dret: automàtic; estils. Elsurar La propietat us dóna un resultat que està més a prop del que és elalinear atribuït, però pot afectar la visualització de la resta de continguts de la pàgina. Elmarge-dret: automàtic; imargin-left: auto; són el que el W3C recomana com a alternativa.
Aquí teniu un exemple obsolet usant elalinear atribut:
<> align = "right" > Aquesta taula està alineada a la dreta El text flueix al voltant d'ell cap a l'esquerra
Vegeu un exemple obsolet usant elalinear atribut
I per obtenir el mateix efecte amb HTML vàlid (no obsolet), escriviu:
<> style = "float: right;" > Aquesta taula està alineada a la dreta El text flueix al voltant d'ell cap a l'esquerra
Explica el següentTAULA atributs que no formen part d'una especificació HTML.
La informació anterior descriu els atributs de l'element HTML que són vàlids en HTML 4.01 però que estan obsolets en HTML5.
Es descriu el següentTAULA atributs que no són vàlids en cap especificació actual. Si no us importa si les vostres pàgines valideixen i els vostres usuaris fan servir un navegador compatible amb aquests elements, podeu utilitzar aquests elements. Però la majoria d'ells no són compatibles amb navegadors moderns o tenen alternatives més compatibles amb els estàndards.
No recomanem utilitzar aquests atributs a les taules HTML.
L'atribut és un atribut anterior que s'ha inclòs abans que el CSS sigui àmpliament admès. Permet canviar el color de fons de la taula. Podeu configurar un nom de color o un codi hexadecimal. Aquest atribut encara funciona en molts navegadors, però en el cas d'un codi HTML que no es pot provar en el futur, no hauríeu d'usar-lo i utilitzeu CSS.
La millor alternativa a aquest atribut és la propietat d'estil.
Per canviar el color de fons d'una taula, escriviu:
<> style = "background-color: #ccc;" > Aquesta taula té un fons gris
Similar albgcolor atribut, elbordercolor L'atribut us permet canviar el color de l'atribut. Aquest atribut només és compatible amb Internet Explorer. En canvi, haureu d'utilitzar la propietat d'estil de color de vora.
Per canviar el color de la vora de la taula, escriviu:
style = "border-color: red;" >
Aquesta taula té una vora vermella.
Elbordercolorlight ibordercolordark S'han inclòs atributs a Internet Explorer per permetre crear un límit 3D al voltant de la vostra taula. Tanmateix, a partir de IE8 i superior, això només és compatible amb IE7 Standards Mode i Quirks Mode. Microsoft afirma que aquestes propietats ja no són compatibles.
Per poc temps, elcols atribut a laTAULA element que es va proposar per ajudar els navegadors a saber quantes columnes tenia una taula. La premissa era que això ajudaria a accelerar la representació de taules grans. Tanmateix, només va ser implementat per Internet Explorer i, a partir de l'IE8 i posterior, només és compatible amb IE7 Standards Mode i Quirks Mode.
Perquè hi ha unamplada L'atribut (obsolet a HTML5) molta gent va assumir que hi havia unaltura atribut per a taules també. Però perquè les taules s'ajusten a l'amplada del seu contingut o l'amplada definida a CSS oamplada atribut, l'alçada no es pot restringir. Així doncs, els navegadors han permès laaltura atribueix per definir l'alçada mínima de la taula. Si la taula fos més alta que l'altura, es mostraria més alt. Però heu d'utilitzar la propietat
Amb el CSSaltura propietat, podeu restringir l'alçada si utilitzeu la propietat CSS també per definir què passa amb qualsevol contingut en excés.
Per establir l'alçada mínima en una taula, escriviu:
<> style = "height: 30em;" > Aquesta taula té almenys 30 ems d'alçada.
Els dos atributs i l'espai afegit al voltant dels costats esquerre / dret (hspace) i superior / inferior (vspace) de la taula. Heu d'utilitzar la propietat d'estil en el seu lloc.
Per establir l'espai vertical a 20 píxels i l'espai horitzontal a 40 píxels, escriviu:
<> style = "margin: 20px 40px;" Aquesta taula té un vspace de 20 píxels i un espai lliure de 40 píxels.
L'atribut és un atribut booleà que defineix si els continguts de la taula s'han d'embolicar a la vora de l'element primari o la finestra o forçar el desplaçament horitzontal. En lloc d'això, haureu de definir les característiques d'embolcall de cada cel·la de la taula mitjançant la propietat CSS.
Per fer que una columna amb un munt de text no s'emboliqui, escriviu:
<> style = "white-space: nowrap;" > Aquesta és una columna amb un munt de contingut. Però encara que sigui més ample que el contenidor, el text no s'ha d'embolicar a la següent línia, sinó que obliga la finestra del navegador a desplaçar-se horitzontalment per veure tot el contingut.
Finalment, l'atribut defineix com els continguts de cada cel haurien d'alinear-se verticalment dins de la cel·la. En lloc d'aquest atribut no vàlid, heu d'utilitzar la propietat CSS a cada cel·la on vulgueu canviar l'alineació. No notaràs els efectes d'aquest estil, llevat que el contingut de la cel·la sigui inferior a l'espai disponible creat per altres cel·les més grans.
Per obligar una cel·la a alinear-se a la part inferior (en comptes del mig, com a predeterminat), escriviu:
Aquesta cel·la és més llarga que la resta, per la qual cosa obliga a que l'alçada sigui més alta. Així que veuràs que la cel·la alineada vertical està alineada a la part inferior. <> style = "vertical-align: bottom;" > Continguts a la part inferior. Continguts al mig.
