Tablas en HTML
Las tablas HTML permiten a los desarrolladores web organizar los datos en filas y columnas.
Una tabla en HTML consta de celdas de tabla dentro de filas y columnas.
Ejemplo
Una tabla HTML simple:
<table>
<thead>
<tr>
<th>Compañía</th>
<th>Contactos</th>
<th>País</th>
</tr>
</thead>
<tbody>
<tr>
<td>Flores y Regalos</td>
<td>María López</td>
<td>Alemania</td>
</tr>
<tr>
<td>Centro comercial M&S</td>
<td>Francisco Chamorro</td>
<td>México</td>
</tr>
</tbody>
</table>
Celdas de tabla
Cada celda de la tabla está definida por una etiqueta <td>y una </td>.
td significa datos de tabla.
Todo lo que está entre <td>y </td>es el contenido de la celda de la tabla.
Nota: una celda de una tabla puede contener todo tipo de elementos HTML: texto, imágenes,
listas, enlaces, otras tablas, etc.
Filas de la tabla
Cada fila de la tabla comienza con una <tr>y termina con una </tr>etiqueta.
tr significa fila de tabla.
Encabezados de tabla
A veces desea que sus celdas sean celdas de encabezado de tabla. En esos casos utilice la
<th>etiqueta en lugar de la <td>etiqueta:
th significa encabezado de tabla.
Bordes de tabla HTML
Las tablas HTML pueden tener bordes de diferentes estilos y formas.
Cómo agregar un borde
Para agregar un borde, use la propiedad border CSS en table los elementos th, y td:
Bordes de tabla colapsados
Para evitar tener bordes dobles como en el ejemplo anterior, establezca la border-collapse
propiedad CSS en collapse.
Esto hará que las fronteras colapsen en una sola frontera:
Estilo de bordes
Si establece un color de fondo para cada celda y le da al borde un color blanco (el mismo que el
fondo del documento), obtendrá la impresión de un borde invisible:
Tamaños de tablas HTML
Las tablas HTML pueden tener diferentes tamaños para cada columna, fila o la tabla completa.
Utilice las propiedades width o height para especificar el tamaño de una tabla, fila o columna.
Ancho de la tabla HTML
Para establecer el ancho de una tabla, agregue al elemento <table>:
Ejemplo
Establezca el ancho de la tabla al 100%:
table{
width:100%;
Ancho de columna de tabla HTML
Para establecer el tamaño de una columna específica, agregue css al elemento <th>o <td>:
Encabezados de tabla HTML
Las tablas HTML pueden tener encabezados para cada columna o fila, o para muchas
columnas/filas.
Encabezados de tabla HTML
Los encabezados de las tablas se definen con th elementos. Cada th elemento representa una
celda de la tabla.
Ejemplo
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Encabezados verticales
Para utilizar la primera columna como encabezados de tabla, defina la primera celda de cada
fila como <th>elemento:
Ejemplo
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Título de la tabla
Puede agregar un título que sirva como encabezado para toda la tabla.
Para agregar un título a una tabla, use la <caption>etiqueta:
Ejemplo
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Relleno y espaciado de tablas HTML
Las tablas HTML pueden ajustar el relleno dentro de las celdas y también el espacio entre las
celdas.
Tabla HTML: relleno de celdas
El relleno de celda es el espacio entre los bordes de la celda y el contenido de la celda.
De forma predeterminada, el relleno se establece en 0.
Para agregar relleno en las celdas de la tabla, use la propiedad padding CSS:
Para agregar relleno solo encima del contenido, use la propiedad padding-top.
Y los demás se ponen del lado de las propiedades padding-bottom, padding-lefty padding-
right:
Tabla HTML: espaciado de celdas
El espacio entre celdas es el espacio entre cada celda.
De forma predeterminada, el espacio está establecido en 2 píxeles.
Para cambiar el espacio entre las celdas de la tabla, use la border-spacing propiedad CSS en el
table elemento:
Tabla HTML Colspan y Rowspan
Las tablas HTML pueden tener celdas que abarcan varias filas y/o columnas.
Tabla HTML - Colspan
Para hacer que una celda abarque varias columnas, utilice el atributo colspan:
Ejemplo
<table>
<tr>
<th colspan="2">Nombre</th>
<th>Años</th>
</tr>
<tr>
<td>Jhon</td>
<td>Suarez</td>
<td>23</td>
</tr>
<tr>
<td>Evelyn</td>
<td>Jácome</td>
<td>17</td>
</tr>
</table>
Nota: El valor del atributo colspan representa el número de columnas que se abarcarán.
Tabla HTML: extensión de filas
Para hacer que una celda abarque varias filas, utilice el atributo rowspan:
Ejemplo
<table>
<tr>
<th>Nombre</th>
<td>Jaime</td>
</tr>
<tr>
<th rowspan="2">Telefóno</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
Nota: El valor del atributo rowspan representa el número de filas que se abarcarán.
