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>

Más elementos de HTML

Formularios

Last modified 2mo ago