Tablas CSS
Varias propiedades CSS se usan ampliamente para dar estilo a las tablas HTML. Cada una se describe a continuación.
En este capítulo, veremos cómo dar estilo a las tablas, incluido el cambio de los colores de los encabezados y las filas.
Propiedades de estilo de tablas
Estas son las propiedades CSS que se usan para dar estilo a una tabla. Las propiedades background-color y color establecen los colores de fondo y del texto, respectivamente. La propiedad border-collapse colapsa los bordes de la tabla. La propiedad text-align establece la alineación horizontal del texto. Además, puedes usar height, width y padding para ajustes de diseño.
Ejemplo de dar estilo a una tabla:
Ejemplo de estilo de tablas HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th {
text-align: center;
height: 50px;
}
tbody tr:nth-child(odd) {
background: #ffffff;
}
tbody tr:nth-child(even) {
background: #f4f4f4;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Resultado
Vamos a explicar el código anterior.
Como puedes ver, nuestra tabla tiene dos secciones principales: la sección <thead> para los encabezados y la sección <tbody> para las filas de datos. La tabla usa bordes negros, aplicados mediante la propiedad border. Puedes usar cualquier color y estilo de borde que prefieras.
Color de la tabla
Como ves, la parte <thead> de nuestra tabla es azul y dondequiera que escribimos texto es blanco. Para el fondo azul, usamos la propiedad background-color, y para el texto blanco, usamos la propiedad color. Los demás textos están escritos en negro.
Colapsar bordes
La propiedad border-collapse especifica si los bordes de una tabla se colapsan en un solo borde o se separan.
Ancho y alto de la tabla
La tabla también tiene propiedades width y height. Como ves, usamos estas propiedades en nuestro estilo. Usamos la propiedad width para toda la tabla y la propiedad height para los encabezados. Podemos usar estas propiedades con píxeles y porcentajes.
Alineación del texto en la tabla
Ahora sobre la alineación del texto en la tabla. Como sabes, antes usamos la propiedad text-align para la posición del texto. En nuestro ejemplo, como ves, usamos la propiedad text-align para el encabezado. Para eso, usamos "text-align: center". Puedes leer nuestro capítulo anterior para saber cómo usarla.
Relleno de la tabla
Para controlar el espacio entre el borde y el contenido en una tabla, usa la propiedad padding en los elementos <td> y <th>:
Relleno de tablas HTML
td, th {
padding: 15px;
}Alineación horizontal con la propiedad text-align
Con la ayuda de la propiedad CSS text-align, puedes establecer la alineación horizontal del contenido en <th> o <td>.
De forma predeterminada, el contenido de los elementos <td> se alinea a la izquierda y el contenido de los elementos <th> se alinea al centro. En el siguiente ejemplo, el contenido de los elementos <th> y <td> se alinea a la derecha:
Ejemplo de alinear el contenido de los elementos <th> y <td> a la derecha:
Ejemplo de alinear el contenido de los elementos <th> y <td> a la derecha
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: right;
}
</style>
</head>
<body>
<h2>Horizontal alignment example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$250</td>
</tr>
<tr>
<td>Mary</td>
<td>Whatson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Alineación vertical con la propiedad vertical-align
Usando la propiedad CSS vertical-align, puedes establecer la alineación vertical del contenido en <th> o <td>.
De forma predeterminada, el contenido tanto en los elementos <th> como en los <td> se alinea verticalmente al centro.
En el siguiente ejemplo, el contenido de los elementos <td> se alinea verticalmente abajo:
Ejemplo de la alineación vertical del contenido de los elementos <td> abajo:
Ejemplo de la alineación vertical del contenido de los elementos <td> abajo:
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
text-align: right;
padding-right: 10px;
}
</style>
</head>
<body>
<h2>Vertical alignment example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$300</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$250</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Divisores horizontales
Al añadir la propiedad CSS border-bottom a los elementos <td> y <th>, crearás divisores horizontales.
Ejemplo de crear divisores horizontales:
Ejemplo de crear divisores horizontales:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #cccccc;
}
</style>
</head>
<body>
<h2>Horizontal dividers example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Tablas con efecto hover
Usando el selector CSS :hover en el elemento <tr>, harás que la tabla tenga efecto hover.
Ejemplo de crear una tabla con efecto hover:
Ejemplo de crear una tabla con efecto hover:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
tr {
background-color: #f5f5f5;
}
th,
td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ccc;
}
tr:hover {
background-color: #cdcdcd;
}
</style>
</head>
<body>
<h2>Hoverable table example</h2>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Tabla con franjas tipo cebra
Usando el selector nth-child() y añadiendo la propiedad CSS background-color a las filas impares (pares) de la tabla, puedes crear una tabla con franjas tipo cebra.
Ejemplo de crear una tabla con franjas tipo cebra:
Ejemplo de crear una tabla con franjas tipo cebra:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 10px;
}
tr:nth-child(even) {
background-color: #6eeccf;
}
tr:nth-child(odd) {
background-color: #2d7f88;
}
</style>
</head>
<body>
<h2>Striped table example</h2>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$250</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Tablas responsivas
Para hacer que una tabla sea responsiva, envuélvela en un elemento contenedor y aplica overflow-x: auto a ese contenedor.
Ejemplo de crear una tabla responsiva:
Ejemplo de crear una tabla responsiva
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px 5px;
}
tr:nth-child(even) {
background-color: #6eeccf;
}
tr:nth-child(odd) {
background-color: #2d7f88;
}
</style>
</head>
<body>
<h2>Responsive table example</h2>
<div>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Práctica
¿Qué propiedades de CSS se pueden aplicar a las tablas?