Autor Tema: CSS HTML bordes de tablas cómo poner bordes simples en vez de dobles CU01052D (Leído 6600 veces)

Dimitar Stefanov · « **en:** 22 de Enero 2016, 01:05 »

Códigos del ejercicio CU01052D del curso CSS desce cero.

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="estilos91.css"/>
	<title>Portal web</title>
</head>
<body>
	<table>
		<tr>
			<th>Título 1</th>
			<th>Título 2</th>
			<th>Título 3</th>
			<th>Título 4</th>
			<th>Título 5</th>
		</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 facilitado por el tutorial (yo lo puse como "estilos91.css") (al final de dicho código contesto a las preguntas del ejercicio):

Código: [Seleccionar]

table {
	font-family: Helvetica, Arial, Sans-Serif;
	color: #333;
	width: 640px;
	border-collapse: collapse;
}
td, th {
	border: 1px solid orange; 
	height: 30px;
}
th {
	background: #d3d3d3;
	font-weight: bold;
}
td {
	background: #fafafa;
	text-align: center;
}
tr:nth-child(even) td {
	background: #f1f1f1;
}
tr:nth-child(odd) td {
	background: #fefefe;
}
tr td:hover {
	background: #666;
	color: #fff;
}

/* a) Con la propiedad font-family especificamos que se tendrá que aplicar a la tabla una fuente Helvetica o en su defecto Arial de la familia Sans-Serif. La talba tendrá que tener un color #333 y que su anchura total sea de 640px. Mediante la propiedad border-collapse con un valor collapse especificamos que los bordes en toda la talba se colapsen. A continuación establecemos que los bordes de las celdas th y td tengan un borde de grosor de 1px, sólido y que sean transparentes y que tenga una altura (cada celda anteriormente dicha) de 30px. Luego codificamos que las celdas th tengan un fondo de color #d3d3d3 y que su letra sea negrita (mediante la propiedad font-weight con un valor bold). Para las celdas de tipo td (es decir, las normales, no las de título) especificamos que tengan un fondo de color #fafafa y que el texto dentro de las mismas esté centrado. 
Acto seguido damos valor a las filas impares que se muestren de fondo #f1f1f1 y para las pares que se sean de color #fefefe. 
Finalmente especificamos que cuando el ratón esté encima de una celta, la misma cambie de fonod y que el nuevo sea de color #fff.*/
/* b) Para que se consiga el efecto de un borde doble con un grosor de 2px tenemos que cambiar la propiedad: td, th {border: 1px solid transparent} a td, th {border: 2px solid;}, incluir la propiedad: table{border: 2px solid;} e borrar la propiedad: table {border-collapse: collapse;}*/
/* c) Cambiar la propiedad td, th {border: 1px solid transparent;} a td, th {border: 1px solid orange;}*/

Respuestas a las preguntas:

a) Con la propiedad font-family especificamos que se tendrá que aplicar a la tabla una fuente Helvetica o en su defecto Arial de la familia Sans-Serif. La talba tendrá que tener un color #333 y que su anchura total sea de 640px. Mediante la propiedad border-collapse con un valor collapse especificamos que los bordes en toda la talba se colapsen. A continuación establecemos que los bordes de las celdas th y td tengan un borde de grosor de 1px, sólido y que sean transparentes y que tenga una altura (cada celda anteriormente dicha) de 30px. Luego codificamos que las celdas th tengan un fondo de color #d3d3d3 y que su letra sea negrita (mediante la propiedad font-weight con un valor bold). Para las celdas de tipo td (es decir, las normales, no las de título) especificamos que tengan un fondo de color #fafafa y que el texto dentro de las mismas esté centrado.

Acto seguido damos valor a las filas impares que se muestren de fondo #f1f1f1 y para las pares que se sean de color #fefefe.

Finalmente especificamos que cuando el ratón esté encima de una celta, la misma cambie de fonod y que el nuevo sea de color #fff.

b) Para que se consiga el efecto de un borde doble con un grosor de 2px tenemos que cambiar la propiedad: td, th {border: 1px solid transparent} a td, th {border: 2px solid;}, incluir la propiedad: table{border: 2px solid;} e borrar la propiedad: table {border-collapse: collapse;}

c) Cambiar la propiedad td, th {border: 1px solid transparent;} a td, th {border: 1px solid orange;}

Gracias

Ogramar · « **Respuesta #1 en:** 01 de Febrero 2016, 08:33 »

Buenas dimiste

a) Escribes con frecuencia talba en lugar de tabla o celta en lugar de celda o fonod en lugar de fondo aparte de otros detalles

Si no resuelves los ejercicios con detenimiento y prestando atención no te servirán de nada.

Tienes que distinguir el título de la tabla que se establece con las etiquetas <caption> ... </caption> de las celdas de cabecera que se delimitan con <th> ... </th>

b) Correcto

c) En este apartado el ejercicio indica grosor 3 pixeles, por tanto no será td, th {border: 1px solid orange;} sino td, th {border: 3px solid orange;}

Salu2

Dimitar Stefanov · « **Respuesta #2 en:** 02 de Febrero 2016, 19:05 »

Buenas, Ogramar.

Tienes razón. Tendría que ser más cauto y prestando más atención en escribir los ejercicios. Al fin y al cabo es esa la finalidad de las mismos, hacerlos bien y no corriendo y deprisa.

Sobre lo que me comentas del primer apartado del ejerccicio, el código quedaría así:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="estilos91.css"/>
	<title>Portal web</title>
</head>
<body>
	<table>
		<caption>Título</caption>
			<th>Título 1</th>
			<th>Título 2</th>
			<th>Título 3</th>
			<th>Título 4</th>
			<th>Título 5</th>
		
		<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>

Es decir, añadiendo la línea: "<caption>Título</caption>"?

Y sobre el tercer apartado, también tienes razón, he escrito 2 veces lo mismo. Quería escribir: "c) Cambiar la propiedad td, th {border: 1px solid transparent;} a td, th {border: 3px solid orange;}", pero se ve que, otra vez, por mirar rápidamente no me dí cuenta que escribía lo mismo 2 veces.

Gracias, otra vez más, por corregirme otro ejercicio más.

Atentamente,

dimiste.

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

Noticias: