Inicio>Tutorial de diseño web>Tutorial HTML

Tutorial HTML: 10 etiquetas relacionadas con la mesa para HTML

Autor：Eve Cole Fecha de actualización：2025-05-23 01:00:03

Basado en algunas de mis prácticas recientes y después de comunicarme con algunos lectores sobre el uso de formularios HTML, decidí escribir este artículo. En general, noté que tenían un disgusto preconcebido con el uso de tablas debido a la información engañosa. De hecho, muchas personas dirán que veo la declaración de que nunca debería usar formularios, ¡pero esto está absolutamente mal! Esta sugerencia es solo para usar tablas HTML para definir el diseño de la página web, pero las tablas son perfectas para una disposición conveniente de filas y columnas de información de datos, y si tiene que mostrar datos de la columna de la tabla en una página! ¿por qué no? Sin embargo, en este caso, algunas personas ignoran la existencia de ciertas etiquetas HTML utilizadas para tablas y no saben cómo usarlas correctamente.

HTML tiene 10 etiquetas relacionadas con la tabla. Aquí hay una lista con una introducción, pero primero, el documento debe definirse correctamente a continuación HTML 4.01/XHTML 1 o HTML 5:

  • <tittition> Definir el título de la tabla (4, 5)
  • <OL> Definir atributos para columnas de una tabla (4, 5)
  • <COLGROUP> Define la agrupación de columnas de tabla (4, 5)
  • <Able> Defina la tabla (4, 5)
  • <tbody> Defina el cuerpo de la tabla (4, 5)
  • <TD> Definir una célula (4, 5)
  • <Tfoot> Defina la nota de la tabla (abajo) (4, 5)
  • <th> Defina el encabezado de la tabla (4, 5)
  • <Art> Define el encabezado de la tabla (4, 5)
  • <tr> define las filas de la tabla (4, 5)

Una estructura de tabla básica es la siguiente:

Contiene un título, cabeza, cuerpo e inferior. El orden correcto de los elementos HTML es:

  1. <Table>
  2. <tititar>
  3. <Evista>
  4. <Tfoot>
  5. <Tbody>

También puede usar <COL> y <COLGROUP> Para definir columnas de tablas o columnas de grupo:

  1. <Table>
  2. <tititar>
  3. <COLGROUP>
  4. <col>
  5. <Evista>
  6. <Tfoot>
  7. <Tbody>

Aquí hay un ejemplo correcto de la estructura de la tabla:

 <tabla border = 1> <tittion> Tabla Stittition aquí </titticion> <colgroup span = 1 style = background: #dedede;/> <colgroup span = 2 style = fondo: #efefef;/> <!-encabezado de tabla-> <thead> <tr> <th> head 1 </th> <th> head 2 </th> <th> head 3 </th> </tr> </tead> <! pie de página-> <tfoot> <tr> <td> Foot 1 </td> <td> Foot 2 </td> <td> Foot 3 </td> </tfoot> <!-Table Body-> <Tbody> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> <tr> <td> d </td> <td> e </td> <td> f </td> </tr> </tbody> </table>

Los resultados en el navegador se muestran en la figura a continuación:

Algunos consejos sobre el formulario

  • De acuerdo con la explicación y el uso de W3Schools, en una definición de tabla, el elemento <tfoot> debe aparecer antes de <tbody> , para que el navegador pueda representar las notas de la tabla antes de aceptar todos los datos. Además, si no es este orden, no será validado por HTML4 y XHTML de W3C, sin importar qué tipo de DTD declare.
  • En HTML 4.01, las propiedades Aline y BGColor de la tabla no se favorecen, por lo que no se admiten atributos de la tabla en HTML 5 (de hecho, las propiedades Aline y BGColor ya no se admiten en XHTML 1.0 Strict DTD);
  • Todos los navegadores convencionales admiten la etiqueta <OlGroup>, pero Firefox, Chrome y Safari solo admiten los atributos de tramo y ancho del elemento colgroup;
  • Células vacías: Show | Ocultar en CSS puede establecer si una celda vacía muestra un borde. Tenga en cuenta que esto debe establecerse en la tabla en lugar de TD/TH . Es más probable que este problema se encuentre en IE6;
  • Colapso de la frontera: colapso | separado en CSS puede establecer si el borde de una tabla se fusiona en un borde;
  • La propiedad de espacios fronterizos en CSS es equivalente a la propiedad de la tabla Cellspacing de la tabla.

Para realizar el modelo de desarrollo de rendimiento y separación de estructura que se defiende por ahora, la observación frontal recomienda que todas las cosas relacionadas con la capa de presentación en la página se controlen por CSS, y no usen los atributos proporcionados por HTML para controlar el rendimiento de la página, y la tabla es más fácil de ignorar.

Para obtener más detalles sobre las tablas, consulte la documentación W3C: W3 Introducción a las tablas

Finalmente, te dejaré una pregunta muy simple para ti. ¿Qué atributo de CSS es equivalente al atributo CellPadding de la tabla?

Artículos relacionados