El elemento <table> es utilizado en HTML para crear tablas en una página web. La tabla está compuesta por filas, columnas y celdas, donde podemos colocar texto, imágenes y otros elementos HTML.
Vamos a empezar con un ejemplo básico de cómo crear una tabla en HTML.
<table>
<tr>
<th>Encabezado de columna 1</th>
<th>Encabezado de columna 2</th>
</tr>
<tr>
<td>Celda 1, columna 1</td>
<td>Celda 1, columna 2</td>
</tr>
<tr>
<td>Celda 2, columna 1</td>
<td>Celda 2, columna 2</td>
</tr>
</table>El ejemplo muestra una tabla con dos columnas y tres filas. La primera fila es encabezado de columna (definido por la etiqueta <th>) y las siguientes son celdas de datos (definidas por la etiqueta <td>). En este caso, cada fila tiene dos celdas.
| Encabezado de columna 1 | Encabezado de columna 2 |
|---|---|
| Celda 1, columna 1 | Celda 1, columna 2 |
| Celda 2, columna 1 | Celda 2, columna 2 |
Atributos del elemento `<table>`
Existen distintos atributos que podemos utilizar en una tabla para personalizar su apariencia y comportamiento. A continuación, te presento algunos de los atributos más comunes.
border
El atributo border define el ancho del borde que rodea la tabla. El valor puede ser un número entero, o 0 si no se desea borde.
<table border="1">
<tr>
<th>Encabezado de columna 1</th>
<th>Encabezado de columna 2</th>
</tr>
<tr>
<td>Celda 1, columna 1</td>
<td>Celda 1, columna 2</td>
</tr>
<tr>
<td>Celda 2, columna 1</td>
<td>Celda 2, columna 2</td>
</tr>
</table>| Encabezado de columna 1 | Encabezado de columna 2 |
|---|---|
| Celda 1, columna 1 | Celda 1, columna 2 |
| Celda 2, columna 1 | Celda 2, columna 2 |
En este caso, se define un borde con un ancho de 1 píxel alrededor de la tabla.
cellpadding
El atributo cellpadding define el espacio que hay entre el contenido de una celda y su borde. El valor puede ser un número entero.
<table border="1" cellpadding="10">
<tr>
<th>Encabezado de columna 1</th>
<th>Encabezado de columna 2</th>
</tr>
<tr>
<td>Celda 1, columna 1</td>
<td>Celda 1, columna 2</td>
</tr>
<tr>
<td>Celda 2, columna 1</td>
<td>Celda 2, columna 2</td>
</tr>
</table>En este caso, se define un espacio de 10 píxeles entre el contenido de las celdas y su borde.
| Encabezado de columna 1 | Encabezado de columna 2 |
|---|---|
| Celda 1, columna 1 | Celda 1, columna 2 |
| Celda 2, columna 1 | Celda 2, columna 2 |
cellspacing
El atributo cellspacing define el espacio que hay entre las celdas de una tabla. El valor puede ser un número entero.
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Encabezado de columna 1</th>
<th>Encabezado de columna 2</th>
</tr>
<tr>
<td>Celda 1, columna 1</td>
<td>Celda 1, columna 2</td>
</tr>
<tr>
<td>Celda 2, columna 1</td>
<td>Celda 2, columna 2</td>
</tr>
</table>En este caso, se define un espacio de 5 píxeles entre las celdas de la tabla.
| Encabezado de columna 1 | Encabezado de columna 2 |
|---|---|
| Celda 1, columna 1 | Celda 1, columna 2 |
| Celda 2, columna 1 | Celda 2, columna 2 |
width y height
Los atributos width y height definen el ancho y la altura de la tabla respectivamente. El valor puede ser un número entero, o un porcentaje del ancho o altura de la página.
<table border="1" cellpadding="10" cellspacing="5" width="50%">
<tr>
<th>Encabezado de columna 1</th>
<th>Encabezado de columna 2</th>
</tr>
<tr>
<td>Celda 1, columna 1</td>
<td>Celda 1, columna 2</td>
</tr>
<tr>
<td>Celda 2, columna 1</td>
<td>Celda 2, columna 2</td>
</tr>
</table>| Encabezado de columna 1 | Encabezado de columna 2 |
|---|---|
| Celda 1, columna 1 | Celda 1, columna 2 |
| Celda 2, columna 1 | Celda 2, columna 2 |
En este caso, se define que la tabla ocupe el 50% del ancho de la página.
colspan y rowspan
Los atributos colspan y rowspan definen el número de columnas o filas que ocupa una celda respectivamente. El valor puede ser un número entero.
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Encabezado de columna 1</th>
<th colspan="2">Encabezado de columna 2 y 3</th>
</tr>
<tr>
<td>Celda 1, columna 1</td>
<td rowspan="2">Celda doble</td>
<td>Celda 1, columna 3</td>
</tr>
<tr>
<td>Celda 2, columna 1</td>
<td>Celda 2, columna 3</td>
</tr>
</table>| Encabezado de columna 1 | Encabezado de columna 2 y 3 | |
|---|---|---|
| Celda 1, columna 1 | Celda doble | Celda 1, columna 3 |
| Celda 2, columna 1 | Celda 2, columna 3 | |
En este caso, se define una celda que ocupa dos columnas, y otra que ocupa dos filas.
align y valign
Los atributos align y valign definen el alineamiento horizontal y vertical del contenido de las celdas respectivamente. El valor puede ser «left», «center», «right» o «top», «middle», «bottom» respectivamente.
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th align="left">Encabezado de columna 1</th>
<th align="center">Encabezado de columna 2</th>
<th align="right">Encabezado de columna 3</th>
</tr>
<tr>
<td align="left">Celda 1, columna 1</td>
<td align="center" valign="bottom">Celda 1, columna 2</td>
<td align="right">Celda 1, columna 3</td>
</tr>
<tr>
<td align="left">Celda 2, columna 1</td>
<td align="center" valign="top">Celda 2, columna 2</td>
<td align="right">Celda 2, columna 3</td>
</tr>
</table>| Encabezado de columna 1 | Encabezado de columna 2 | Encabezado de columna 3 |
|---|---|---|
| Celda 1, columna 1 | Celda 1, columna 2 | Celda 1, columna 3 |
| Celda 2, columna 1 | Celda 2, columna 2 | Celda 2, columna 3 |
En este caso, se definen distintos alineamientos horizontal y vertical para las celdas de la tabla.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
