Week 5_1(es): Agregar Estilos a las Tablas de HTML

Agregar Estilos a las Tablas de HTML

Vamos a agregar estilos a las tablas de HTML!

Descarguen los siguientes archivos y guardenlos en una carpeta de fecha-nombre.
index.html
blog.css
seoul.jpg

Primero, vamos a cambiar el alineamiento de la primera fila a left.

table th {
  text-align: left;
}

Luego, vamos a crear una sombra abajo de la primera fila.

tr {
  box-shadow: 0 5px 5px -5px rgb(192, 192, 192);
}

Para la propiedad de box-shadow, pueden especificar los siguientes.

• h-offset: Obligatorio. El offset horizontal de la sombra. El valor positivo crea una sombra en el lado derecha del box, y el valor negativo la crea en el lado izquierda del box.
• v-offset: Obligatorio. El offset vertical de la sombra. El valor positivo crea una sombra abajo del box, y el valor negativo crea una sombra encima del box.
• blur: Opcional. El radio de blur(para difuminar). El mayor número significa una sombra más difuminada.
• spread: Opcional. El radio de spread(para expandir). El valor positivo aumenta el tamaño de la sombra, y el valor negativo reduce el tamaño de la sombra.
• color: Opcional. El color de la sombra. El valor por defecto es el color del texto. Pueden revisar CSS Color Values para la lista completa de los valores de color.

Luego, vamos a agregar padding a cada celda de la tabla.

table th, table td {
  padding: 10px;
}

Ahora,vamos a poner el color del fondo y vamos a cambiar algunas propiedades de la tabla.

table {
  font-size: 85%;
  background-color: #fff;
  box-shadow: 0 0 5px rgb(192, 192, 192);
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
}

Si quieren cambiar e color de las columnas, pueden utilizar el siguiente código.

tbody tr:nth-child(odd) {
  background-color: #fdcffc;
}

:nth-child(odd) o :nth-child(even) pueden utilizarse para seleccionar los elementos hijos impares o pares de sus elementos padres.
Pueden ponder número en vez de odd o even.
Por ejemplo, p:nth-child(1) va a elegir todos los elementos <p> que es el primer hijo de su elemento padre.

Para borrar las líneas del borde entre celdas, pueden agregar el siguiente código.

table {
  border-spacing: 0;
}

La propiedad border-spacing pone distancia entre bordes de celdas adyacentes.

Pueden agregar sus propios diseños a la tabla con las propiedades que hemos aprendido!