Guías de Make it Real
Search…
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 4yr ago