Obtendo o máximo proveito das táboas de HTML mediante a aprendizaxe de atributos da táboa
Os atributos da táboa HTML permítenlle moito máis control sobre táboas HTML. Hai moitos atributos dispoñibles para as táboas para facelas máis interesantes e cambiar o aspecto da túa páxina.
Atributos do elemento HTML TABLE
En HTML5 o elemento usa os atributos globais e outro atributo:. E mudouse para ter só o valor de 1 ou baleiro (ou sexa, fronteira = ""). Se quere cambiar o ancho do bordo, debería usar a propiedade de CSS de ancho de borde.
Vexa a continuación para obter información sobre os atributos de táboa HTML5 válidos.
Hai tamén varios atributos que forman parte da especificación HTML 4.01 que se fixo obsoleta en HTML5:
- -Usar a propiedade de recheo CSS nos elementos TD e TH da táboa.
- -Utilizar o espazo de fronteiras da propiedade CSS na táboa.
- -Usar estilos CSS de cor de fronte: negro; e estilo de fronteira sobre a mesa.
- -Usar estilos CSS de cor de fronte: negro; e estilo de bordo nos elementos axeitados da táboa.
- -En vez diso, debes describir a estrutura da táboa nunha CAPCIÓN ou poñer toda a táboa nunha FIGURA e describila nunha FIGCAPTION. Alternativamente, pode simplificar a estrutura da táboa para que non faga falta ningunha explicación.
- -Utilice a propiedade do ancho CSS.
E un atributo que quedou obsoleto en HTML 4.01 e tamén está obsoleto en HTML5.
Máis información sobre os atributos HTML 4.01 TABLE.
- alinear: usa a propiedade da marxe CSS no seu lugar.
Hai tamén varios atributos que non forman parte de ningunha especificación HTML.
Use estes atributos se sabe que os navegadores que admite poden xestionarlos e non se preocupa polo código HTML válido.
- -Primeiro use a cor de fondo da propiedade CSS.
- bordercolor: utiliza a fronteira de propiedade CSS no canto da cor.
- bordercolorlight: utiliza a fronteira da propiedade CSS en vez.
- bordercolordark: utiliza a fronteira da propiedade CSS en vez.
- cols -Non hai alternativa a este atributo.
- altura: usa o alto da propiedade CSS no seu lugar.
- -Primeiro use a marxe de propiedade CSS.
- -Primeiro use a marxe de propiedade CSS.
- -Usar a propiedade CSS en branco-espazo no seu lugar.
- -Primeiro use a propiedade CSS vertical-alinear.
Máis información sobre os atributos específicos da TABLA do explorador.
Atributos do elemento HTML5 TABLE
Como mencionamos anteriormente, só hai un atributo, ademais dos atributos globais, válido nun elemento HTML5 TABLE: border.
O atributo de bordo úsase para definir un borde ao redor da táboa completa e todas as celas dentro del. Houbo algunha dúbida sobre se se incluiría na especificación de HTML5, pero mantívose porque proporcionou información sobre a estrutura da táboa, máis aló das implicacións de estilo.
Para engadir o atributo do bordo, establece o valor a 1 se hai un borde e está baleiro (ou deixa o atributo) se non o hai. A maioría dos navegadores tamén soportarán 0 sen límite e calquera outro valor enteiro (2, 3, 30, 500, etc.) para declarar o ancho do borde en píxeles, pero isto está obsoleto en HTML5. No seu canto, debes usar as propiedades do estilo de bordo CSS para definir o ancho do borde e outros estilos.
Para crear unha táboa cun bordo, escriba:
border = "1" >
Esta é unha táboa cun bordo
Hai HTML 4.01 atributos que están obsoletos en HTML5. Se pensas escribir documentos HTML 4.01, podes aprender deles, se non, podes ignoralos. A maioría destes atributos teñen alternativas, descritas anteriormente.
Describimos os atributos do elemento válidos en HTML5 (e HTML 4.01). Isto describe os atributos TABLE válidos en HTML 4.01, pero están obsoletos en HTML5. Se aínda escribes documentos HTML 4.01, podes usar estes atributos, pero a maioría deles ten alternativas que farán que as túas páxinas estean máis protexidas para o futuro cando te desprazas a HTML5.
Atributos HTML 4.01 válidos
O atributo que describimos anteriormente.
A única diferenza no HTML 4.01 de HTML5 é que pode especificar calquera enteiro enteiro (0, 1, 2, 15, 20, 200, etc.) para definir o ancho do borde en píxeles.
Para crear unha táboa cun bordo de 5 píxeles, escriba:
border = "5" >
Esta táboa ten un bordo de 5 píxeles.
Vexa un exemplo de dúas táboas con bordos.
O atributo define a cantidade de espazo entre os bordos das celas e os contidos da cela. O valor predeterminado é de dous píxeles. Establece a etiqueta de celas en 0 se non desexa espazo entre os contidos e os bordos.
Para axustar o recheo de celas a 20, escriba:
cellpadding = "20" >
Esta táboa ten un cellpadding de 20.
Os bordos das celas serán separados por 20 píxeles.
Ver un exemplo dunha táboa con cellpadding
O atributo define a cantidade de espazo entre as celas da táboa e o contido da cela. Do mesmo xeito que a paleta de celas, o valor predeterminado está axustado a dous píxeles, polo que debe configuralo en 0 se non desexa espazamento entre celas.
Para engadir espazo entre celas a unha táboa, escriba:
cellspacing = "20" >
Esta táboa ten un espazo de celas de 20.
As celas estarán separadas por 20 píxeles.
Vexa unha táboa co espazo das celas
O atributo identifica que partes do borde que rodean ao exterior dunha táboa serán visibles. Podes enmarcar a táboa nos catro lados, por un lado, arriba e abaixo, á esquerda e á dereita ou ningún.
Aquí está o HTML para unha táboa con só o bordo esquerdo:
frame = "lhs" >
Esta táboa
terá
só o
lado esquerdo enmarcado.
E outro exemplo co marco inferior:
frame = "below" >
Esta táboa ten un marco na parte inferior.
Consulte algunhas táboas con cadros
O atributo é similar ao atributo de cadro, só afecta aos bordos que rodean as celas da táboa. Pode establecer regras en todas as celas, entre columnas, entre grupos como TBODY e TFOOT ou ningún.
Para crear unha táboa con liñas só entre as liñas, escriba:
rules = "rows" >
Esta táboa 4x4 ten
as filas non as columnas
descritas co
atributo de regras.
E outro con liñas entre as columnas:
rules = "cols" >
Isto é
unha táboa
onde está o
columnas
son
resaltado
Aquí tes un exemplo de aa táboa con regras
O atributo proporciona información sobre a táboa para lectores de pantalla e outros axentes de usuário que poden ter problemas para ler táboas. Para usar o atributo de resumo, escribe unha breve descrición da táboa e colócao como o valor do atributo. O resumo non se mostrará na páxina web na maioría dos navegadores web estándar.
Aquí tes como escribir unha sinxela táboa cun resumo:
summary = "Esta é unha táboa de mostra que contén información de recheo. O obxectivo desta táboa é demostrar un resumo." >
columna 1 liña 1
columna 2 fila 1
columna 1 liña 2
columna 2 fila 2
Ver unha táboa cun resumo
O atributo define o ancho da táboa en píxeles ou como porcentaxe do elemento do contedor. Se o ancho non está configurado, a táboa só ocupará tanta maior cantidade de espazo para mostrar os contidos, cun ancho máximo igual ao ancho do elemento primario.
Para crear unha táboa cun ancho específico en píxeles, escriba:
width = "300" >
Esta táboa é o 80% do ancho do contenedor en que está.
E para construír unha táboa cun ancho que sexa unha porcentaxe do elemento primario, escriba:
width = "80%" >
Esta táboa é o 80% do ancho do contenedor en que está.
Vexa un exemplo dunha táboa cun ancho
HTML atribuído HTML 4.01 obsoleto
Hai un atributo do elemento TABLE que está obsoleto en HTML 4.01 e obsoletos en HTML5: alinear . Este atributo permítelle establecer onde a táboa debería estar situada na páxina en relación co texto que está ao seu carón. Este atributo quedou obsoleto en HTML 4.01 e debes evitar que o uses. En cambio, debes usar a propiedade CSS ou a marxe esquerda: auto; e marxe dereita: auto; estilos. A propiedade flotante dálle un resultado que está máis preto do que proporcionou o atributo de aliñamento, pero pode afectar a forma na que se mostra o resto dos contidos da páxina. A marxe dereita: auto; e marxe esquerda: auto; son o que o W3C recomenda como alternativa.
Aquí ten un exemplo obsoleto usando o atributo align:
align = "right" >
Esta táboa está aliñada á dereita
O texto flúe ao redor da esquerda
Vexa un exemplo obsoleto usando o atributo align.
E para obter o mesmo efecto con HTML válido (non desaprobado), escriba:
style = "float: right;" >
Esta táboa está aliñada á dereita
O texto flúe ao redor da esquerda
O seguinte explica os atributos TABLE que non forman parte de ningunha especificación HTML.
A información anterior describe atributos do elemento HTML válidos en HTML 4.01 pero están obsoletos en HTML5.
O seguinte describe os atributos TABLE que non son válidos en ningunha especificación actual. Se non se preocupa por validar as súas páxinas e os seus usuarios usan un navegador que admite estes elementos, entón pode usar estes elementos. Pero a maioría deles non está soportado nos navegadores modernos ou ten alternativas que cumpren con máis estándares.
Non recomendamos usar estes atributos nas táboas de HTML.
O atributo é un atributo antigo que foi incluído antes de que o CSS fose amplamente admitido. Permite cambiar a cor de fondo da táboa. Pode configurar un nome de cor ou un código hexadecimal. Este atributo aínda funciona en moitos navegadores, pero para HTML a proba de futuro, non debería usalo e use CSS no seu lugar.
A mellor alternativa a este atributo é a propiedade do estilo.
Para cambiar a cor de fondo dunha táboa, escriba:
style = "background-color: #ccc;" >
Esta táboa ten un fondo gris
Similar ao atributo bgcolor, o atributo bordercolor permítelle cambiar a cor do atributo. Este atributo só é compatible con Internet Explorer. En cambio, debes usar a propiedade de estilo de cor de bordo.
Para cambiar a cor do bordo da táboa, escriba:
style = "border-color: red;" >
Esta táboa ten un borde vermello.
Os atributos bordercolorlight e bordercolordark foron incluídos en Internet Explorer para permitirche crear un borde 3D na táboa. Non obstante, a partir de IE8 e superior, só se admite o IE7 Standards Mode e Quirks Mode . Microsoft afirma que estas propiedades xa non son compatibles.
Por pouco tempo, o atributo cols no elemento TABLE foi proposto para axudar aos navegadores a saber cantas columnas tiña unha táboa. A premisa era que isto axudase a acelerar a prestación de grandes mesas. Non obstante só foi implementado por Internet Explorer e, a partir de IE8 e superior, só se admite o IE7 Standards Mode e Quirks Mode.
Porque hai un atributo de ancho (obsoleto en HTML5) moitas persoas supoñían que tamén había un atributo de altura para táboas. Pero debido a que as táboas se axustan ao ancho do seu contido ou ao ancho definido no atributo CSS ou ancho, a altura non podería estar restrinxida. Polo tanto, os navegadores permitiron que o atributo de altura definira o alto mínimo da táboa. Se a táboa era máis alta que a altura, mostraríase máis alta. Pero debes usar a propiedade
Coa propiedade de altura de CSS pode restrinxir a altura se usa a propiedade CSS tamén para definir o que ocorre con calquera exceso de contido.
Para establecer a altura mínima nunha táboa, escriba:
style = "height: 30em;" >
Esta táboa ten polo menos 30 mil de alto.
Os dous atributos e o espazo engadido nos lados esquerdo / dereito (hspace) e superior / inferior (vspace) da táboa. Debería empregar a propiedade de estilo.
Para axustar o espazo vertical a 20 píxeles eo espazo horizontal a 40 píxeles, escriba:
style = "margin: 20px 40px;"
Esta táboa ten un vspace de 20 píxeles e un espazo de 40 píxeles.
O atributo é un atributo booleano que define se o contido da táboa debe axustarse ao bordo do elemento primario ou ventá ou forzar o desprazamento horizontal. No seu canto, debes definir as características de embrulho de cada célula da táboa usando a propiedade CSS.
Para facer que unha columna con moita mensaxe de texto non se axuste, escriba:
style = "white-space: nowrap;" > Esta é unha columna con toneladas de contido. Pero aínda que sexa máis ancho do que o contenedor, o texto non debería axustarse á seguinte liña, senón obrigar á xanela do navegador a desprazarse horizontalmente para ver todo o contido.
Finalmente, o atributo define como os contidos de cada cela deben aliñarse verticalmente dentro da cela. No canto deste atributo non válido, debes usar a propiedade CSS en cada cela que queiras cambiar o aliñamento. Non notarás os efectos deste estilo a menos que o contido da cela sexa inferior ao espazo dispoñible creado por outras celas maiores.
Para forzar unha cela para aliñar á parte inferior (en vez do medio, como o predeterminado), escriba:
Esta cela é máis longa que o resto e forzará a altura a ser máis alta. Entón verá que a cela aliñada verticalmente está aliñada ao fondo.
style = "vertical-align: bottom;" > Contidos no fondo.
Contidos no medio.