Hola a todos, hoy os dejo una serie de ejercicios de Java para practicar todo aquello que hemos explicado en anteriores posts, haciendo hincapié en las tablas en HTML.
Todos los ejercicios que proponemos están resueltos en este mismo post, intenta hacerlo por ti mismo y si te quedas atascado puedes mirar la solución. Recuerda, que no tiene por que estar igual tu solución con la del post, el objetivo es que aprendas no que me copies la solución.
Aquí te dejo un post sobre las tablas en HTML:
Si tienes alguna duda, recuerda que puedes consultarnos escribiendo un comentario en este post o enviándonos un e-mail a administrador@discoduroderoer.es
1) Realiza un documento html parecido a la siguiente imagen:
| Spoiler Inside |
SelectShow> |
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 2 Tablas</title>
</head>
<body>
<table border=1>
<tr>
<td>
Mes
</td>
<td>
Visitas
</td>
<td>
Clicks
</td>
</tr>
<tr>
<td>
Enero
</td>
<td>
500
</td>
<td>
25
</td>
</tr>
<tr>
<td>
Febrero
</td>
<td>
600
</td>
<td>
20
</td>
</tr>
<tr>
<td>
Marzo
</td>
<td>
1000
</td>
<td>
50
</td>
</tr>
</table>
</body>
</html>
|
2) Modifica el ejercicio anterior para que se muestre asi. Utiliza thead y tbody:
| Spoiler Inside |
SelectShow> |
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 2 Tablas</title>
</head>
<body>
<table border=1>
<caption>Visitas Web</caption>
<thead>
<tr>
<td>
Mes
</td>
<td>
Visitas
</td>
<td>
Clicks
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Enero
</td>
<td>
500
</td>
<td>
25
</td>
</tr>
<tr>
<td>
Febrero
</td>
<td>
600
</td>
<td>
20
</td>
</tr>
<tr>
<td>
Marzo
</td>
<td>
1000
</td>
<td>
50
</td>
</tr>
</tbody>
</table>
</body>
</html>
|
3) Crea una tabla con el siguiente aspecto:
| Spoiler Inside |
SelectShow> |
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 3 Tablas</title>
</head>
<body>
<table border="1">
<caption>Medallas olimpicas</caption>
<tr>
<th>
Paises
</th>
<th>
Medallas
</th>
</tr>
<tr>
<td>
USA
</td>
<td>
13
</td>
</tr>
<tr>
<td>
China
</td>
<td>
25
</td>
</tr>
<tr>
<td>
España
</td>
<td>
3
</td>
</tr>
<tr>
<td>
Francia
</td>
<td>
6
</td>
</tr>
</table>
</body>
</html>
|
4) Realiza una tabla como se muestra en la siguiente tabla. Usa las fusiones de columnas y filas.
| Spoiler Inside |
SelectShow> |
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 4 Tablas</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">
A
</td>
<td>
B
</td>
<td>
C
</td>
</tr>
<tr>
<td rowspan="3">
D
</td>
<td colspan="2">
E
</td>
<td>
F
</td>
</tr>
<tr>
<td>
G
</td>
<td colspan="2">
H
</td>
</tr>
<tr>
<td>
I
</td>
<td>
J
</td>
<td>
K
</td>
</tr>
</table>
</body>
</html>
|
5) Realiza una tabla como se muestra en la siguiente imagen.
| Spoiler Inside |
SelectShow> |
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 5 Tablas</title>
</head>
<body>
<table border="1px">
<tr>
<td>
mes
</td>
<td>
enero
</td>
<td>
febrero
</td>
<td>
marzo
</td>
<td>
abril
</td>
<td>
mayo
</td>
<td>
junio
</td>
</tr>
<tr>
<td>
Pib
</td>
<td>
0.2
</td>
<td>
0.4
</td>
<td>
0.2
</td>
<td>
0.3
</td>
<td>
0.1
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
pnb
</td>
<td>
1.3
</td>
<td>
1.2
</td>
<td>
1.1
</td>
<td>
1.9
</td>
<td>
1.7
</td>
<td>
1.6
</td>
</tr>
</table>
</body>
</html>
|
Espero que os sea de ayuda. Si tenéis dudas preguntad. Estamos para ayudarte.
Me encantaría que pusieras a disposición de tus lectores un manual de HTML5. HTML lo di en la universidad hace unos años y me gustaría aumentar mis conocimientos de diseño web con esta tecnología reciente.
Un saludo ;).
traffic-club
Mi Etéreo Mausoleo
Excelente publicación.
Excelentes ejercicios como para recordar filas y columnas.
Muchas Gracias.
Sigan poniendo mas ejercicios