Html, filas y columnas

Veamos cómo crear otros modelos añadiendo filas y columnas. Dado que conocen los elementos fundamentales de una tabla, hagamos una con dos celdas.

Así será nuestra tabla:

¿Qué determina la inclusión de una celda en una tabla entre los tres elementos enumerados? La etiqueta td. Entonces utilizamos td para agregar dos celdas en nuestra tabla:

Cada vez que repitas la etiqueta td, se forma una celda. Si la repites tres veces, claramente tendrás tres celdas. Ahora veamos cómo hacer una tabla con dos filas usando tr. Así será nuestra tabla:

También en este caso se repite la etiqueta tr según la cantidad de filas a insertar. Presta mucha atención… la etiqueta tr siempre contiene la etiqueta td ya que las dos filas forman en realidad dos celdas. Ahora hagamos una tabla con dos filas y dos celdas en la parte inferior.

Hicimos una tabla formada por dos filas y dos celdas en la parte inferior. Aquí está el código usado:

Les presento colspan que sirve para dividir una celda única en varias. En nuestro caso, la fila inferior de la tabla fue dividida, mediante colspan, en dos celdas. Al usar colspan se deben insertar las medidas de las dos celdas individuales generadas por colspan mismo, medidas que deben considerar el total de la tabla:

 

El tamaño total de la celda es de 400px, que se dividirá en dos celdas con colspan.

 

Dividiendo en dos celdas de tamaño igual, obtendremos dos celdas de 200px cada una (400:2). Si quisiéramos que una de las dos celdas generadas por colspan fuera más grande que la otra, debemos siempre tener como referencia el tamaño total de la tabla, es decir:

Por lo tanto, puedes asignar diferentes medidas a las dos celdas generadas, siempre que la suma no supere los 400px. Puedes hacer ejercicios construyendo tablas con varias combinaciones de tamaños, insertando filas y celdas, redimensionándolas para ver el efecto y encontrar la combinación que mejor se adapte a tus necesidades.

Pubblicato in HTML & CSS