Unidad 6. Tablas (I)



Las tablas nos permiten organizar la información en filas y columnas. Cada fila se divide en celdas. La información se introduce en las celdas. Una columna está formada por las celdas agrupadas verticalmente, en HTML no existe una etiqueta para definir columnas. Las tablas se definen en base a las filas y a las celdas, como veremos a continuación.

Inicialmente las tablas se crearon para introducir información en forma tabular como, por ejemplo, las ventas de coches por años y marcas. En cada celda se colocan las ventas de un año y una marca, en las filas tenemos los años y en las columnas las diferentes marcas.

Sin embargo, los diseñadores de páginas web empezaron a utilizarlas para definir la estructura de la página ya que era la forma más fácil de distribuir el espacio con las etiquetas disponibles en los comienzos de la web. Posteriormente apareció la propiedad float en CSS y empezó a usarse para colocar los contenedores div en la parte deseada de la página.

Se recomendó no utilizar las tablas para el diseño de las páginas con argumentos como que complicaban el diseño y el mantenimiento, y que además no habían sido creadas para ese fin. Durante años hubo una lucha entre los diseñadores prácticos que utilizaban las tablas y los puristas que las rechazaban. En realidad, en muchos casos, el diseño con elementos flotantes es más complicado que con tablas y, finalmente, se ha vuelto al diseño basado en tablas y la propiedad float como base del diseño pasará a la historia como un mal sueño. Aunque ahora se utilizan unas nuevas estructuras más potentes y flexibles como Grid layout y Flexbox, que veremos más adelante en la unidad 13.

En este vídeo puedes ver una introducción a las tablas:Videotutorial

En este vídeo puedes ver cuestiones avanzadas sobre las tablas:Videotutorial

6.1. Etiquetas de tabla <table> <tr> y <td>

La etiqueta <table> y su correspondiente etiqueta de cierre </table> definen la tabla. Entre ambas etiquetas se escriben las etiquetas de fila <tr> y </tr> y dentro de las filas las etiquetas de celda <td> y </td>, entre estas se escribe el contenido de la celda que puede ser cualquier etiqueta de HTML o directamente un texto. Por lo tanto la tabla más sencilla con una sola celda sería esta:

<table>
	<tr>
		<td>Celda 1.1.</td>
	</tr>
</table>

Que produce este resultado:

Celda 1.1.

Como decíamos antes, no existe una etiqueta para definir las columnas, en su lugar, el número de celdas define el número de columnas. Todas las filas deben tener el mismo número de celdas, aunque ya veremos que es posible unir celdas. Por ejemplo, una tabla con tres filas y cuatro columnas se escribe así:

<table>
	<tr>
		<td>Marcas</td>
		<td>Seat</td>
		<td>Ford</td>
		<td>BMW</td>
	</tr>
	<tr>
		<td>2016</td>
		<td>23900</td>
		<td>21500</td>
		<td>11500</td>
	</tr>
	<tr>
		<td>2017</td>
		<td>24600</td>
		<td>23500</td>
		<td>13400</td>
	</tr>
</table>

Marcas Seat Ford BMW
2016 23900 21500 11500
2017 24600 23500 13400

Dentro de una celda se pueden incluir la mayoría de las etiquetas de HTML, texto, imágenes, listas, etc. Incluso de pueden anidar tablas, para ello basta incluir otra tabla dentro de una celda.


Enero-2019 (V 2.0)
Pág. 6.1
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.