Los atributos de tabla HTML le dan mucho más control sobre las tablas HTML. Hay una gran cantidad de atributos disponibles en las tablas para hacerlas más interesantes y cambiar el aspecto de su página.
Atributos del elemento HTML TABLE
En HTML5, el elemento utiliza los atributos globales y otro atributo:. Y ha cambiado para que solo tenga el valor de 1 o vacío (es decir, border = ""). Si desea cambiar el ancho del borde, debe utilizar el ancho del borde Propiedad CSS.
Consulte a continuación para obtener información sobre los atributos de tabla HTML5 válidos.
También hay varios atributos que forman parte de la especificación HTML 4.01 que se ha quedado obsoleta en HTML5:
- -Utiliza el CSS
rellenopropiedad en la mesaTDyTHelementos. - -Utilice la propiedad CSS
espaciado de la fronteraen la mesa. - -Utilizar estilos CSS
color del borde: negro;yestilo de bordeen la mesa. - -Utilizar estilos CSS
color del borde: negro;yestilo de bordeEn los elementos apropiados de la tabla. - -En su lugar, debe describir la estructura de la tabla en una
SUBTÍTULOo poner toda la mesa en unaFIGURAy describiéndolo en unaLa figura. Alternativamente, puede simplificar la estructura de la tabla para que no se necesite una explicación. - -Utiliza el CSS
anchurapropiedad.
Y un atributo que quedó en desuso en HTML 4.01 y también está obsoleto en HTML5.
Obtenga más información sobre los atributos de la TABLA HTML 4.01.
alinear-Utiliza el CSSmargenpropiedad en su lugar.
También hay varios atributos que no forman parte de ninguna especificación HTML. Use estos atributos si sabe que los navegadores que admite pueden manejarlos y no le importa el HTML válido.
- -Utilice la propiedad CSS
color de fondoen lugar. color del borde-Utilice la propiedad CSScolor del bordeen lugar.bordercolorlight-Utilice la propiedad CSScolor del bordeen lugar.bordercolordark-Utilice la propiedad CSScolor del bordeen lugar.cols-No hay alternativa a este atributo.altura-Utilice la propiedad CSSalturaen lugar.- -Utilice la propiedad CSS
margenen lugar. - -Utilice la propiedad CSS
margenen lugar. - -Utilice la propiedad CSS
espacio en blancoen lugar. - -Utilice la propiedad CSS
alineación verticalen lugar.
Obtenga más información sobre los atributos de la TABLA específicos del navegador.
Atributos del elemento TABLE HTML5
Como mencionamos anteriormente, solo hay un atributo, más allá de los atributos globales, que es válido en un HTML5 MESA elemento: frontera.
los frontera atributo se utiliza para definir un borde alrededor de toda la tabla y todas las celdas dentro de ella. Hubo algunas dudas sobre si se incluiría en la especificación HTML5, pero se mantuvo porque proporcionaba información sobre la estructura de la tabla, más allá de las simples implicaciones de estilo.
Para agregar el frontera atributo, establece el valor a 1 si hay un borde y vacío (o dejar fuera del atributo) si no lo hay. La mayoría de los navegadores también soportarán 0 para ningún borde, y cualquier otro valor entero (2, 3, 30, 500, etc.) para declarar el ancho del borde en píxeles, pero esto está obsoleto en HTML5. En su lugar, debe usar las propiedades de estilo de borde CSS para definir el ancho del borde y otros estilos.
Para crear una tabla con un borde, escriba:
border = "1" >
Esta es una mesa con un borde.
Hay atributos HTML 4.01 que están obsoletos en HTML5. Si planea escribir documentos HTML 4.01, puede aprenderlos; de lo contrario, puede ignorarlos. La mayoría de estos atributos tienen alternativas, descritas anteriormente.
Describimos los atributos del elemento que son válidos en HTML5 (y HTML 4.01). Esto describe laMESA atributos que son válidos en HTML 4.01, pero están obsoletos en HTML5. Si aún escribe documentos HTML 4.01, puede usar estos atributos, pero la mayoría de ellos tienen alternativas que harán que sus páginas estén más preparadas para el futuro cuando se mude a HTML5.
Atributos válidos de HTML 4.01
El atributo que describimos anteriormente. La única diferencia en HTML 4.01 de HTML5 es que puede especificar cualquier entero entero (0, 1, 2, 15, 20, 200, etc.) para definir el ancho del borde en píxeles.
Para construir una tabla con un borde de 5px, escriba:
<> border = "5" > Esta tabla tiene un borde de 5px.
Vea un ejemplo de dos tablas con bordes.
El atributo define la cantidad de espacio entre los bordes de la celda y el contenido de la celda. El valor predeterminado es dos píxeles. Selecciona elrelleno de celdas a0 Si no quieres espacio entre los contenidos y los bordes.
Para establecer el relleno de celda en 20, escriba:
<> cellpadding = "20" > Esta tabla tiene una relleno de celdas de 20. Los bordes de las celdas estarán separados por 20 píxeles.
Ver un ejemplo de una tabla con cellpadding.
El atributo define la cantidad de espacio entre las celdas de la tabla y el contenido de la celda. Me gustarelleno de celdas, el valor predeterminado se establece en dos píxeles, por lo que debe configurarlo en0 Si no quieres ningún espacio celular.
Para agregar espacio entre celdas a una tabla, escriba:
<> cellspacing = "20" > Esta tabla tiene una espacio celular de 20. Las celdas estarán separadas por 20 píxeles.
Ver una tabla con espacio de celdas.
El atributo identifica qué partes del borde que rodean el exterior de una tabla serán visibles.Puede enmarcar su mesa en los cuatro lados, cualquiera de los lados, superior e inferior, izquierdo y derecho, o ninguno.
Aquí está el HTML para una tabla con solo el borde del lado izquierdo:
frame = "lhs" >
Esta mesa tendrá Solo el lado izquierdo enmarcado.
Y otro ejemplo con el marco inferior:
marco = "abajo" >
Esta tabla tiene un marco en la parte inferior.
Echa un vistazo a algunas mesas con marcos
El atributo es similar alcuadro atributo, solo afecta a los bordes alrededor de las celdas de la tabla. Puede establecer reglas en todas las celdas, entre columnas, entre grupos comoTBODY yTFOOT o ninguno
Para construir una tabla con líneas solo entre las filas, escriba:
rules = "filas" >
Esta mesa 4x4 tiene las filas no columnas delineado con el atributo de las reglas.
Y otra con líneas entre las columnas:
rules = "cols" >
Esto es una mesa donde el columnas son resaltado
Aquí hay un ejemplo de una tabla con reglas.
El atributo proporciona información sobre la tabla para lectores de pantalla y otros agentes de usuario que pueden tener problemas para leer tablas. Usar elresumen atributo, escribe una breve descripción de la tabla y la pone como el valor del atributo. El resumen no se mostrará en la página web en la mayoría de los navegadores web estándar.
Aquí es cómo escribir una tabla simple con un resumen:
<> summary = "Esta es una tabla de muestra que contiene información de relleno. El propósito de esta tabla es demostrar un resumen". > columna 1 fila 1 columna 2 fila 1 columna 1 fila 2 columna 2 fila 2
Ver una tabla con un resumen.
El atributo define el ancho de la tabla en píxeles o como un porcentaje del elemento contenedor. Si elanchura no está establecida, la tabla ocupará solo el espacio necesario para mostrar el contenido, con un ancho máximo igual al ancho del elemento principal.
Para construir una tabla con un ancho específico en píxeles, escriba:
<> ancho = "300" > Esta tabla es el 80% del ancho del contenedor en el que se encuentra.
Y para construir una tabla con un ancho que sea un porcentaje del elemento padre, escriba:
<> ancho = "80%" > Esta tabla es el 80% del ancho del contenedor en el que se encuentra.
Ver un ejemplo de una tabla con un ancho.
Atributo TABLE HTML 4.01 obsoleto
Hay un atributo de laMESA Elemento que está en desuso en HTML 4.01 y obsoleto en HTML5:alinear. Este atributo le permite establecer dónde debe ubicarse la tabla en la página en relación con el texto que está al lado. Este atributo ha quedado en desuso en HTML 4.01, y debe evitar usarlo. En su lugar, debe utilizar la propiedad CSS omargen izquierdo: auto; ymargen derecho: auto; estilos losflotador propiedad le da un resultado que está más cerca de lo que elalinear atributo proporcionado, pero puede afectar la forma en que se muestra el resto del contenido de la página. losmargen derecho: auto; ymargen izquierdo: auto; Son lo que el W3C recomienda como alternativa.
Aquí hay un ejemplo desaprobado usando elalinear atributo:
<> align = "right" > Esta tabla está alineada a la derecha El texto fluye a su alrededor hacia la izquierda.
Vea un ejemplo en desuso usando elalinear atributo.
Y para obtener el mismo efecto con HTML válido (no en desuso), escriba:
<> style = "float: right;" > Esta tabla está alineada a la derecha El texto fluye a su alrededor hacia la izquierda.
Lo siguiente explicaMESA Atributos que no forman parte de ninguna especificación HTML.
La información anterior describe los atributos del elemento HTML que son válidos en HTML 4.01 pero están obsoletos en HTML5.
Lo siguiente describeMESA atributos que no son válidos en ninguna especificación actual. Si no te importa si tus páginas se validan y tus usuarios usan un navegador que admite estos elementos, entonces puedes usar estos elementos. Pero la mayoría de ellos no son compatibles con los navegadores modernos o tienen alternativas que cumplen más con los estándares.
No recomendamos utilizar estos atributos. en sus tablas HTML.
El atributo es un atributo antiguo que se incluyó antes de que CSS fuera ampliamente soportado. Te permite cambiar el color de fondo de la tabla. Puede establecer un nombre de color o un código hexadecimal. Este atributo aún funciona en muchos navegadores, pero para el HTML preparado para el futuro, no debe usarlo, sino usar CSS.
La mejor alternativa a este atributo es la propiedad de estilo.
Para cambiar el color de fondo de una tabla, escribe:
<> style = "background-color: #ccc;" > Esta mesa tiene un fondo gris.
Similar abgcolor atributo, elcolor del borde atributo le permite cambiar el color del atributo. Este atributo solo es compatible con Internet Explorer. En su lugar, debe utilizar la propiedad de estilo de color de borde.
Para cambiar el color del borde de su mesa, escriba:
style = "border-color: red;" >
Esta tabla tiene un borde rojo.
losbordercolorlight ybordercolordark los atributos se incluyeron en Internet Explorer para permitirle crear un borde 3D alrededor de su tabla. Sin embargo, a partir de IE8 y superiores, esto solo se admite en el modo de estándares de IE7 y el modo de quirófanos. Microsoft afirma que estas propiedades ya no son compatibles.
Por un corto tiempo, elcols atributo en elMESA Se propuso un elemento para ayudar a los navegadores a saber cuántas columnas tenía una tabla. La premisa era que esto ayudaría a acelerar la representación de tablas grandes. Sin embargo, solo fue implementado por Internet Explorer, y desde IE8 en adelante, esto solo se admite en el modo de estándares de IE7 y el modo de quirófanos.
Porque hay unanchura atributo (obsoleto en HTML5) muchas personas asumieron que había unaaltura atributo para las tablas también. Pero porque las tablas se ajustan al ancho de su contenido o al ancho definido en el CSS oanchura Atributo, la altura no pudo ser restringida. Así que en su lugar, los navegadores permitieron laaltura Atributo para definir la altura mínima de la tabla. Si la mesa fuera más alta que esa altura, se mostraría más alta. Pero deberías usar la propiedad.
Con el CSSaltura propiedad puede restringir la altura si usa la propiedad CSS también para definir qué sucede con cualquier contenido en exceso.
Para establecer la altura mínima en una tabla, escriba:
<> estilo = "altura: 30em;" > Esta tabla tiene al menos 30 ems de altura.
Los dos atributos y el espacio añadido alrededor de los lados izquierdo / derecho (hspace) y arriba / abajo (vspace) de la mesa. Deberías usar la propiedad de estilo en su lugar.
Para establecer el espacio vertical en 20 píxeles y el espacio horizontal en 40 píxeles, escriba:
<> estilo = "margen: 20px 40px;" Esta tabla tiene un espacio vs de 20 píxeles y un espacio de 40 píxeles.
El atributo es un atributo booleano que define si el contenido de la tabla debe ajustarse en el borde del elemento principal o ventana o forzar el desplazamiento horizontal. En su lugar, debe definir las características de ajuste de cada celda de la tabla utilizando la propiedad CSS.
Para hacer una columna con mucho texto que no se ajuste, escriba:
<> style = "espacio en blanco: nowrap;" > Esta es una columna con un montón de contenido. Pero incluso si es más ancho que el contenedor, el texto no debe ajustarse a la siguiente línea, sino que obliga a la ventana del navegador a desplazarse horizontalmente para ver todo el contenido.
Finalmente, el atributo define cómo los contenidos de cada celda deben alinearse verticalmente dentro de la celda. En lugar de este atributo no válido, debe usar la propiedad CSS en cada celda donde desea cambiar la alineación. No notará los efectos de este estilo a menos que el contenido de la celda sea menor que el espacio disponible creado por otras celdas más grandes.
Para forzar que una celda se alinee con la parte inferior (en lugar del medio, como predeterminado), escriba:
Esta celda es más larga que el resto y, por lo tanto, forzará que la altura sea más alta. Así que verás que la celda alineada verticalmente está alineada con la parte inferior. <> style = "vertical-align: bottom;" > Contenidos en la parte inferior. Contenidos en medio.
