Tablas HTML

Ejemplo de una tabla en HTML

Definiendo Tablas en HTML

<table style="width: 100%">
  <tr>
    <td>Juan</td>
    <td>Pérez</td>
    <td>89</td>    
  </tr>
  <tr>
    <td>Eva</td>
    <td>Méndez</td>
    <td>92</td>    
  </tr>  
</table>

Explicación del ejemplo:

Las tablas son definidas con la etiqueta <table>. Las Tablas son divididas internamente por "Filas de Tablas" con la etiqueta <tr> (de Table Row). Las "Filas de Tabla" son divididos internamente por "Columnas de Tablas" con la etiqueta <td> (de Table Data). Una "Fila de Tabla" puede también dividirse internamente por "Encabezados de Tablas" con la etiqueta <th>(de Table Heading).

Las "columnas de tabla" <td> es el contenedor de los datos de una tabla y puede contener todo tipo de elementos como texto, imágenes, listas, otras tablas, etc.

Atributos

align: Alinea horizontalmente la tabla con respecto a su entorno.
background: Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor: Da color de fondo a la tabla.
border: Define el número de pixels del borde principal.
bordercolor: Define el color del borde.
cellpadding: Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing: Define el espacio entre los bordes (en pixels).
height: Define la altura de la tabla en pixels o porcentaje.
width: Define la anchura de la tabla en pixels o porcentaje.

Una Tabla HTML con un atributo border

Si no se especifica un borde a una tabla, esta se mostrará sin bordes. Un borde puede agregarse usando el atributo border:

<table border="1" style="width: 100%">
  <tr>
    <td>Juan</td>
    <td>Pérez</td>
    <td>89</td>
  </tr>
  <tr>
    <td>Eva</td>
    <td>Méndez</td>
    <td>92</td>    
  </tr>
</table>

Esta forma es el estándar del HTML para usar el atributo border pero es más recomendado usar la forma CSS.

A continuación la forma de establecer los bordes con la propiedad border del CSS:

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

No olvide definir los bordes tanto para la tabla como para las celdas de las tablas.

Una Tabla HTML con bordes colapsados

Si deseamos bordes colapsados en uno solo, agregamos la propiedad border-collapse del CSS:

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

Una Tabla HTML con relleno en celdas (padding)

El relleno de la celda especifica el espacio entre el contenido de la celda y su borde. Si tu especificas un relleno (padding), la celda de la tabla se mostrará sin relleno. Para establecer el relleno, usamos la propiedad padding del CSS:

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

Encabezados de Tablas HTML

Los encabezados de las tablas son especificados con la etiqueta <th>. Por defecto, la mayoría de los navegadores web desplegarán el contenido de los encabezados en negritas y alineados al centro.

<table style="width:100%">
  <tr>
    <th>Nombre</th>
    <th>Apellidos</th>
  </tr>
  <tr>
    <td>Juan</td>
    <td>Pérez</td>
    <td>89</td>
  </tr>
</table>

Para alinear a la izquierda los encabezados de la tabla, usamos la propiedad text-align del CSS.

th {
  text-align: left;
}

Una tabla HTML con Espaciado en el borde

El espaciado en el borde especifica el espacio entre las celdas. Para establecer el espaciado del borde de una tabla, usamos la propiedad border-spacing del CSS.

table {
  border-spacing: 5px;
}

Nota: Si la tabla tiene definidos los bordes colapsados (border-collapse), border-spacing no tendrá efecto.

Celdas que abarcan varias columnas

Para hacer que una celda abarque más de una columna usamos el atributo colspan:

<table style="width: 100%;">
  <tr>
    <th>Nombre</th>
    <th colspan="2">Teléfono</th>
  </tr>
  <tr>
    <td>Juan Pérez</td>
    <td>55 77 857</td>
    <td>55 77 858</td>
  </tr>
</table>

Celdas que abarcan varios renglones

Para hacer que una celda abarque más de un renglón usamos el atributo rowspan:

<table style="width:100%;">
  <tr>
    <th>Nombre:</th>
    <td>Juan Pérez</td>
  </tr>
  <tr>
    <th rowspan:"2">Teléfono:</th>
    <td>55 77 857</td>
  </tr>
  <tr>
    <td>55 77 858</td>
  </tr>
</table>

Una tabla HTML con un Titulo

Para poner un titulo a una tabla, usamos la etiqueta caption:

<table>
  <caption>Mensuales</caption>
  <tr>
    <th>Meses</th>
    <th>Pagos</th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>$50</td>
  </tr>
</table>

La etiqueta caption debe ser insertada después de la etiqueta <html>.

Dar un estilo especial a una tabla

Para dar un estilo especial a una tabla, agregamos un atributo id para la tabla.

<table id="estilotabla">
  <tr>
    <th>Nombre</th>
    <th>Apellidos</th>
  </tr>
  <tr>
    <td>Juan</th>
    <td>Pérez</td>
  </tr>
<table>

Ahora definimos un estilo especial para esta tabla:

table#estilotabla {
  width: 100%;
  background-color: #f1f1f1;
}

Agregamos estilos para diferenciar los renglones:

table#estilotabla tr:nth-child(even) {
  background-color: #eee;
}
table#estilotabla tr:nth-child(odd) {
  background-color: #ffffff;
}
table#estilostabla th {
  color: white;
  background-color: black;
}

Resumen del Capitulo

• Usamos el elemento HTML <table> para definir una tabla.
• Usamos el elemento HTML <tr> para definir un renglón en una tabla.
• Usamos el elemento HTML <td> para definir una celda en una tabla.
• Usamos el elemento HTML <th> para definir una celda de encabezado en una tabla.
• Usamos el elemento HTML <caption> para definir un titulo a una tabla.
• Usamos la propiedad CSS border para definir un borde.
• Usamos la propiedad CSS border-collapse para colapsar los bordes de la celdas.
• Usamos la propiedad CSS padding para establecer un relleno a las celdas.
• Usamos la propiedad CSS text-align para alinear el texto de la celda.
• Usamos la propiedad CSS border-spacing para dar espacios entre las celdas.
• Usamos el atributo HTML colspan para hacer que una celda abarque más de una columna.
• Usamos el atributo HTML rowspan para hacer que un celda abarque más de un renglón.
• Usamos el atributo HTML id para definir como única tabla.