Pasos para construir una tabla HTML 2×2

4.4 (87.1%) 124 vote[s]

Las tablas HTML son fáciles de crear una vez que entienda los conceptos básicos de filas y columnas, y también una vez que entienda cuándo está bien usar una tabla y cuándo debe evitarlas.

Breve historia de las tablas y el diseño web

Hace muchos años, antes de la aceptación de los estándares CSS y web, los diseñadores web utilizaban el elemento HTML para crear un diseño de página para los sitios. Los diseños de sitios web se «rebanaban» en pequeñas piezas como un rompecabezas y luego se combinaban con una tabla HTML para que se renderizaran en el navegador como se pretendía. Fue un proceso muy complejo que creó muchas marcas HTML adicionales y que hoy en día nunca se podrían utilizar en el mundo multipantalla en el que viven nuestros sitios web. A medida que el CSS se convirtió en el método aceptado para los visuales y el diseño de la página web, el uso de tablas para esto fue rechazado y muchos diseñadores web creyeron erróneamente que «las tablas eran malas». Eso era y es falso. Las tablas para el diseño son malas, pero todavía tienen un lugar en el diseño web y HTML, es decir, para mostrar datos tabulares como un calendario o un horario de trenes. Para ese contenido, el uso de una tabla sigue siendo un enfoque aceptable y bueno.

Entonces, ¿cómo se diseña una mesa? Comencemos por crear una tabla 2×2 simple. Esto tendrá 2 columnas (estos son los bloques verticales) y 2 filas (los bloques horizontales). Después de haber construido una tabla 2×2, puede construir cualquier tamaño de tabla que desee, simplemente añadiendo filas o columnas adicionales.

Aquí está el cómo

  1. Primero abra la tabla

  2. Abrir la primera fila con la etiqueta tr

  3. Abrir la primera columna con la etiqueta td

  4. Escribir el contenido de la celda

  5. Cerrar la primera celda y abrir la segunda

    / i>

  6. Escribir el contenido de la segunda celda

  7. Cerrar la segunda celda y cerrar la fila

    / i>

  8. Escriba la segunda fila exactamente como la primera

     td>  

    Luego cierre la tabla

  9. ¡Eso es todo!

También puede elegir añadir cabeceras de tabla a su tabla usando el comando

elemento. Estas cabeceras de tabla reemplazarían a las piezas de "datos de tabla" de la primera fila de la tabla, así:

 #fefefe">#fefefe">#fefefe Name} DIFUNDE LA PALABRA-  / i>  #fefefe">#fefefe DIFUNDE LA PALABRA- DIFUNDE LA PALABRA-  / i>  #fefefe">#fefefe  / i>    

Cuando esta página se renderiza en el navegador, esa primera fila con las cabeceras de la tabla se muestra, por defecto, en negrita y se centran en la celda de la tabla en la que aparecen.

Entonces, ¿está bien usar tablas en HTML?

Sí, siempre y cuando no los utilice con fines de diseño, está bien utilizar tablas. Si necesita visualizar información tabular, una tabla es la forma de hacerlo. De hecho, evitar una tabla debido a una pureza equivocada para evitar este elemento HTML legítimo es tan atrasado como usarlos por razones de diseño en estos tiempos.

Escrito por Jennifer Kyrin. Editado por Jeremy Girard.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *