CSS Tabla
Usar CSS puede hacer que las tablas HTML sean más atractivas.
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| North/South | Simon Crowther | UK |
| Paris spécialités | Marie Bertrand | France |
| The Big Cheese | Liz Nixon | USA |
| Vaffeljernet | Palle Ibsen | Denmark |
Bordes de tabla
Especifique el borde de una tabla CSS usando la propiedad border.
El siguiente ejemplo especifica un borde negro para los elementos th y td de una tabla:
Tenga en cuenta que la tabla en el ejemplo anterior tiene bordes dobles. Esto se debe a que la tabla y los elementos th/td tienen bordes independientes.
Para mostrar un solo borde en una tabla, use la propiedad border-collapse.
Colapso de bordes
La propiedad border-collapse establece si los bordes de la tabla se colapsan en un solo borde o se separan:
Ancho y alto de tabla
Las propiedades width y height definen el ancho y el alto de la tabla.
El siguiente ejemplo establece una tabla con ancho del 100% y altura de 50 píxeles para los elementos th:
Alineación de texto en tabla
Las propiedades de alineación de texto y alineación vertical en la tabla.
La propiedad text-align establece la alineación horizontal: izquierda, derecha o centro:
La propiedad vertical-align establece la alineación vertical, como superior, inferior o medio:
Relleno de tabla
Para controlar el espacio entre el borde y el contenido de la tabla, debe usar la propiedad de relleno de los elementos td y th:
Colores de tabla
El siguiente ejemplo especifica el color del borde y los colores de texto y fondo de los elementos th:
Ejemplo
Pruébalo »
Más ejemplos
Crear una tabla personalizada
Este ejemplo demuestra cómo crear una tabla personalizada.
Establecer la posición del título de la tabla
Este ejemplo demuestra cómo posicionar el título de la tabla.