Tecnología

Inicio

Tutorial HTML Colspan

Las tablas se utilizan con en el código HTML para organizar los elementos de la página en filas y columnas de celdas. Esto asegura que los elementos permanecen en las posiciones correctas, independientemente de los navegadores usados. El atributo colspan se utiliza para permitir que los datos se extienden a través de más de una columna.

El código HTML

El siguiente código añade un encabezado de la tabla, a continuación, se separa además dos secciones de datos:

<Cols tabla = "4">
<Tr> <th colspan = 4> Esta es la tabla de cabecera </ th> </ tr>
<Tr> <td colspan = 2> Las primeras dos celdas </ td> <td colspan = 2> Último dos celdas </ td> </ tr>
<Tr> <td> Celda 1 </ td> <td> Cell 2 </ td> <td> Cell 3 </ td> <td> Cell 4 </ td> </ tr>
</ Table>

El "<table>" etiqueta comienza la tabla. La directiva "cols" define el número de columnas que estarán en la mesa. La etiqueta "<tr>" define cada fila. El "<th>" etiqueta define la cabecera de la tabla. La etiqueta "<td>" define cada celda de la tabla.

La primera fila contiene el encabezado de la tabla que se extiende por cuatro células. Esto se define con la directiva "colspan = 4". Es importante señalar que cada celda y fila se terminaron con la etiqueta apropiada (</ th> o </ tr>). Sin los códigos de finalización, la tabla no se mostrará correctamente. La segunda fila de la tabla contiene dos células, ambos de los cuales se extienden dos columnas. La tercera fila se compone de células, cada una columna de longitud. Por último, se cierra la tabla con la etiqueta "</ table>".

consideraciones

Las tablas no deben utilizarse como el único medio para diseñar elementos de una página web. Uso de tablas como un método de diseño hace que los usuarios desplazarse horizontalmente cuando el usuario aumenta la visualización de la página web (zoom in), sobre todo cuando la tabla contiene imágenes. Para combatir este problema, las hojas de estilo en cascada (CSS) se deben utilizar para controlar la disposición. Sin embargo, cuando se utiliza para mostrar el texto, tablas crean atractivas, páginas web de aspecto profesional.