Menú de lecciones
CSS - intermediate - Lección nº 7
Formateo de tablas
¿De qué trata esta lección?
En esta lección aprenderemos cómo dar formato a las tablas. Para hacerlo, aprenderemos una nueva etiqueta HTML, más propiedades CSS y un nuevo selector. Los bordes de las tablas funcionan principalmente como los párrafos, pero necesitamos fusionar/contraer (collapse) varios bordes. También introduciremos contornos (marcos de bordes) y alineación vertical, que podemos usarlos en otros contextos, no sólo para tablas. Aprenderemos a formatear filas y columnas en una tabla por separado. 

Nueva etiqueta HTML en esta lección:
- Podemos usar esta etiqueta para dar formato a las columnas de una tabla de manera diferente. Esta etiqueta no tiene cierre.
- usamos esta etiqueta para agrupar más etiquetas .
 
 
Nuevas palabras clave CSS en esta lección:
 
outline
– esta propiedad se puede utilizar para dibujar otra línea fuera del borde. Los contornos se pueden utilizar como bordes. Podemos usar el esquema de propiedades CSS para definir el ancho, el color y el tipo de línea.
 
Podemos usar por separado el outline-style (para el tipo de línea), el outline-color (para el color de la línea), outline-width (el ancho de la línea de contorno), el outline-offset (la distancia entre el borde y el contorno).
 
 
border-collapse
– Esta propiedad se puede utilizar para fundir los bordes cercanos en uno solo.
 
 
vertical-align
– esta propiedad se utiliza para alinear un contenido en el centro de la fila en dirección vertical. Valores posibles: middle, top, bottom.
 
 
Nuevo selector de CSS en esta lección:
 
 
:nth-of-type
(…) – Este selector se puede agregar a las etiquetas HTML, de esta manera podemos dar formato a partes  de la etiqueta. Podemos agregar un número, fórmulas o las palabras pares o impares. Por ejemplo, usando la palabra even (par), podemos agregar configuraciones CSS a la etiqueta.
 
 
Guía:
 
●      Los tipos de contornos corresponden a los tipos de bordes. Algunos valores posibles:
solid (sólido), dotted (punteado), dashed (discontinuo), double (doble).
 
 
●      El ancho del contorno no cuenta cuando medimos la distancia entre dos objetos.
 
 
●      El contenido de las tablas HTML se define básicamente en filas. Su formato se hace generalmente basado en celdas o filas. Podemos usar la etiqueta , si queremos aplicar la configuración a las columnas. Al formatear columnas solo podemos usar algunas propiedades:  border (borde), background-color (color de fondo), width (ancho) y visibility (visibilidad). Si usamos los ajustes de fila y columna, debemos tener cuidado.
 
 
●      El selector
:nth-of-type
también se puede utilizar para otras etiquetas HTML, no solo para tablas. Por ejemplo, podemos aplicar este selector a cada párrafo o a cada elemento de la lista en una lista, de manera similar a las tablas. Además de
even (par)
o
odd (impar)
, podemos usar números también. Por ejemplo, al utilizar tr: nth-of-type (2), el navegador aplica la configuración a filas pares.
 
 
Ejemplo de contornos (outline):


En la imagen de arriba, podemos ver el contorno azul claro, punteado, de dos píxeles de ancho agregado al borde azul. Al agregar este esquema, no movemos el borde u otros objetos adyacentes, el agregado el borde mueve los otros objetos.
 
 
Aplicamos el borde tanto a las celdas como a la tabla en el archivo CSS, por esta razón tenemos un borde doble: uno para las celdas y otro alrededor de la tabla.


Ejemplo de bordes colapsados:


En la imagen de arriba, vemos la tabla anterior con los bordes fundidos en uno usando la propiedad border-collapse.

El contenido de las celdas está alineado vertical y horizontalmente en el centro.

El ancho de la tabla se establece al 50%, lo que significa que la tabla ocupa la mitad del ancho de las ventanas del navegador.

Ejemplo de formato de filas pares e impares:


En el ejemplo anterior, aplicamos un fondo azul claro a las filas pares y un fondo gris a las filas impares.

Ejemplo de formateo de columnas:
   

Ejercicios
1. Nuestra página web tiene tres tablas (toplangs.html, aspects.html, tips.html). Aplica a cada tabla, encabezado de tabla y datos de tabla un borde sólido, coloreado, ancho de 1 píxel y contraído. Aplica una distancia de 10 píxeles entre el contenido de las celdas y el borde. Además, aplica una distancia de 20 píxeles de la tabla y los otros elementos que la rodean..
Ver el resultado
2. Consigue el mismo formato de fila de tabla en toplangs.html. Para esto, debemos darle a esa tabla un identificador, eliminar las clases antiguas llamadas row (fila) y usar el selector CSS recién aprendido.
Ver el resultado
3. Aplica localmente (dentro de las etiquetas HTML) las siguientes configuraciones a la tabla en el archivo tips.html: la primera columna debe tener un color de fondo, la segunda columna debe tener 6 centímetros de ancho.
Ver el resultado
4. A la misma tabla del archivo toplangs.html, establece un ancho de 2 píxeles, contorno discontinuo y que tenga el mismo color que su borde.
Ver el resultado
Cuestionario
1. ¿Qué propiedad CSS no se puede aplicar a las columnas de la tabla (usando <col> tags)?
2. ¿De qué tipos pueden ser los outline (contornos)?
3. ¿Cómo puede la siguiente configuración de CSS afectar a la tabla?
CSS:
td:nth-of-type(2){
background-color:lightgray;
}
HTML:
<table>
<tr> <th>Nr.</th> <th>Browser</th> <th>Editor</th> </tr>
<tr> <th>1</th> <td>Mozilla Firefox</td> <td>Notepad++</td> </tr>
<tr> <th>2</th> <td>Google Chrome</td> <td>Atom</td> </tr>
</table>
4. Como efecto después de las declaraciones de CSS, ¿cuál será la distancia entre los dos párrafos?
p {
border: 2px solid red;
outline: 5px solid;
margin: 10px;
}
Exclamation mark Este sitio está utilizando cookies. Al continuar navegando por el sitio, ¡acepta su uso! Acepto