Tablas

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. 

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

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.

ACTIVIDADES:

1. Realiza un resumen en tu cuaderno sobre tablas y las etiquetas para el manejo de ellas, incluyendo la información de esta entrada y la del video.

2. crea una página web con la información sobre las marcas de autos presentada en el ejemplo anterior, no olvides guardar el documento como html.

3. elabora una página web que contenga 6 imágenes , preferiblemente del mismo tamaño, puedes editarlas en paint o photoshop; 3 van en la primera fila y 3 en la segunda, es decir dentro de una tabla de 3 columnas por 2 filas, recuerda que cada celda va construyendo una columna para la tabla.

4. envía el desarrollo de tu trabajo al correo when732@gmail.com hasta el día viernes 1 de Octubre de 2021.

WEBGRAFÍA:

https://www.aulaclic.es/html/t_6_1.htm