Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Dimitar Stefanov en 22 de Enero 2016, 01:01
-
Códigos del ejercicio CU01051D del curso CSS desde cero.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos89.css"/>
<title>Portal web</title>
</head>
<body>
<table id="table1">
<tr>
<caption>Título tabla 1</caption>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
<br/><br/><br/>
<table id="table2">
<tr>
<caption>Título tabla 2</caption>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
<br/><br/><br/>
<table id="table3">
<tr>
<caption>Título tabla 3</caption>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
</body>
</html>
Código CSS: "estilos89.css"
#table1 {
border: solid 8px grey;
width: 600px;
border-collapse: collapse;
}
#table1 td {
width: 20%;
border: solid 8px grey;
}
#table1 caption {
border: solid 8px grey;
border-bottom: none;
}
#table2 {
width: 100%;
border: solid brown 2px;
}
#table2 td {
width: 20%;
border: solid brown 2px;
}
#table2 caption {
border: solid brown 2px;
}
#table3 {
width: 500px;
}
#table3 td {
width: 100px;
border-bottom: solid 6px blue;
}
#table3 caption {
border-bottom: solid blue 6px;
}
Gracias
-
Buenas dimiste los comentarios son los siguientes
La etiqueta caption debe ir dentro de table pero no dentro de un tr sino antes, por ejemplo
<table id="table1">
<caption>Título talba 1</caption>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
Debes intentar evitar repetir código, lee lo que se explica en https://www.aprenderaprogramar.com/foros/index.php?topic=3805.0
El ejercicio pedía que la primera fila de cada tabla fuera una fila de encabezado. Esto se hace con la etiqueta thead, fíjate como se hace viendo el ejercicio resuelto en https://www.aprenderaprogramar.com/foros/index.php?topic=3805.0
De resto todo bien
Salu2