Unidad 6. Ejercicio: Formato de Tablas

En este ejercicio practicaremos con tablas. Para realizar este ejercicio debes haber realizado el ejercicio anterior de esta unidad, tendrás el archivo excel2.html o también puedes copiar el código que se muestra a continuación.

Ejercicio 2: Formato de Tablas

Desde el editor Brackets abre el archivo excel2.html. Debes tener este código:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Curso de Excel 2016</title>
</head>
<body>
  <ul>
  <li><a href="excel1.html">Atrás</a></li>
  <li><a href="index.html">Índice</a></li>
  <li><a href="excel3.html">Adelante</a></li>
  </ul>
  <h1>Unidad 2. Empezando a trabajar con Excel</h1>
  <p>Las teclas activas para poder desplazarse a través de la hoja son:</p>
  <table>
    <tr>
      <th>MOVIMIENTO</th>
      <th>TECLADO</th>
    </tr>
    <tr>
      <td> Celda Abajo </td>
      <td><kbd>FLECHA ABAJO </kbd></td>
    </tr>
    <tr>
      <td> Celda Arriba </td>
      <td><kbd>FLECHA ARRIBA</kbd></td>
    </tr>
    <tr>
      <td> Celda Derecha </td>
      <td><kbd>FLECHA DERECHA </kbd></td>
    </tr>
    <tr>
      <td> Celda Izquierda </td>
      <td><kbd>FLECHA IZQUIERDA </kbd></td>
    </tr>
    <tr>
      <td> Pantalla Abajo </td>
      <td><kbd>AVPAG</kbd></td>
    </tr>
  </table>
  <hr>
  <p><a href="https://www.aulaclic.es/index.htm" target="_blank"> &copy; aulaClic S.L.</a></p>
  </body>
  </html>

Y se debe ver así;

Ej. paso a paso 1 de la unidad 6

Vamos a darle un borde a la tabla utilizando la hoja de estilo excel2.css, tenemos que crear un nuevo archivo pulsando en Archivo, Nuevo y escribir este código: table {border-style:solid}, pulsamos Archivo, Guardar y le damos el nombre excel2.css dentro de la carpeta ejercicios/curso-excel/css. Añadimos el enlace a esta hoja de estilo en el archivo excel2.htlm: <link rel="stylesheet" type="text/css" href="css/excel2.css" />

El resultado será este:
Ahora para añadir un borde a las celdas añadimos a la hoja de estilo el selector td: td {border-style:solid}
Para evitar el doble borde en las celdas añadimos al selector table la propiedad border-collapse:collapse: table {border-collapse: collapse}
A continuación para separar el contenido de la celda del borde, al selector td le damos un padding: 5px, y para dar color de fondo beige a las celdas background-color: beige, es decir, con esta hoja de estilo:
```
table { border-style:solid;
border-collapse: collapse;
}
td { border-style:solid;
padding: 5px;
background-color: beige}
```
obtendremos este resultado:
Para acabar vamos a dar formato a la fila de cabecera th, color bisque, padding 5 px y borde solid: th { border-style:solid; padding: 5px; background-color: bisque}
Obtendremos este resultado:

También puedes ver el resultado en este enlace: excel2_2.html
Pulsa en el menú Archivo y elige Guardar con el mismo nombre el archivo html excel2.html y la hoja de estilo excel2.css. Visualiza la página web desde el editor Brackets con el botón .
Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

Enero-2019 (V 2.0)

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies