Los atributos de las tablas HTML le brindan mucho más control sobre las tablas HTML. Hay muchos atributos disponibles para las tablas para hacerlas más interesantes y cambiar el aspecto de su página.
Atributos del elemento HTML TABLE
En HTML5 el elemento usa los atributos globales y otro atributo y ha cambiado para tener solo el valor de 1 o vacío (es decir, border = ""). Si desea cambiar el ancho del borde, debe usar el ancho del borde Propiedad CSS.
Consulte a continuación para obtener información sobre los atributos válidos de la tabla HTML5.
También hay varios atributos que forman parte de la especificación HTML 4.01 que se ha vuelto obsoleta en HTML5:
- —Utilice la propiedad de relleno CSS en los elementos TD y TH de la tabla.
- —Utilice la propiedad CSS border-spacing en la tabla.
- —Utilice estilos CSS border-color: black; y estilo de borde en la mesa.
- —Utilice estilos CSS border-color: black; y estilo de borde en los elementos apropiados de la mesa.
- —En cambio, debe describir la estructura de la tabla en un TÍTULO o poner la tabla completa en una FIGURA y describirla en una FIGURA. Alternativamente, puede simplificar la estructura de la tabla para que no sea necesaria ninguna explicación.
- —Utilice la propiedad de ancho de CSS.
Y un atributo que quedó obsoleto en HTML 4.01 y también está obsoleto en HTML5.
- alinear: utilice la propiedad de margen CSS en su lugar.
También hay varios atributos que no forman parte de ninguna especificación HTML. Utilice estos atributos si sabe que los navegadores que admite pueden manejarlos y no le importa el HTML válido.
- —Utilice la propiedad CSS background-color en su lugar.
- bordercolor: utilice la propiedad de CSS border-color en su lugar.
- bordercolorlight: utilice la propiedad de CSS border-color en su lugar.
- bordercolordark: utilice la propiedad de CSS border-color en su lugar.
- cols: no hay alternativa a este atributo.
- altura: utilice la propiedad CSS altura en su lugar.
- —Utilice el margen de propiedad CSS en su lugar.
- —Utilice el espacio en blanco de la propiedad CSS en su lugar.
- —Utilice la propiedad CSS vertical-align en su lugar.
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 elemento TABLE HTML5: border.
El atributo de borde se utiliza para definir un borde alrededor de toda la tabla y todas las celdas que contiene. Hubo algunas dudas sobre si se incluiría en la especificación HTML5, pero permaneció porque proporcionaba información sobre la estructura de la tabla, más allá de las simples implicaciones de estilo.
Para agregar el atributo de borde, establezca el valor en 1 si hay un borde y vacío (o deje el atributo) si no lo hay. La mayoría de los navegadores también admitirá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 es obsoleto en HTML5. En su lugar, debe utilizar 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
Esto describe los atributos TABLE 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 cambie a HTML5.
Atributos válidos de HTML 4.01
El atributo que describimos anteriormente. La única diferencia entre HTML 4.01 y HTML5 es que puede especificar cualquier número 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.
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. Establezca el relleno de celda en 0 si no desea ningún espacio entre el contenido y los bordes.
Para establecer el relleno de la celda en 20, escriba:
cellpadding = "20">
Esta mesa tiene un relleno de celda de 20.
Los bordes de las celdas estarán separados por 20 píxeles.
Vea un ejemplo de una mesa con relleno de celda.
El atributo define la cantidad de espacio entre las celdas de la tabla y el contenido de la celda. Al igual que el relleno de celdas, el valor predeterminado está establecido en dos píxeles, por lo que debe establecerlo en 0 si no desea espaciado de celda.
Para agregar espacio de celda a una tabla, escriba:
espacio de celdas = "20">
Esta tabla tiene un espacio entre celdas de 20.
Las celdas estarán separadas por 20 píxeles.
El atributo identifica qué partes del borde que rodean el exterior de una mesa serán visibles. Puede enmarcar su mesa en los cuatro lados, cualquier lado, 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:
frame = "debajo">
Esta mesa tiene un marco en la parte inferior.
Mira algunas tablas con marcos.
El atributo es similar al atributo de marco, solo que afecta los bordes alrededor de las celdas de la tabla. Puede establecer reglas en todas las celdas, entre columnas, entre grupos como TBODY y TFOOT o ninguno.
Para construir una tabla con líneas solo entre las filas, escriba:
reglas = "filas">
Esta mesa 4x4 tiene
las filas no columnas
delineado con el
atributo de reglas.
Y otro con líneas entre las columnas:
reglas = "cols">
Esto es
una mesa
donde el
columnas
están
destacado
La atributo proporciona información acerca de la tabla para lectores de pantalla y otros agentes de usuario que podrían tener problemas para leer tablas. Para usar el atributo de resumen, escriba una breve descripción de la tabla y póngala 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.
A continuación se explica 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 mostrar un resumen. ">
columna 1 fila 1.
columna 2 fila 1.
columna 1 fila 2.
columna 2 fila 2.
El atributo define el ancho de la tabla en píxeles o como un porcentaje del elemento contenedor. Si no se establece el ancho, 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 mesa tiene 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 mesa tiene el 80% del ancho del contenedor en el que se encuentra.
Atributo TABLE de HTML 4.01 obsoleto
Hay un atributo del elemento TABLE que está obsoleto en HTML 4.01 y obsoleto en HTML5: align. 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 obsoleto en HTML 4.01 y debe evitar su uso. En su lugar, debería utilizar la propiedad CSS o margin-left: auto; y margen derecho: automático; estilos. La propiedad flotante le da un resultado más cercano al que proporciona el atributo de alineación, pero puede afectar la forma en que se muestra el resto del contenido de la página. El margen derecho: automático; y margen izquierdo: automático; son las que recomienda el W3C como alternativa.
Aquí hay un ejemplo obsoleto que usa el atributo align:
alinear = "derecha">
Esta tabla está alineada a la derecha.
El texto fluye a su alrededor hacia la izquierda.
Y para obtener el mismo efecto con HTML válido (no obsoleto), escriba:
style = "float: right;">
Esta tabla está alineada a la derecha.
El texto fluye a su alrededor hacia la izquierda.
Atributos de TABLE obsoletos
La información anterior describe los atributos del elemento HTML que son válidos en HTML 4.01 pero están obsoletos en HTML5.
A continuación, se describen los atributos de TABLE que no son válidos en ninguna especificación actual. Si no le importa si sus páginas se validan y sus usuarios usan un navegador que admita estos elementos, entonces puede usar estos elementos. Pero la mayoría de ellos no son compatibles con los navegadores modernos o tienen alternativas que cumplen con los estándares.
No recomendamos usar estos atributos en sus tablas HTML.
El atributo es un atributo antiguo que se incluyó antes de que CSS fuera ampliamente compatible. Te permite cambiar el color de fondo de la mesa. Puede establecer un nombre de color o un código hexadecimal. Este atributo todavía funciona en muchos navegadores, pero para HTML preparado para el futuro, no debería utilizarlo y utilizar CSS en su lugar.
La mejor alternativa a este atributo es la propiedad de estilo.
Para cambiar el color de fondo de una tabla, escriba:
style = "color de fondo: #ccc;">
Esta mesa tiene un fondo gris.
Similar al atributo bgcolor, el atributo bordercolor 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 tabla, escriba:
style = "border-color: red;">
Esta mesa tiene un borde rojo.
Los atributos bordercolorlight y bordercolordark se incluyeron en Internet Explorer para permitirle crear un borde 3D alrededor de su mesa. Sin embargo, a partir de IE8, esto solo se admite en el modo de estándares IE7 y En modo capricho. Microsoft afirma que estas propiedades ya no son compatibles.
Durante un breve período de tiempo, se propuso el atributo cols en el elemento TABLE para ayudar a los navegadores a saber cuántas columnas tenía una tabla. La premisa era que esto ayudaría a acelerar el renderizado de tablas grandes. Sin embargo, solo fue implementado por Internet Explorer y, a partir de IE8, esto solo es compatible con el modo estándar IE7 y el modo Quirks.
Debido a que hay un atributo de ancho (obsoleto en HTML5), muchas personas asumieron que también había un atributo de altura para las tablas. Pero debido a que las tablas se ajustan al ancho de su contenido o al ancho definido en el atributo CSS o ancho, la altura no se pudo restringir. Entonces, en cambio, los navegadores permitieron que el atributo de altura defina 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 la propiedad de altura de CSS, puede restringir la altura si también usa la propiedad de CSS para definir lo que sucede con el exceso de contenido.
Para establecer la altura mínima en una mesa, escriba:
style = "altura: 30em;">
Esta mesa tiene al menos 30 cms de altura.
Los dos atributos y el espacio agregado alrededor de los lados izquierdo / derecho (hspace) y superior / inferior (vspace) de la tabla. En su lugar, debería utilizar la propiedad de estilo.
Para establecer el espacio vertical en 20 píxeles y el espacio horizontal en 40 píxeles, escriba:
style = "margin: 20px 40px;"
Esta tabla tiene un espacio virtual de 20 píxeles y un espacio horizontal de 40 píxeles.
El atributo es un atributo booleano que define si el contenido de la tabla debe ajustarse al borde del elemento principal o ventana o forzar el desplazamiento horizontal. En su lugar, debe definir las características de envoltura de cada celda de la tabla utilizando la propiedad CSS.
Para hacer que una columna con mucho texto no se ajuste, escriba:
style = "white-space: nowrap;"> Esta es una columna con una tonelada de contenido. Pero incluso si es más ancho que el contenedor, el texto no debe pasar a la siguiente línea, sino que debe obligar a la ventana del navegador a desplazarse horizontalmente para ver todo el contenido.
Finalmente, el atributo define cómo el contenido de cada celda debe alinearse verticalmente dentro de la celda. En lugar de este atributo no válido, debe usar la propiedad CSS en cada celda cuya alineación desea cambiar. 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 de con el medio, como predeterminado), escriba:
Esta celda es más larga que el resto y, por lo tanto, obligará a que la altura sea más alta. Entonces verá que la celda alineada verticalmente está alineada con la parte inferior.
style = "vertical-align: bottom;"> Contenido en la parte inferior.
Contenido en el medio.