Web.CSS.Tablas.
Ahora toca trabajar con tablas desde CSS.
Bordes.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Bordes en la tablas</h2>
<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Ismael</td>
<td>Pérez</td>
</tr>
<tr>
<td>Lourdes</td>
<td>Núñez</td>
</tr>
</table>
</body>
</html>
En este ejemplo se crea una tabla de 2 filas por 2 columnas y se le da un estilo de un borde de 1 pixel de grosor, con borde sólido y de color negro. Algo simple ¿Verdad?.
Si se observa bien, al darle borde a la fila y a la columna, nos muestra un doble borde muy feo. Este detalle se puede solucionar con la propiedad border-collapse:
<style>
table, th, td {
border-callapse: collapse
border: 1px solid black;
}
</style>
El efecto que produce esta instrucción es quitar el doble borde de forma que sólo deja uno.
Ancho y Alto.
Se puede dar un ancho y alto a la estructura de la tabla, ya sea por completo o la parte que se quiera:
table {
width: 100%;
}
th {
height: 50px;
}En este ejemplo se le da a la tabla un ancho del 100% de la página y un alto a los encabezados o títulos de las columnas de 50 píxeles.
Alinear el texto.
En la tablas, como en cualquier elemento HTML, se puede controlar como mostrar el texto y de que forma:
th {
text-align: left;
}En este ejemplo, centra sólo los encabezados o nombres de columnas de la tabla.
Relleno.
Esto se refiere al relleno que, es decir, le espacio que hay entre el borde interior y el contenido:
th, td {
padding: 15px;
text-align: left;
}Se crea un relleno en los encabezados de columna y todas las columnas de 15 píxeles, alineando el texto hacia la izquierda.
Divisores horizontales.
Se pueden también sólo usar parte de un borde en una tabla, es decir, por ejemplo que sólo tenga un borde en la parte de abajo:
th, td {
border-bottom: 1px solid #ddd;
}Que se alumbre la fila cuando pase el ratón.
tr:hover {background-color: #f5f5c8}Añadir un color a los encabezados.
th {
background-color: #4CAC50;
color: white;
}Se añade un color de fondo sólo a la fila de los encabezados y el texto se especifica de color blanco para que sea legible.
Crear una barra de desplazamiento.
¿Y si la tabla es más grande que el ancho de la pantalla?. Evidentemente no se verá correctamente, pero se puede solucionar creando una barra de desplazamiento, de forma que cuando no se vea completo en la página se podrá mover para visualizarlo:
<div style="overflow:auto;">
<table>
...
</table>
</div>
- Lo primero es meter la tabla completa en un bloque <div>.
- Por último se debe crear una barra de desplazamiento de forma que cuando sea más ancho o largo que la página se puede ver correctamente:
<div style="overflow:auto;">
