Cómo usar los atributos de los elementos’TABLE’ (HTML)

Cómo usar los atributos de los elementos’TABLE’ (HTML)

Cómo usar los atributos de los elementos’TABLE’ (HTML)

VALORACIÓN DEL ARTÍCULO:
5/5


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&gt. A tablea table donde se encuentra el / i> #fefefe»>#fefefe Columnas /fefefe»>/»font color=»#fefefe «#fefefe»>/»#fefefe «#fefefe»&gt «#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

TAMBIÉN TE INTERESA

all ia

all ia, el primer buscador de herramientas de inteligencia artificial

Ha llegado el punto en que uno ya se pierde con las herramientas de inteligencia artificial. A lo largo de este último año han surgido infinidad de soluciones que se distribuyen en todos los rincones de internet. Se podría decir que hay una para cada inquietud, sea a nivel personal en el terreno profesional. Pero

login-y-contraseña

El método definitivo para tener una contraseña segura: 9 pasos

Tener una contraseña segura es el primer paso para tener cierta seguridad en nuestra vida digital. Correo electrónico, claves del banco, Amazon, por poner unos ejemplos… son plataformas que estamos acostumbrados a usar casi a diario. Para todos ellos y el resto de plataformas a las que estemos suscritos, la contraseña segura es fundamental para

meta-quest-3

Meta Quest 3: características del nuevo adalid de la realidad virtual

La realidad virtual (VR) ha experimentado un crecimiento exponencial en los últimos años, y Meta Quest 3 se presenta como el pináculo de esta evolución. Como la tercera generación de dispositivos de realidad virtual autónomos desarrollados por Meta, anteriormente conocida como Facebook, el Meta Quest 3 representa una amalgama de tecnología de vanguardia y diseño

Wacom-Movink

Wacom Movink, el panel interactivo OLED más fino y ligero del mercado

Parecía estar ya todo escrito sobre monitores y panales y en éstas, llega el Wacom Movink para sorprendernos a todos. Dirigido especialmente para diseñadores y creadores de contenido, esta pantalla representa un avance significativo por su combinación única de rendimiento, portabilidad y calidad visual excepcional. El dispositivo llega acompañado de un nuevo lápiz digital, su