Tablas de CSS

El uso de CSS puede mejorar enormemente la apariencia de las tablas HTML:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

Prueba personalmente

Bordes de tabla

Para configurar los bordes de la tabla en CSS, utilice border Atributo.

El siguiente ejemplo especifica bordes negros para los elementos <table>, <th> y <td>:

Nombre Apellido
Points Bill
50 Steve

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

table, th, td {
  border: 1px solid black;
}

Prueba personalmente

Nota:La tabla del ejemplo anterior tiene bordes dobles. Esto se debe a que la tabla y los elementos <th> y <td> tienen bordes separados.

Tabla de ancho completo

En algunos casos, la tabla superior parece pequeña. Si necesita una tabla que cubra toda la pantalla (ancho completo), agregue width: 100% al elemento <table>:

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

table {
  width: 100%;
}

Prueba personalmente

Bordes dobles

Tenga en cuenta que la tabla superior tiene bordes dobles. Esto se debe a que la tabla y los elementos th y td tienen bordes separados.

Para eliminar los bordes dobles, consulte el siguiente ejemplo.

Fusión de bordes de tabla

border-collapse Atributo que establece si se deben plegar los bordes de la tabla en un solo borde:

Nombre Apellido
Points Bill
50 Steve

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

Prueba personalmente

Si solo desea que la tabla tenga bordes alrededor, simplemente especifique border para <table>: border padding

Nombre Apellido
Points Bill
50 Steve

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

table {
  border: 1px solid black;
}

Prueba personalmente

Ancho y alto de la tabla

El ancho y el alto de la tabla se definen por width y height Definición de atributo.

El siguiente ejemplo establece el ancho de la tabla en 100%, y el alto del elemento <th> en 50px:

Nombre Apellido Ahorros
Points Bill $100
50 Steve $150
94 Elon $300

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

table {
  width: 100%;
}
th {
  height: 50px;
}

Prueba personalmente

Para crear una tabla que ocupe la mitad de la página, utilice width: 50%:

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

table {
  width: 50%;
}
th {
  height: 70px;
}

Prueba personalmente

Alineación horizontal

text-align Atributo que establece la alineación horizontal del contenido de <th> o <td> (izquierda, derecha o centrado).

Por defecto, el contenido del elemento <th> se alinea al centro, mientras que el contenido del elemento <td> se alinea a la izquierda.

Para alinear el contenido del elemento <td> también al centro, utilice text-align: center:

Nombre Apellido Ahorros
Points Bill $100
50 Steve $150
94 Elon $300

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

th {
  text-align: center;
}

Prueba personalmente

El siguiente ejemplo alinea el texto del elemento <th> a la izquierda:

Nombre Apellido Ahorros
Points Bill $100
50 Steve $150
94 Elon $300

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

th {
  padding: 15px;
}

Prueba personalmente

Alineación vertical

vertical-align Atributo que establece la alineación vertical del contenido de <th> o <td> (arriba, abajo o centrado).

Por defecto, la alineación vertical del contenido de la tabla es centralizada (los elementos <th> y <td> son así).

El siguiente ejemplo establece la alineación de texto vertical del elemento <td> en posición inferior:

Nombre Apellido Ahorros
Points Bill $100
50 Steve $150
94 Elon $300

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

td {
  height: 50px;
  vertical-align: bottom;
}

Prueba personalmente

interior de la tabla

margen interno de la tabla Para controlar el espacio entre el borde y el contenido de la tabla, utilice padding

Nombre Apellido Ahorros
Points Bill $100
50 Steve $150
94 Elon $300

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

propiedad, para lograr una línea de separación horizontal:
  propiedad:
  padding: 15px;
}

Prueba personalmente

text-align: left;

Nombre Apellido Ahorros
Points Bill $100
50 Steve $150
94 Elon $300

línea de separación horizontal Agregar a <th> y <td> para border-bottom

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

propiedad, para lograr una línea de separación horizontal:
  th, td {
}

Prueba personalmente

border-bottom: 1px solid #ddd;

Tabla con efecto hover usar en el elemento <tr> :hover

Nombre Apellido Ahorros
Points Bill $100
50 Steve $150
94 Elon $300

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

tr:hover {background-color: #f5f5f5;}

Prueba personalmente

tabla con rayas

Nombre Apellido Ahorros
Points Bill $100
50 Steve $150
94 Elon $300

Para lograr el efecto de tabla con rayas, utilice nth-child() selector, y agregar background-color：

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

tr:nth-child(even) {background-color: #f2f2f2;}

Prueba personalmente

Color de la tabla

El siguiente ejemplo especifica el color de fondo y el color del texto de los elementos <th>:

Nombre Apellido Ahorros
Points Bill $100
50 Steve $150
94 Elon $300

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

th {
  background-color: #4CAF50;
  color: white;
}

Prueba personalmente

Tabla adaptable

Si la pantalla es demasiado pequeña para mostrar todo el contenido, la tabla adaptable mostrará una barra de desplazamiento horizontal:

Nombre Nombre Apellido Apellido Apellido Apellido Apellido Apellido Apellido Apellido Apellido Apellido
Points Bill Gates Gates Gates Gates Gates Gates Gates Gates Gates Gates
50 Steve Jobs Jobs Jobs Jobs Jobs Jobs Jobs Jobs Jobs Jobs
94 Elon Musk Musk Musk Musk Musk Musk Musk Musk Musk Musk

67 Agregar con overflow-x:auto

el elemento contenedor (por ejemplo <div>), para lograr un efecto adaptable:

<div style="overflow-x:auto;">
<table>
... contenido de la tabla ...
</table>
</div>

Prueba personalmente

Nota:En OS X Lion (en Mac), las barras de desplazamiento están ocultas por defecto y solo se muestran cuando se utilizan (incluso si se ha establecido "overflow:scroll").

Más ejemplos

Hacer una tabla con estilo
Este ejemplo muestra cómo crear una tabla con estilo.
Establecer la posición del título de la tabla
Este ejemplo muestra cómo colocar los títulos de la tabla.

propiedades de la tabla CSS

propiedades descripción
border Atributo abreviado. Establecer todos los atributos de borde en una declaración.
border-collapse Especificar si deben plegarse los bordes de la tabla.
border-spacing Especificar la distancia entre los bordes de las celdas adyacentes.
caption-side Especificar la posición del título de la tabla.
empty-cells Especificar si se deben mostrar los bordes y el fondo en las celdas en blanco de la tabla.
table-layout Configurar el algoritmo de diseño para la tabla.