Obtenir el màxim rendiment de les taules HTML mitjançant l'aprenentatge d'atributs de la taula
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 buit (és a dir, frontera = ""). Si voleu canviar l'amplada del límit, heu d'utilitzar la propietat CSS d'ample de vora.
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 la propietat de farcit CSS als elements TD i TH de la taula.
- -Utilitzeu l'espaiat fronterer de la propietat CSS a la taula.
- -Utilitzeu els estils CSS a la vora del color: negre; i l'estil fronterer a la taula.
- -Utilitzeu els estils CSS a la vora del color: negre; i l'estil de vora dels elements apropiats de la taula.
- -En canvi, hauríeu de descriure l'estructura de la taula en una CAPÇÓ o posar tota la taula en una FIGURA i descriure-la en una FIGCAP. Alternativament, podeu simplificar l'estructura de la taula de manera que no cal una explicació.
- -Utilitzeu la propietat width width CSS.
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 la propietat del marge CSS al seu lloc.
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 el color de fons de la propietat CSS.
- bordercolor: utilitza el color de la vora de la propietat CSS.
- bordercolorlight: utilitza el color de la vora de la propietat CSS.
- bordercolordark: utilitza el color de la vora de la propietat CSS.
- cols: no hi ha cap alternativa per a aquest atribut.
- alçada: utilitza l'alçada de la propietat CSS.
- -Utilitzeu el marge de propietats CSS en el seu lloc.
- -Utilitzeu el marge de propietats CSS en el seu lloc.
- -Utilitzeu la propietat CSS en blanc d'espai.
- -Utilitzeu la propietat CSS vertical-align al seu lloc.
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 element HTML5 TABLE: border.
L'atribut de la vora s'utilitza per definir un límit al voltant de tota la taula i totes les cel·les que hi ha. 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 l'atribut de la vora, estableixi el valor a 1 si hi ha un límit i està buit (o deixeu l'atribut) si no n'hi ha. La majoria dels navegadors també admeten 0 per a cap frontera 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 els atributs TABLE que són vàlids en HTML 4.01, però 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. Establiu la farola de cel·la a 0 si no voleu que hi hagi espai entre els continguts i les vores.
Per configurar el farciment de la cel·la a 20, escriviu:
cellpadding = "20" >
Aquesta taula té un cellpadding de 20.
Les vores de la cel·la estaran separades 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. Igual que el tabulador de cel·les, el valor predeterminat s'estableix en dos píxels, de manera que hauríeu d'establir-lo a 0 si no voleu espaiar cel·lulars.
Per afegir espai entre cel·les a una taula, escriviu:
cellspacing = "20" >
Aquesta taula té un espai de cel·les 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
en el marc esquerre.
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 a l'atribut de marc, 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 TBODY i TFOOT o cap.
Per crear una taula amb línies només entre les files, escriviu:
rules = "rows" >
Aquesta taula 4x4 ha
les files no les columnes
esbossat amb la
atribut de les regles.
I una altra amb línies entre les columnes:
rules = "cols" >
Això és
una taula
on el
columnes
són
ressaltat
Aquí teniu un exemple de taula aa 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 l'atribut de resum, escriviu una breu descripció de la taula i poseu-lo com a 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 no s'estableix l'amplada, la taula només ocuparà tants espais ja que necessita mostrar el contingut, 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 està.
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 està.
Vegeu un exemple d'una taula amb un ample
HTML atribut HTML 4.01 desactivat
Hi ha un atribut de l'element TABLE 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 s'ha quedat obsolet en l'HTML 4.01 i heu d'evitar-ne l'ús. En canvi, haureu d'utilitzar la propietat CSS o el marge esquerre: automàtic; i el marge dret: automàtic; estils. La propietat Float us dóna un resultat més proper al que proporciona l'atribut d'alineació, però pot afectar la visualització de la resta de continguts de la pàgina. El marge dret: automàtic; i el marge esquerre: automàtic; són el que el W3C recomana com a alternativa.
Aquí teniu un exemple obsolet usant l'atribut align:
align = "right" >
Aquesta taula està alineada a la dreta
El text flueix al voltant de l'esquerra
Vegeu un exemple obsolet amb l'atribut align.
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 de l'esquerra
A continuació s'expliquen els atributs TABLE 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.
A continuació es descriuen els atributs TABLE 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 a l'atribut bgcolor, l'atribut bordercolor 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.
Els atributs bordercolorlight i bordercolordark es van incloure a Internet Explorer per permetre crear un límit 3D al voltant de la 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.
Durant un temps curt, es va proposar l'atribut cols a l'element TABLE 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.
Com que hi ha un atribut d'amplada (obsolet a HTML5) moltes persones van assumir que també hi havia un atribut alt per a les taules. Però a causa de que les taules corresponen a l'amplada del seu contingut o l'amplada definida en l'atribut CSS o width, l'alçada no es pot restringir. D'aquesta manera, els navegadors van permetre que l'atribut d'alçada defineixi 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 la propietat CSS height podeu restringir l'alçada si utilitzeu la propietat CSS també per definir el que 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'alt.
Els dos atributs i l'espai afegit al voltant dels costats esquerre / dret (espai hs) 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 hs 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 en el medi.