Ir al contenido principal

Tabla que cambia de color al señalar con el cursor

Tabla que cambia de color al señalar con el cursor


Se requiere obtener lo siguiente:



En la imagen anterior se muestra lo que debe ocurrir al situar el cursor del ratón sobre una de las filas de datos de la tabla: el color de fondo de las celdas debe cambiar a amarillo (#FFFF66).
Nota: busca en Internet las imágenes necesarias para representar los símbolos de las diferentes monedas. Las imágenes las debes colocar como imágenes decorativas desde CSS.
Código en html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de selectores avanzados</title>
<style>
table {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

table, tr, th, td {
  border: 1px solid #333;
  line-height: 2em;
}

th {
  background-color: #F5F5F5;
  padding: 0 .5em;
}

td {
  padding: 0 .3em;
}

th.euro {
  background: #E6F3FF url(imagenes/euro.png) no-repeat left center;
  padding: 0 .3em 0 1.2em;
}

th.dolar {
  background: #E6F3FF url(imagenes/dolar.png) no-repeat left center;
  padding: 0 .3em 0 1.2em;
}

th.libra {
  background: #E6F3FF url(imagenes/libra.png) no-repeat left center;
  padding: 0 .3em 0 1.2em;
}

th.yen {
  background: #E6F3FF url(imagenes/yen.png) no-repeat left center;
  padding: 0 .3em 0 1.2em;
}

tr:nth-child(n+1) td {
  text-align: right;
}

tr:nth-child(2n) {
  background-color: #FFFFCC;
}

tr:hover {
  background: #FFFF66;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Cambio</th>
    <th>Compra</th>
    <th>Venta</th>
    <th>Máximo</th>
    <th>Mínimo</th>
  </tr>
  <tr>
    <th class="euro">Euro/Dolar</th>
    <td>1.25</td>
    <td>1.25</td>
    <td>1.25</td>
    <td>1.24</td>
  </tr>
  <tr>
    <th class="dolar">Dolar/Yen</th>
    <td>119.01</td>
    <td>119.05</td>
    <td>119.82</td>
    <td>119.82</td>
  </tr>
  <tr>
    <th class="libra">Libra/Dolar</th>
    <td>1.86</td>
    <td>1.86</td>
    <td>1.86</td>
    <td>1.85</td>
  </tr>
  <tr>
    <th class="yen">Yen/Euro</th>
    <td>0.67</td>
    <td>0.67</td>
    <td>0.66</td>
    <td>0.67</td>
  </tr>
</table>
</body>
</html>

Comentarios

  1. gacetafrontal.com/biografia-de-carlos-augusto-salaverry/
    vemos que tiene una extensa hoja de vida en la que podemos ver que hay incontables aspectos que llegan a retomar lo que sería su interés por la vida militar, la política, la escritura y la diplomacia.

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Formulario usando colores

Formulario usando colores Se desea obtener la siguiente imagen: Código  en html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Registro - iDESWEB</title> <style> body {   font-family: Arial, Helvetica, sans-serif;   width: 90%;   margin: 0 auto; } header {   text-align: center; } h1, h2 {   font-family: Georgia, serif; } h1 {   font-size: 3em; } fieldset {   margin: 1em auto; } legend {   font-size: 1.2em;   font-weight: bold;   text-transform: uppercase; } label {   font-weight: bold;   display: block; } input:focus, select:focus {   background-color: yellow; } input:hover, select:hover {   background-color: red; } #boton-crear {   font-size: 2em;   padding: 0.5em; } .inline {   display: inline; } .centrado {   text-align: center; } </style> </head...

Listas usando números romanos, círculos, cuadros y letras griegas

Listas usando números romanos, círculos, cuadros y letras griegas A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para lograr una página web que tenga el mismo aspecto que la siguiente imagen: Código en html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejemplo de listas</title> <style> .lista-sin {   list-style-type: none; } .lista-circulos {   list-style-type: circle;  <!--jcon esta parte se modifica que aparezca la lista-circulos con círculos y así con los demas--> } .lista-cuadrados {    list-style-type: square; } .lista-romanos {   list-style-type: lower-roman; } .lista-griegos {   list-style-type: lower-greek; } </style> </head> <body> <p>Lista sin elemento gráfico:</p> <ul class="lista-sin"> <li>...

Curriculum Vitae

Ejercicio: A partir de la página web que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen: Código  htm l: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Curriculum Vitae de Bruce Wayne</title> <style> body {   font-family: Arial,Verdana,sans-serif; } h1 {  <!--Este se usa para el como se va a ver todos los lineas con h1-->   font-family: Georgia,Times,serif;   font-size: 32px;   font-variant: small-caps; } h2 { <!--Este se usa para el como se va a ver todos los lineas con h2-->   font-family: Georgia,Times,serif;   font-size: 24px;   font-style: italic;   font-variant: small-caps; } li  {   font-weight: bold; } strong {   font-weight: normal; } </style> </head> <body> <h1>Curriculum Vitae de Bruce Wayne</h1> <h2>Datos personales...