browser icon
You are using an insecure version of your web browser. Please update your browser!
Using an outdated browser makes your computer unsafe. For a safer, faster, more enjoyable user experience, please update your browser today or try a newer browser.

Las tablas en CSS

Posted by on 3 mayo, 2019

En un ejercicio para la asignatura Informática II realizamos dos tablas que debíamos editar a través de CSS (Cascading Style Sheets).

Para mí fue más complicado que cuando las edité con XHTML, puesto que no veía tan claras las modificaciones usando una edición externa.

La primera tabla consistía en añadir 4 imágenes de bibliotecas y museos y sus respectivos nombres bajo cada una de ellas. Además, cada imagen y su nombre debían enlazar a su página web oficial.

El tamaño del borde me aparece irregular y no he conseguido darle el aspecto del ejercicio que debía imitar.

Aquí está el código XHTML.

<div id= «table«>
  <table>
  <tr>
  <th styleborder: medium transparent«>
  <a hrefhttps://www.britishmuseum.org/» target_new«><img srcbritish.jpg» alt=»» width90» height90«/></a>
  </th>
  <th styleborder: medium transparent«>
  <a hrefhttps://www.tate.org.uk/visit/tate-britain» target_new«>
  <img srctate.jpg» alt=»» width90» height90«/>
  </a>
  </th>
   
  <th styleborder: medium transparent«>
  <a hrefhttps://www.nationalgallery.org.uk/» target_new«><img srcnational.jpg» alt=»» width90» height90«/></a>
  </th>
   
  <th styleborder: medium transparent«>
  <a hrefhttp://www.nhm.ac.uk/» target_new«><img srcnatural.jpg» alt=»» width90» height90«/></a>
  </th>
  </tr>
  <tr>
  <td styleborder: medium transparent«><a hrefhttps://www.britishmuseum.org/» target_new«>Museo Brit&aacute;nico</a>
  </td>
  <td styleborder: medium transparent«><a hrefhttps://www.tate.org.uk/visit/tate-britain» target_new«>Galer&iacute;a Tate</a>
  </td>
  <td styleborder: medium transparent«><a hrefhttps://www.nationalgallery.org.uk/» target_new«>Galer&iacute;a Nacional</a>
  </td>
  <td styleborder: medium transparent«><a hrefhttp://www.nhm.ac.uk/» target_new«>Museo de Historia Natural</a>
  </td>
  </tr>
  </table>
  </div>

La segunda tabla resultó ser más complicada y tampoco ha quedado tan bien como podía ser con la edición XTHML.

Este es su código XHTML.

<div idtabla«>
  <table>
  <tr>
  <th colspan2«>Servicio</th>
  <th colspan4«>Parada</th>
  <th colspan4«>L&iacute;nea/Ruta</th>
  </tr>
  <tr>
  <td rowspan3«>Autob&uacute;s</td>
  <td colspan4«>Kensington Museums</td>
  <td colspan3«>360</td>
  </tr>
  <tr>
  <td colspan4«; rowspan2«>Victoria, Albert Museum</td>
  <td stylecolor:DarkBlue«><strong>cada 5′</strong></td>
  <td stylecolor:DarkBlue«><strong>cada 10′</strong></td>
  </tr>
  <tr>
  <td>14,74</td>
  <td>414,C1</td>
  </tr>
  <tr>
  <td rowspan3«>Metro</td>
  <td colspan4«; rowspan3«>South Kensington</td>
  <td colspan2«>Circle</td>
  </tr>
   
  <tr>
  <td colspan2«>District</td>
  </tr>
  <tr>
  <td colspan2«>Picadilly</td>
  </tr>
  </table>
  </div>

Por otra parte, este es el código CSS que utilicé para editar las tablas.

#table {
background-color: #ffe6e6;
margin: 20px;
padding: 20px;
width: 80px;
}

#tabla {
border: no border;
margin: no-margin;
width: 22%;
text-weight: bold; text: blue;
}

table, th, td {
background-color: #ffe6e6;
}

th {
width: 33%;
text-weight: bold; text: blue;
background-color: #ffe6e6;
margin: no-margin;
text-weight: bold;
color: #0000b3;
}

td {
width: «33%»;
background-color: #ffe6e6;
}

tr {
width: 33%;
}

body {
font-family: Verdana; serif;
text-align: left;
}

Y aquí está el resultado final:

Tabla.

 

Definitivamente, tengo que profundizar en la edición CSS.

3 Responses to Las tablas en CSS

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


¡IMPORTANTE! Responde a la pregunta: ¿Cuál es el valor de 8 12 ?