Anexo: ejercicios sobre tablas

Las tablas HTML muestran cierta complejidad cuando se anidan. En los ejercicios siguientes se muestran algunas tablas junto con su resolución en HTML. Los ejercicios no se muestran con ningún orden de dificultad.

Tabla 1

Generar la tabla siguiente

../../_images/foto_01.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 2

Generar la tabla siguiente

../../_images/foto_02.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 3

Generar la tabla siguiente

../../_images/foto_03.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 4

Generar la tabla siguiente

../../_images/foto_04.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
		</tr>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 5

Generar la tabla siguiente

../../_images/foto_05.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 6

Generar la tabla siguiente

../../_images/foto_06.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 7

Generar la tabla siguiente

../../_images/foto_07.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 8

Generar la tabla siguiente

../../_images/foto_08.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 9

Generar la tabla siguiente

../../_images/foto_09.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 10

Generar la tabla siguiente

../../_images/foto_10.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 11

Generar la tabla siguiente

../../_images/foto_11.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 12

Generar la tabla siguiente

../../_images/foto_12.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 13

Generar la tabla siguiente

../../_images/foto_13.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 14

Generar la tabla siguiente

../../_images/foto_14.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 15

Generar la tabla siguiente

../../_images/foto_15.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 16

Generar la tabla siguiente

../../_images/foto_16.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 17

Generar la tabla siguiente

../../_images/foto_17.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td>
			<table border='1'>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
				<tr>
					<td> Celda </td>
					<td> Celda </td>
					<td> Celda </td>
				</tr>
			</table>
			</td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 18

Generar la tabla siguiente

../../_images/foto_18.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>
        

Tabla 19

Generar la tabla siguiente

../../_images/foto_19.png

Solución:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ejercicio</title>
</head>
<body>
	<table border='1'>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
		<tr>
			<td> Celda </td>
			<td> Celda </td>
		</tr>
	</table>
</body>
</html>