El aspecto de una tabla HTML puede ser mejorado con CSS:
| Empresa | Contacto | País |
|---|---|---|
| alfreds Futterkiste | Maria Anders | Alemania |
| snabbkop Berglunds | Christina Berglund | Suecia |
| Centro Comercial Moctezuma | Francisco Chang | Méjico |
| Ernst Handel | Roland Mendel | Austria |
| Trading Island | Helen Bennett | Reino Unido |
| Koniglich Essen | Philip Cramer | Alemania |
| Riendo Bacchus Winecellars | Yoshi Tannamuri | Canadá |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italia |
Los bordes de tabla
Para especificar bordes de la tabla en CSS, utilice la border propiedad.
El ejemplo siguiente especifica un borde negro de <table> , <th> y <td> elementos:
Observe que la tabla en el ejemplo anterior tiene bordes dobles. Esto es debido a que tanto la mesa y el <th> y <td> elementos tienen fronteras separadas.
Contraer bordes de tabla
El border-collapse propiedad establece si los bordes de la tabla deben ser colapsados en un solo borde:
Ejemplo
table
{
border-collapse: collapse;
}
table, th, td
{
border: 1px solid black;
} Inténtalo tú mismo " Si sólo desea un borde alrededor de la mesa, sólo se especifique la border propiedad de <table> :
Tabla Ancho y Altura
Anchura y altura de una mesa se definen por las width y height propiedades.
El ejemplo siguiente establece el ancho de la tabla a 100%, y la altura de la <th> elementos de 50px:
Alineación horizontal
El text-align propiedad establece la alineación horizontal (como izquierda, derecha o centro) parte del contenido de <th> o <td> .
De manera predeterminada, el contenido de <th> elementos son alineados-centro y el contenido de <td> elementos se alinea a la izquierda.
El siguiente ejemplo de izquierda alinea el texto en <th> elementos:
Alineamiento vertical
El vertical-align propiedad establece la alineación vertical (como superior, inferior o central) del contenido en <th> o <td> .
Por defecto, la alineación vertical del contenido de una tabla es medio (por tanto <th> y <td> elementos).
El ejemplo siguiente define la alineación de texto vertical hacia abajo para <td> elementos:
Relleno de mesa
Para controlar el espacio entre el borde y el contenido de una tabla, utilice el padding la propiedad en el <td> y <th> elementos:
Los divisores horizontales
| Nombre de pila | Apellido | Ahorros |
|---|---|---|
| Peter | Grifo | $ 100 |
| Lois | Grifo | $ 150 |
| Joe | Swanson | $ 300 |
Añadir la border-bottom propiedad a <th> y <td> para los divisores horizontales:
Tabla Hoverable
Utilice el :hover selector <tr> para resaltar filas de la tabla en el mouse:
| Nombre de pila | Apellido | Ahorros |
|---|---|---|
| Peter | Grifo | $ 100 |
| Lois | Grifo | $ 150 |
| Joe | Swanson | $ 300 |
Tablas de rayas
| Nombre de pila | Apellido | Ahorros |
|---|---|---|
| Peter | Grifo | $ 100 |
| Lois | Grifo | $ 150 |
| Joe | Swanson | $ 300 |
Para las tablas de rayas de cebra, utilice el nth-child() selector y añadir un background-color para todos los pares (o impares) filas de la tabla:
Tabla de colores
El ejemplo siguiente se especifica el color de fondo y el color del texto de <th> elementos:
| Nombre de pila | Apellido | Ahorros |
|---|---|---|
| Peter | Grifo | $ 100 |
| Lois | Grifo | $ 150 |
| Joe | Swanson | $ 300 |
Tabla sensible
Una tabla de respuesta se mostrará una barra de desplazamiento horizontal si la pantalla es demasiado pequeña para mostrar el contenido completo:
| Nombre de pila | Apellido | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Herrero | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Víspera | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Adán | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Añadir un elemento contenedor (como <div> ) con el overflow-x:auto alrededor de la <table> elemento que pueda responder:
Ejemplo
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Inténtalo tú mismo " 
Más ejemplos
Hacer una tabla de fantasía
Este ejemplo muestra cómo crear una tabla de fantasía.
Ajuste la posición de la leyenda de la tabla
Este ejemplo demuestra cómo la posición de la leyenda de la tabla.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»
Propiedades CSS Table
| Propiedad | Descripción |
|---|---|
| border | Establece todas las propiedades de borde en una declaración |
| border-collapse | Especifica si los bordes de tabla deben ser colapsados |
| border-spacing | Especifica la distancia entre los bordes de las celdas adyacentes |
| caption-side | Especifica la colocación de una leyenda de la tabla |
| empty-cells | Especifica si se muestra o no las fronteras y de fondo en las celdas vacías en una tabla |
| table-layout | Establece el algoritmo de diseño que se utiliza para una tabla |