Los atributos de las tablas HTML le dan mucho más control sobre las tablas HTML. Hay muchos atributos disponibles en las tablas para hacerlas más interesantes y cambiar el aspecto de su página.
Índice de contenidos
Atributos de los elementos de la TABLA HTML
En HTML5 el elemento utiliza los atributos globales y otro atributo: . Y ha cambiado para tener sólo el valor 1 o vacío (es decir, Si desea cambiar el ancho del borde, debe utilizar la propiedad border-width CSS.
Vea abajo para aprender 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 acolchado CSS en los elementos TD y TH de la tabla.
- -Usar la propiedad CSS border-spacing en la tabla.
- -Usar el color de borde de los estilos CSS: negro; y el estilo de borde en la tabla.
- -Usar el color de borde de los estilos CSS: negro; y el estilo de borde en los elementos apropiados de la tabla.
- -En su lugar, debe describir la estructura de la tabla en un EPÍGRAFE o poner toda la tabla en una FIGURA y describirla en una FIGURA. Alternativamente, podría simplificar la estructura de la tabla para que no sea necesaria ninguna explicación.
- -Utilice la propiedad CSS width.
Y un atributo que fue desaprobado en HTML 4.01 y que también es obsoleto en HTML5.
Aprenda más sobre los atributos de HTML 4.01 TABLE.
- align-Use en su lugar la propiedad CSS margin.
También hay varios atributos que no forman parte de ninguna especificación HTML. Utilice estos atributos si sabe que los navegadores que soporta pueden manejarlos y no le importa que sean HTML válidos.
- -Utilice en su lugar el color de fondo de la propiedad CSS.
- bordercolor-Use en su lugar la propiedad CSS border-color.
- bordercolorlight-Use en su lugar la propiedad CSS border-color.
- bordercolordark-Use en su lugar la propiedad CSS border-color.
- cols-No hay alternativa a este atributo.
- height-Use en su lugar la propiedad CSS height.
- -Utilice en su lugar el margen de la propiedad CSS.
- -Utilice en su lugar el margen de la propiedad CSS.
- -Utilice en su lugar el espacio en blanco de la propiedad CSS.
- -Utilice la propiedad CSS vertical-align en su lugar.
Obtenga más información sobre los atributos específicos del navegador TABLE.
Atributos de los elementos de la TABLA HTML5
Como mencionamos anteriormente, sólo hay un atributo, más allá de los atributos globales, que es válido en un elemento HTML5 TABLE: border.
El atributo border se utiliza para definir un borde alrededor de toda la tabla y de todas las celdas dentro de ella. Se planteó la cuestión de 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 meras implicaciones estilísticas.
Para añadir el atributo border, se establece el valor en 1 si hay un borde y vacío (o se deja fuera del atributo) si no lo hay. La mayoría de los navegadores también soportan 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 de borde y otros estilos.
Para crear una tabla con un borde, escriba:
border=»1″>
#fefefe»>#fefefe»>#fefefe Esta es una tabla con un borde. / i> 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). Describe los atributos TABLE que son válidos en HTML 4.01, pero que están obsoletos en HTML5. Si todavía escribe documentos HTML 4.01, puede utilizar 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 pase a HTML5.
Atributos HTML 4.01 válidos
El atributo que describimos anteriormente. La única diferencia entre HTML 4.01 y HTML5 es que se 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, escribe:
border=»5″>
#fefefe»>#fefefe»>#fefefe Esta tabla tiene un borde de 5 píxeles. / i> 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 misma. El valor predeterminado es de dos píxeles. Ponga el relleno de celda a 0 si no desea que haya espacio entre el contenido y los bordes.
Para fijar el relleno de celdas en 20, escriba:
cellpadding=»20″>
#fefefe»>#fefefe»>#fefefe Esta tabla tiene un acolchado de 20. / i> #fefefe»>#fefefe Los bordes de las celdas estarán separados por 20 píxeles. / i> Ver un ejemplo de una tabla con relleno de celdas
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 que haya espacio entre celdas.
Para agregar un espacio entre celdas a una tabla, escriba:
cellspacing=»20″>
#fefefe»>#fefefe»>#fefefe Esta tabla tiene un espacio entre celdas de 20. / i> #fefefe»>#fefefe Las células estarán separadas por 20 píxeles. / i> Ver una tabla con el espacio entre celdas
El atributo identifica qué partes del borde que rodean el exterior de una tabla serán visibles. Usted puede enmarcar su mesa en los cuatro lados, cualquier lado, arriba y abajo, izquierda y derecha, o ninguno.
Aquí está el HTML para una tabla con sólo el borde izquierdo:
frame=»lhs»>
#fefefe»>#fefefe»>#fefefe This table will have #fefefe»>#fefefe sólo el Lado izquierdo enmarcado. / i> Y otro ejemplo con el marco inferior:
frame=»below»>
#fefefe»>#fefefe»>#fefefe Esta tabla tiene un marco en la parte inferior. / i> Echa un vistazo a algunas tablas con marcos
El atributo es similar al atributo de marco, sólo que afecta a 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 ninguna.
Para construir una tabla con líneas sólo entre las líneas, escriba:
rules=»rows»>
#fefefe»>#fefefe»>#fefefe Esta tabla de 4×4 tiene Las filas, no las columnas. / i> #fefefe»>#fefefe DIFUNDE LA PALABRA- Atributo de las reglas. / i> Y otro con líneas entre las columnas:
rules=»cols»>
#fefefe»>#fefefe»>#fefefe This isThis is/ i> / i>. A tablea table donde se encuentra el / i> #fefefe»>#fefefe Columnas /fefefe»>/»font color=»#fefefe «#fefefe»>/»#fefefe «#fefefe»> «#fefefe areare/fefefe»> / i> 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. Para utilizar el atributo de resumen, escriba una breve descripción de la tabla y póngala como valor del atributo. El resumen no se mostrará en la página web en la mayoría de los navegadores web estándar.
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. #fefefe»>#fefefe»>#fefefe columna 1 fila 1
columna 2 fila 1 / i> #fefefe»>#fefefe columna 1 fila 2
column 2 row 2â?ª â?ª â?ª ª â?ª / i> 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 no se establece el ancho, la tabla ocupará sólo el espacio necesario para mostrar el contenido, con un ancho máximo igual al ancho del elemento padre.
Para construir una tabla con un ancho específico en píxeles, escriba:
width=»300″>
#fefefe»>#fefefe»>#fefefe Esta tabla es el 80% del ancho del contenedor en el que se encuentra. / i> Y para construir una tabla con un ancho que sea un porcentaje del elemento padre, escribe:
width=»80%»>
#fefefe»>#fefefe»>#fefefe Esta tabla es el 80% del ancho del contenedor en el que se encuentra. / i> Ver un ejemplo de una tabla con un ancho
Atributo HTML 4.01 TABLE desaprobado
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 estar ubicada la tabla en la página en relación con el texto que está al lado. Este atributo ha sido obsoleto en HTML 4.01, y debería evitar usarlo. En su lugar, debe utilizar la propiedad CSS o la propiedad margin-left: auto; y margin-right: auto; styles. La propiedad float le da un resultado que se acerca más a lo que el atributo align proporciona, pero puede afectar a la forma en que se muestra el resto de los contenidos de la página. El margin-right: auto; y el margin-left: auto; son lo que el W3C recomienda como alternativa.
Aquí hay un ejemplo obsoleto usando el atributo align:
align=»right»>
#fefefe»>#fefefe»>#fefefe Esta tabla está alineada a la derecha. / i> #fefefe»>#fefefe El texto fluye a su alrededor a la izquierda. / i> Vea un ejemplo obsoleto usando el atributo align.
Y para obtener el mismo efecto con HTML válido (no desaprobado), escriba:
#fefefe»>#fefefe»>#fefefe Esta tabla está alineada a la derecha. / i> #fefefe»>#fefefe El texto fluye a su alrededor a la izquierda. / i> A continuación se explican los atributos TABLE que no forman parte de ninguna especificación HTML.
La información anterior describe atributos del elemento HTML que son válidos en HTML 4.01 pero que están obsoletos en HTML5.
A continuación se describen los atributos TABLE 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 soporta 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 usar estos atributos en sus tablas HTML.
El atributo es un atributo antiguo que se incluyó antes de que el CSS fuera ampliamente soportado. 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 preparado para el futuro, no debería usarlo, y en su lugar debería usar CSS.
La mejor alternativa a este atributo es la propiedad style.
m
