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:
1
<table>
2
<tr>
3
<td>Pedro</td>
4
<td>Perez</td>
5
<tr>
6
<tr>
7
<td>Juan</td>
8
<td>Gomez</td>
9
<tr>
10
</table>
Copied!
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:
1
table, th, td {
2
border: 1px solid black;
3
}
Copied!

Uniendo los bordes

Si quieres que los bordes se unan en uno puedes utilizar la propiedad border-collapse de CSS:
1
table, th, td {
2
border: 1px solid black;
3
border-collapse: collapse;
4
}
Copied!

Encabezados

Para crear encabezados utiliza th en vez de td:
1
<table>
2
<tr>
3
<th>Nombre</th>
4
<th>Apellido</th>
5
<tr>
6
<tr>
7
<td>Juan</td>
8
<td>Gomez</td>
9
<tr>
10
</table>
Copied!

Agregar espacio interno en las celdas

Utiliza la propiedad padding de CSS para agregar espacio interno en las celdas:
1
th, td {
2
padding: 15px;
3
}
Copied!

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:
1
<table>
2
<tr>
3
<td>1</td>
4
<td>2</td>
5
<td>3</td>
6
</tr>
7
<tr>
8
<td colspan="2">Ocupa 2 columnas</td>
9
<td>4</td>
10
</tr>
11
<tr>
12
<td colspan="3">Ocupa 3 columnas</td>
13
</tr>
14
</table>
Copied!
Para que una celda ocupe más de una fila utiliza el atributo rowspan con el número de filas que quieres que ocupe:
1
<table>
2
<tr>
3
<td rowspan="2">Ocupa 2 filas</td>
4
<td>1</td>
5
</tr>
6
<tr>
7
<td>2</td>
8
</tr>
9
</table>
Copied!
Last modified 3yr ago