Los atributos de la tabla HTML le dan mucho más control sobre las tablas HTML. Hay muchos atributos disponibles para las tablas para hacerlos más interesantes y cambiar el aspecto de su página.
Atributos de elementos de la TABLA HTML
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,. Si desea cambiar el ancho del borde, debe usar la propiedad CSS de ancho del borde.
Video destacado
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:
- & amp; # x2014; Use la propiedad de relleno CSS en la mesa y los elementos TD y TH de Apos; s.
- & amp; # x2014; Use el espacio entre bordes de la propiedad CSS en la mesa.
- & amp; # x2014; Use estilos CSS de color de borde: negro; y estilo de borde en la mesa.
- & amp; # x2014; Use estilos CSS de color de borde: negro; y estilo de borde en los elementos apropiados de la tabla.
- & amp; # x2014; en cambio, debe describir la estructura de la tabla en una CAPCIÓN o poner toda la tabla en una FIGURA y describirla en una FIGCAPCIÓN. Alternativamente, puede simplificar la estructura de la tabla para que no se necesite ninguna explicación.
- & amp; # x2014; Use la propiedad de ancho CSS.
Y un atributo que estaba en desuso en HTML 4.01 y también es obsoleto en HTML5.
- alinear & amp; # x2014; use la propiedad de margen CSS 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 HTML válido.
- & amp; # x2014; Utilice el color de fondo de la propiedad CSS en su lugar.
- bordercolor & amp; # x2014; utilice el color de borde de la propiedad CSS en su lugar.
- bordercolorlight & amp; # x2014; utilice el color de borde de la propiedad CSS en su lugar.
- bordercolordark & amp; # x2014; utilice el color de borde de la propiedad CSS en su lugar.
- cols & amp; # x2014; no hay alternativa a este atributo.
- altura y amperios; # x2014; utilice la altura de la propiedad CSS en su lugar.
- & amp; # x2014; utilice el margen de propiedad CSS en su lugar.
- & amp; # x2014; Utilice la propiedad CSS espacio en blanco en su lugar.
- & amp; # x2014; Utilice la propiedad CSS vertical-alinear en su lugar.
Atributos de elementos de la TABLA HTML5
Como we & amp; amp; nbsp; mencionado anteriormente, solo hay un atributo, más allá de los atributos globales, que es válido en un elemento TABLA HTML5: borde.
El atributo de borde se usa para definir un borde alrededor de toda la tabla y todas las celdas dentro de él. 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 implicaciones de estilo.
Para agregar el atributo de borde, establece el valor en 1 si hay un borde y está vacío (o deja el atributo) si no lo hay. La mayoría de los navegadores también admitirán 0 sin borde y cualquier otro valor entero (2, 3, 30, 500, etc.) para declarar el ancho de borde y amp; apos; s en píxeles, pero esto es obsoleto en HTML5. En cambio, 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 = & amp; quot; 1 & amp; quot; & amp; gt ;
& lt; br & gt ;
& lt; br & gt ;
Esta es una mesa con borde
& lt; br & gt ;
& lt; br & gt ;
Esto describe los atributos & amp; amp; nbsp; TABLE & amp; amp; nbsp; que son válidos en HTML 4.01, pero son 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.& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
Atributos HTML 4.01 válidos
El atributo que describimos & amp; amp; nbsp; arriba. La única diferencia en HTML 4.01 de HTML5 es que puede especificar cualquier entero completo (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:
& lt; pre & gt; border = & amp; quot; 5 & amp; quot; & amp; gt ;
& lt; / pre & gt ;
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 & amp; amp; nbsp; cellpadding & amp; amp; nbsp; to & amp; amp; nbsp; 0 & amp; amp; nbsp; si no desea espacio entre los contenidos y los bordes.
Para establecer el acolchado de la celda en 20, escriba:
& lt; pre & gt; cellpadding = & amp; quot; 20 & amp; quot; & amp; gt ;
& lt; / pre & gt ;
Esta tabla tiene a & amp; amp; nbsp; cellpadding & amp; amp; nbsp; de 20.
Los bordes de la celda estarán separados por 20 píxeles.
Vea un ejemplo de una tabla con relleno de celda
El atributo define la cantidad de espacio entre las celdas de la tabla y el contenido de la celda. Me gusta & amp; amp; nbsp; cellpadding, el valor predeterminado está configurado en dos píxeles, por lo que debe configurarlo en & amp; amp; nbsp; 0 & amp; amp; nbsp; si no desea espaciar celdas.
Para agregar el espacio entre celdas a una tabla, escriba:
& lt; pre & gt; cellspacing = & amp; quot; 20 & amp; quot; & amp; gt ;
& lt; / pre & gt ;
Esta tabla tiene a & amp; amp; nbsp; cellspacing & amp; amp; nbsp; de 20.
Las celdas estarán separadas por 20 píxeles.
El atributo identifica qué partes del borde que rodea 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 = & amp; quot; lhs & amp; quot; & amp; gt ;
& lt; br & gt ;
& lt; br & gt ;
Esta mesa
& lt; br & gt ;
tendrá
& lt; br & gt ;
& lt; br & gt ;
& lt; br & gt ;
solo el
& lt; br & gt ;
lado izquierdo enmarcado. & lt; br & gt ;
& lt; br & gt ;
Y otro ejemplo con el marco inferior: & lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
frame = & amp; quot; below & amp; quot; & amp; gt ;
& lt; br & gt ;
& lt; br & gt ;
Esta tabla tiene un marco en la parte inferior. & lt; br & gt ;
& lt; br & gt ;
Echa un vistazo a algunas tablas con marcos & lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
El atributo es similar al atributo & amp; amp; nbsp; frame & amp; amp; nbsp; solo afecta los bordes alrededor de las celdas de la tabla. Puede establecer reglas en todas las celdas, entre columnas, entre grupos como & amp; amp; nbsp; TBODY & amp; amp; nbsp; y & amp; amp; nbsp; TFOOT & amp; amp; nbsp; o ninguno.
Para construir a & amp; amp; nbsp; table con líneas & amp; amp; nbsp; solo entre las filas, escriba:
reglas = & amp; quot; rows & amp; quot; & amp; gt ;
& lt; br & gt ;
& lt; br & gt ;
Esta tabla 4×4 tiene
& lt; br & gt ;
las filas no columnas
& lt; br & gt ;
& lt; br & gt ;
& lt; br & gt ;
delineado con el
& lt; br & gt ;
atributo de reglas.& lt; br & gt ;
& lt; br & gt ;
Y otro con líneas entre las columnas: & lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
reglas = & amp; quot; cols & amp; quot; & amp; gt ;
& lt; br & gt ;
& lt; br & gt ;
Esto es
& lt; br & gt ;
una mesa
& lt; br & gt ;
donde el
& lt; br & gt ;
& lt; br & gt ;
& lt; br & gt ;
columnas
& lt; br & gt ;
son
& lt; br & gt ;
resaltado
& lt; br & gt ;
& lt; br & gt ;
El atributo proporciona información sobre la tabla para lectores de pantalla y otros agentes de usuario que pueden tener problemas para leer tablas.Para usar el atributo & amp; amp; nbsp; summary & amp; nbsp; nbs, escribe una breve descripción de la tabla y la coloca como el valor del atributo. El resumen won & amp; apos; t se muestra en la página web en la mayoría de los navegadores web estándar.& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
Aquí se explica cómo escribir una tabla simple con un resumen:
& lt; pre & gt; summary = & amp; quot; Esta es una tabla de muestra que contiene información de relleno. El propósito de esta tabla es demostrar un resumen.& amp; quot; & amp; gt ;
& lt; / pre & gt ;
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 el & amp; amp; nbsp; width & amp; nbsp; no está configurado, la tabla ocupará solo el mayor espacio que necesite 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:
& lt; pre & gt; width = & amp; quot; 300 & amp; quot; & amp; gt ;
& lt; / pre & gt ;
Esta tabla 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 principal, escriba:
& lt; pre & gt; width = & amp; quot; 80% & amp; quot; & amp; gt ;
& lt; / pre & gt ;
Esta tabla tiene el 80% del ancho del contenedor en el que se encuentra.
HTML 4.01 & amp; amp; nbsp; TABLE & amp; amp; nbsp; Atribute
Hay un atributo de & amp; amp; nbsp; TABLE & amp; amp; nbsp; element 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 cambio, debe usar la propiedad CSS o el & amp; amp; nbsp; margin-left: auto; & amp; amp; nbsp; y & amp; amp; nbsp; margin-right: auto; & amp; amp; nbsp; styles. The & amp; amp; nbsp; float & amp; nbsp; property le da un resultado más cercano a lo que el & amp; amp; nbsp; align & amp; nbsp; atributo proporcionado, pero puede afectar la forma en que se muestra el resto del contenido de la página. The & amp; amp; nbsp; margin-right: auto; & amp; amp; nbsp; y & amp; amp; nbsp; margin-left: auto; & amp; amp; nbsp; son lo que recomienda el W3C como alternativa.
Aquí hay un ejemplo en desuso que usa el atributo & amp; amp; nbsp; align & amp; amp; nbsp;
& lt; pre & gt; align = & amp; quot; right & amp; quot; & amp; gt ;
& lt; / pre & gt ;
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 depreciado), escriba:
& lt; pre & gt; style = & amp; quot; float: right; & amp; quot; & amp; gt ;
& lt; / pre & gt ;
Esta tabla está alineada a la derecha
El texto fluye a su alrededor hacia la izquierda
Obsoleto & amp; amp; nbsp; TABLE & amp; amp; nbsp; Atributos
La información anterior describe los atributos del elemento HTML que son válidos en HTML 4.01 pero que son obsoletos en HTML5.
The & amp; amp; nbsp; Following & amp; nbsp; describe & amp; amp; nbsp; TABLE & amp; amp; nbsp; atributos que no son válidos en ninguna especificación actual. Si no le importa si sus páginas validan y sus usuarios usan un navegador que admita estos elementos, 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 & amp; amp; nbsp; en sus tablas HTML.
El atributo es un atributo antiguo que se incluyó antes de que CSS fuera ampliamente compatible. Le permite cambiar el color de fondo de la tabla. Puede establecer un nombre de color o un código hexadecimal. Este atributo todavía funciona en muchos navegadores, pero para HTML a prueba de futuro, no debe usarlo y usar 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:
& lt; pre & gt; style = & amp; quot; background-color: #ccc; & amp; quot; & amp; gt ;
& lt; / pre & gt ;
Esta tabla tiene un fondo gris
Similar a & amp; amp; nbsp; bgcolor & amp; amp; nbsp; atribute, the & amp; amp; nbsp; bordercolor & amp; amp; nbsp; atribute le permite cambiar el color del atributo. Este atributo solo es compatible con Internet Explorer. En cambio, debe usar la propiedad de estilo de color de borde.
Para cambiar el color de su borde de tabla y amp; apos; s, escriba:
style = & amp; quot; border-color: red; & amp; quot; & amp; gt ;
& lt; br & gt ;
& lt; br & gt ;
Esta mesa tiene un borde rojo.
& lt; br & gt ;
& lt; br & gt ;
The & amp; amp; nbsp; bordercolorlight & amp; nbsp; and & amp; amp; nbsp; bordercolordark & amp; amp; nbsp; los atributos se incluyeron en Internet Explorer para permitirle crear un borde 3D alrededor de su mesa. Sin embargo, a partir de IE8 y superior, esto solo es compatible con & amp; amp; nbsp; IE7 Standards Mode y Quirks Mode.& amp; amp; nbsp; Microsoft & amp; amp; nbsp; declara que estas propiedades ya no son compatibles.& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
Por un corto tiempo, el & amp; amp; nbsp; cols & amp; amp; nbsp; atribute en el & amp; amp; nbsp; TABLE & amp; amp; nbsp; 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 a partir de IE8 y superior, esto solo es compatible con el modo de estándares IE7 y el modo Quirks.
Debido a que hay un atributo & amp; amp; nbsp; width & amp; nbsp; (obsoleto en HTML5), muchas personas asumieron que también había un atributo & amp; amp; nbsp; height & amp; amp; nbsp; para tablas. Pero debido a que las tablas se ajustan al ancho de su contenido o al ancho definido en el CSS o & amp; amp; nbsp; width & amp; amp; nbsp; atribute, la altura no se puede restringir. Entonces, en cambio, los navegadores permitieron que el atributo & amp; amp; nbsp; height & amp; nbsp; definiera la altura mínima de la tabla. Si la mesa fuera más alta que esa altura, se vería más alta. Pero debe usar la propiedad
Con CSS & amp; amp; nbsp; height & amp; amp; nbsp; property puede restringir la altura si usa la propiedad CSS también para definir qué sucede con cualquier exceso de contenido.
Para establecer la altura mínima en una tabla, escriba:
& lt; pre & gt; style = & amp; quot; height: 30em; & amp; quot; & amp; gt ;
& lt; / pre & gt ;
Esta tabla tiene al menos 30 ems de altura.
Los dos atributos y el espacio agregado alrededor de los lados izquierdo / derecho (hspace) y superior / inferior (vspace) de la tabla. Debe 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:
& lt; pre & gt; style = & amp; quot; margen: 20px 40px; & amp; quot ;
& lt; / pre & gt ;
Esta tabla tiene un vspace de 20 píxeles y un hspace de 40 píxeles.
El atributo es un atributo booleano que define si el contenido de la tabla debe envolverse en el borde del elemento o ventana principal o forzar el desplazamiento horizontal. En cambio, debe definir las características de envoltura de cada celda de tabla utilizando la propiedad CSS.
Para hacer una columna con mucho texto sin envolver, escriba:
& lt; br & gt ;
& lt; br & gt ;
style = & amp; quot; white-space: nowrap; & amp; quot; & amp; gt; Esta es una columna con una tonelada de contenido. Pero incluso si es más ancho que el contenedor, el texto no debe ajustarse a la siguiente línea, sino que debe forzar la ventana del navegador a desplazarse horizontalmente para ver todo el contenido.
& lt; br & gt ;
& lt; br & gt ;
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 de la que desea cambiar la alineación. Usted notó los efectos de este estilo a menos que el contenido de cell & amp; apos; s sea menor que el espacio disponible creado por otras celdas más grandes.& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
Para forzar a una celda a alinearse con la parte inferior (en lugar del medio, como el valor predeterminado), escriba:
& lt; br & gt ;
& lt; br & gt ;
Esta celda es más larga que el resto y, por lo tanto, forzará a que la altura sea más alta. Entonces verá que la celda alineada verticalmente está alineada con la parte inferior.
& lt; br & gt ;
style = & amp; quot; vertical-align: bottom; & amp; quot; & amp; gt; Contenido en la parte inferior.
& lt; br & gt ;
Contenido en el medio.
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& amp; # x203A; Informática
