Saltar al contenido principal

Tablas

Una tabla se define con la etiqueta <table>.

Las filas se definen con la etiqueta <tr>.

Las celdas se definen con la etiqueta <td>.

Ejemplo:

<table>
  <tr>
    <td>Pedro</td>
    <td>Perez</td>
  <tr>
  <tr>
    <td>Juan</td>
    <td>Gomez</td>
  <tr>
</table>

Nunca utilices <tr> por fuera de un <table>.

Nunca utilices <td> por fuera de un <tr>.

Agregando bordes​

Por defecto las tablas no tienen bordes. Si deseas agregarles un borde puedes utilizar la propiedad border de CSS:

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

Uniendo los bordes​

Si quieres que los bordes se unan en uno puedes utilizar la propiedad border-collapse de CSS:

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

Encabezados​

Para crear encabezados utiliza th en vez de td:

<table>
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
  <tr>
  <tr>
    <td>Juan</td>
    <td>Gomez</td>
  <tr>
</table>

Agregar espacio interno en las celdas​

Utiliza la propiedad padding de CSS para agregar espacio interno en las celdas:

th, td {
  padding: 15px;
}

Celdas que ocupan más de una columna o fila​

Para que una celda (td o th) ocupe más de una columna utiliza el atributo colspan con el número de columnas que quieres que ocupe. Por ejemplo:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan="2">Ocupa 2 columnas</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan="3">Ocupa 3 columnas</td>
  </tr>
</table>

Para que una celda ocupe más de una fila utiliza el atributo rowspan con el número de filas que quieres que ocupe:

<table>
  <tr>
    <td rowspan="2">Ocupa 2 filas</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
</table>