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>