Tablas HTML: Tutorial con ejemplos de código CSS para diseñar páginas web
Este artículo es un tutorial sobre cómo crear tablas en HTML con ejemplos de código CSS. Las tablas son una herramienta útil en el desarrollo web para mostrar información de manera organizada y fácil de leer. HTML es el lenguaje de marcado utilizado para crear tablas y CSS se utiliza para dar estilo a las tablas.
En este tutorial, se proporcionarán ejemplos de código HTML y CSS para crear tablas simples y complejas. Se explicará cómo agregar encabezados, filas y columnas, así como cómo dar estilo a las tablas con CSS. Además, se discutirán algunas de las limitaciones de las tablas HTML y se proporcionarán alternativas para mostrar información de manera más efectiva.
Tablas HTML
Las tablas HTML son elementos que permiten organizar datos en filas y columnas. Son muy útiles para presentar información de manera ordenada y legible. En este tutorial se explicará la estructura básica de una tabla HTML, los atributos que se pueden utilizar para configurar su comportamiento y cómo se pueden dividir en secciones.
Estructura de la tabla
Para crear una tabla en HTML, se utiliza la etiqueta <table>. Dentro de esta etiqueta se definen las filas con la etiqueta <tr>, y dentro de cada fila se definen las celdas con la etiqueta <td>. Por ejemplo:
<table>
<tr>
<td>fila 1, celda 1</td>
<td>fila 1, celda 2</td>
</tr>
<tr>
<td>fila 2, celda 1</td>
<td>fila 2, celda 2</td>
</tr>
</table>
Atributos de las tablas
Las tablas HTML tienen varios atributos que se pueden utilizar para configurar su comportamiento. Algunos de los más comunes son:
| Propiedad | Descripción |
|---|---|
| border-collapse | Especifica si los bordes de las celdas deben unirse o separarse. |
| border | Especifica el ancho del borde de la tabla. |
| color | Especifica el color del borde de la tabla. |
| width | Especifica el ancho de la tabla. |
Encabezado, cuerpo y pie de página
Las tablas HTML se pueden dividir en tres secciones: encabezado (<thead>), cuerpo (<tbody>) y pie de página (<tfoot>). El encabezado se utiliza para definir las celdas que contienen los subtítulos de las columnas, mientras que el pie de página se utiliza para definir las celdas que contienen información resumida de la tabla. El cuerpo es la sección principal de la tabla y contiene todas las filas y celdas.
Combinación de celdas
Las celdas de una tabla HTML se pueden combinar utilizando los atributos colspan y rowspan. colspan se utiliza para combinar celdas horizontalmente, mientras que rowspan se utiliza para combinar celdas verticalmente. Por ejemplo:
<table>
<tr>
<td>fila 1, celda 1</td>
<td colspan="2">fila 1, celda 2 y 3</td>
</tr>
<tr>
<td rowspan="2">fila 2 y 3, celda 1</td>
<td>fila 2, celda 2</td>
<td>fila 2, celda 3</td>
</tr>
<tr>
<td>fila 3, celda 2</td>
<td>fila 3, celda 3</td>
</tr>
</table>
Las tablas HTML son una herramienta muy útil para organizar datos en filas y columnas. Conocer su estructura básica y los atributos que se pueden utilizar para configurar su comportamiento es esencial para crear tablas legibles y accesibles. Además, la combinación de celdas permite crear diseños más complejos y atractivos.
Estilo de tablas con CSS
Las tablas HTML son una forma útil de presentar datos en una página web, pero a menudo necesitan un poco de estilo para que se vean bien. Afortunadamente, CSS ofrece muchas opciones para personalizar el aspecto de las tablas. En esta sección, se explicarán los selectores y atributos de tablas en CSS que se pueden utilizar para mejorar el estilo de las tablas HTML.
Selectores de tablas
Los selectores permiten apuntar a elementos específicos en una tabla y aplicar estilos a ellos. Los siguientes selectores se utilizan comúnmente en tablas:
| Selectores | Descripción |
|---|---|
| table | selecciona toda la tabla. |
| tr | selecciona todas las filas de la tabla. |
| th | selecciona todas las celdas de encabezado de la tabla. |
| td | selecciona todas las celdas de datos de la tabla. |
Atributos de tablas en CSS
Los atributos se utilizan para establecer valores específicos de estilo en los elementos seleccionados. Los siguientes atributos se utilizan comúnmente en tablas:
| Atributos | Descripción |
|---|---|
| border | establece el ancho del borde de la tabla. |
| border-collapse | especifica si los bordes de la tabla se deben colapsar en una sola línea o no. |
| table-layout | especifica cómo se deben distribuir las celdas en la tabla. |
| width | establece el ancho de la tabla. |
| padding | establece el espacio entre el borde de la celda y su contenido. |
| caption-side | especifica la posición del título de la tabla. |
| empty-cells | especifica cómo deben manejarse las celdas vacías en la tabla. |
Los siguientes ejemplos de código muestran cómo se pueden utilizar los atributos para establecer el estilo de una tabla:
table {
border: 1px solid black;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
th,
td {
padding: 10px;
}
caption {
caption-side: bottom;
}
En este ejemplo, se establece un borde sólido de 1 píxel alrededor de toda la tabla y se especifica que los bordes deben colapsarse en una sola línea. También se establece un ancho del 100% para asegurarse de que la tabla se ajuste al ancho de la página. Las celdas de encabezado y datos tienen un relleno de 10 píxeles para dar un poco de espacio entre el contenido y el borde de la celda. Finalmente, el título se coloca en la parte inferior de la tabla.
CSS ofrece muchas opciones para personalizar el estilo de las tablas HTML. Al utilizar los selectores y atributos adecuados, se pueden crear tablas atractivas y fáciles de leer en una página web.