Objetivos
- Enlazar una hoja de estilos CSS a una página Web
- Utilizar algunas reglas CSS: centrar partes del contenido incluir diferentes tipos de TABLAS
Ejercicio
- Crea dos archivos: uno HTML y otro CSS con el editor de código Subline Text
- Utiliza las reglas CSS apropiadas para:
- Centrar la página Web en todos los navegadores
- Poner un color de fondo a tu página
- Colocar las tablas como en el ejemplo
- Crea una carpeta con "estructura básica web" y nómbrala como p0_t10_web6.
- Dentro de ella incluye los tres archivos (index.html, avanzada.html, estilos.css)
- Comprime toda la carpeta con 7zip y el mismo nombre
- Guárdala en tu pendrive y además en Drive (más tarde la tendrás que entregar para su corrección)
Código HTML, tabla simple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/i2016/css/estilos.css">
<title>Tablas SIMPLES</title>
</head>
<body>
<div id="main">
<h1 class="centro">Tablas SIMPLES en HTML</h1>
<table>
<!-- título de la tabla -->
<caption>Título de la tabla</caption>
<!-- fila de cabecera con etiqueta <th>...</th> -->
<tr>
<th></th>
<th>Columna A</th>
<th>Columna B</th>
<th>Columna C</th>
</tr>
<!-- resto de filas normales con <tr>...</tr> -->
<tr>
<!-- el primer <th> es para la 1ª columna -->
<th>Fila 1</th>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<th>Fila 2</th>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<th>Fila 3</th>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<th>Fila 4</th>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
<!-- Con colspan="n" o rowspan="n" unimos columnas o filas -->
<tr>
<td colspan="3">Tres columnas agrupadas</td>
<td>000</td>
</tr>
</table>
</div>
</body>
</html>
Código CSS, tabla simple
html {
font: 16px verdana, sans-serif;
min-height: 100vh;
}
body { background: steelblue; }
#main {
max-width: 800px;
width: 94%;
margin: 2em auto;
padding: 2%;
background: rgba(0,0,0,0.1);
}
.centro { text-align: center; }
/* ------------------- tablas simples ----------------- */
td {
background: rgba(255,255,255,0.1);
padding: 1em;
/*--- Con text-align centramos dentro de celda*/
text-align: center;
}
table {
width: 100%;
background: rgba(255,255,255,0.1);
padding: 0.5em;
/*--- Con margin centramos la tabla*/
margin: 0 auto;
/*--- Fija espacio entre celdas (con 0 las pone unidas)*/
/*border-spacing: 0;*/
/*--- Fija el ancho/alto de celdas (con width y height) */
/*table-layout: fixed;*/
/*--- Fija borde separado o no (default -> separate)*/
/*border-collapse: collapse;*/
}
/* Con caption-side cabiamos de sitio el título (top por defecto) */
caption {
caption-side: bottom;
margin: 1em 0 0 0;
text-align: right;
font: italic 1.2em serif;
}
/*
Con border ponemos borde a filas (tr), celdas (td) o tabla (table),
según el selector donde coloquemos la propiedad
*/
Código HTML, tabla avanzada
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/estilos1.css">
<title>Horario</title>
</head>
<body>
<div id="main">
<h1 class="centro">Tablas AVANZADAS</h1>
<table>
<caption>Horario: 1º BACHILLERATO</caption>
<tr>
<th class="centro">Hora</th>
<th>Lunes</th>
<th>Martes</th>
<th>Miércoles</th>
<th>Jueves</th>
<th>Viernes</th>
</tr>
<tr>
<th>8:30 a 9:20</th>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<th>9:25 a 10:15</th>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<th>10:20 a 11:10</th>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<th>11:10 a 11:40</th>
<td colspan="5">R E C R E O</td>
</tr>
<tr>
<th>11:45 a 12:35</th>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<th>12:40 a 13:30</th>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<th>13:35 a 14:25</th>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
</table>
</div>
</body>
</html>
Código CSS, tabla avanzada
/* ==================================
HOJA DE ESTILOS
================================== */
/* ---------- Estilos generales para la página ---------- */
html {
font: 16px verdana, sans-serif;
min-height: 100vh;
}
body { background: steelblue; }
#main {
max-width: 800px;
width: 94%;
margin: 2em auto;
background: rgba(0,0,0,0.1);
padding: 2%;
}
.centro { text-align: center; }
img {
max-width: 15%;
height: auto;
border-radius: 50%;
box-shadow: 0 0 2px 1px rgba(0,0,0,0.3);
}
/* ---------------- Tablas Avanzadas -------------------- */
/* selecciona tabla y aplica estilos */
table {
width: 100%;
margin: 2em auto;
border-spacing: 0.1em; /* separa/junta celdas */
table-layout: fixed; /* fija ancho/alto de celdas */
}
/* selecciona celdas y aplica estilos */
td {
background: rgba(255,255,255,0.1);
padding: 0.5em;
text-align: center;
}
/* selecciona columna 1 y aplica estilos */
th:nth-child(1) {
background: rgba(0,0,255,0.3);
text-align: center;
width: 150px;
color: #fff;
}
/* raya filas impares */
tr:nth-child(2n+1) {
background: rgba(255,255,255,0.1);
}
/* colorea 1ª fila (cabecera de columnas) */
tr:nth-child(1) {
background: rgba(0,0,255,0.3);
color: #fff;
}
/* resalta fila al pasar el ratón, con retraso de medio segundo */
tr:hover {
background: rgba(255,255,255,0.5);
box-shadow: 0 0 8px 1px rgba(0,0,0,0.3);
}
tr { transition: all 0.5s; }
/* selecciona título de tabla y aplica estilos */
caption {
margin: 0.5em 0;
padding: 0.5em 0;
border-radius: 10px;
background: rgba(255,255,0,0.3);
}
