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 style=»border: medium transparent«> | |
<a href=»https://www.britishmuseum.org/» target=»_new«><img src=»british.jpg» alt=»» width=»90» height=»90«/></a> | |
</th> | |
<th style=»border: medium transparent«> | |
<a href=»https://www.tate.org.uk/visit/tate-britain» target=»_new«> | |
<img src=»tate.jpg» alt=»» width=»90» height=»90«/> | |
</a> | |
</th> | |
<th style=»border: medium transparent«> | |
<a href=»https://www.nationalgallery.org.uk/» target=»_new«><img src=»national.jpg» alt=»» width=»90» height=»90«/></a> | |
</th> | |
<th style=»border: medium transparent«> | |
<a href=»http://www.nhm.ac.uk/» target=»_new«><img src=»natural.jpg» alt=»» width=»90» height=»90«/></a> | |
</th> | |
</tr> | |
<tr> | |
<td style=»border: medium transparent«><a href=»https://www.britishmuseum.org/» target=»_new«>Museo Británico</a> | |
</td> | |
<td style=»border: medium transparent«><a href=»https://www.tate.org.uk/visit/tate-britain» target=»_new«>Galería Tate</a> | |
</td> | |
<td style=»border: medium transparent«><a href=»https://www.nationalgallery.org.uk/» target=»_new«>Galería Nacional</a> | |
</td> | |
<td style=»border: medium transparent«><a href=»http://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 id=»tabla«> | |
<table> | |
<tr> | |
<th colspan=»2«>Servicio</th> | |
<th colspan=»4«>Parada</th> | |
<th colspan=»4«>Línea/Ruta</th> | |
</tr> | |
<tr> | |
<td rowspan=»3«>Autobús</td> | |
<td colspan=»4«>Kensington Museums</td> | |
<td colspan=»3«>360</td> | |
</tr> | |
<tr> | |
<td colspan=»4«; rowspan=»2«>Victoria, Albert Museum</td> | |
<td style=»color:DarkBlue«><strong>cada 5′</strong></td> | |
<td style=»color:DarkBlue«><strong>cada 10′</strong></td> | |
</tr> | |
<tr> | |
<td>14,74</td> | |
<td>414,C1</td> | |
</tr> | |
<tr> | |
<td rowspan=»3«>Metro</td> | |
<td colspan=»4«; rowspan=»3«>South Kensington</td> | |
<td colspan=»2«>Circle</td> | |
</tr> | |
<tr> | |
<td colspan=»2«>District</td> | |
</tr> | |
<tr> | |
<td colspan=»2«>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:
Definitivamente, tengo que profundizar en la edición CSS.
3 Responses to Las tablas en CSS