Autor Tema: CSS estilos de tablas bordes simples o bordes dobles inferior Ejercicio CU01051D (Leído 2174 veces)

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"

Código: [Seleccionar]

#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

Ogramar · « **Respuesta #1 en:** 31 de Enero 2016, 11:04 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: