Pasos para construir una tabla HTML 2×2

4.4 (87.1%) 124 votes

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 *