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: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):
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
-
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
-
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í:
<!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.