Tablas en HTML

1. Elemento <table>

HTML proporciona una forma cómoda de representar datos en un formato estructurado utilizando tablas. Las tablas ayudan a organizar la información en filas y columnas, lo que las hace útiles para presentar datos numéricos, horarios, listas de precios y otros conjuntos de datos estructurados. Veamos cómo se utilizan las etiquetas principales para crear tablas: <table>, <tr>, <td> y <th>.

La etiqueta <table> actúa como un contenedor para toda la tabla. Se utiliza para indicar el inicio y el final de la tabla y contiene todas las etiquetas asociadas a la tabla.

Ejemplo de creación de una tabla con la etiqueta <table>:

<table>
  <!-- Aquí se colocan las filas y celdas de la tabla -->
</table>

La etiqueta <table> también se puede estilizar utilizando el atributo border, para añadir un borde a la tabla:

<table border="1">
  <tr>
    <td>Ejemplo de celda</td>
  </tr>
</table>

Aquí el atributo border="1" añade un borde alrededor de la tabla y sus celdas, haciéndolas visibles.

2. Elemento <tr>

La etiqueta <tr> indica una fila de la tabla (table row). Cada fila de la tabla debe estar dentro de una etiqueta <tr>, que a su vez, se coloca dentro de <table>.

Ejemplo:

<table border="1">
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
    <td>Celda 4</td>
  </tr>
</table>

En este ejemplo la tabla consta de dos filas. Cada fila contiene dos celdas.

3. Elemento <td>

La etiqueta <td> (table data) se utiliza para crear celdas de datos en la tabla. Representa una celda común de la tabla, que puede contener texto, imágenes o cualquier otro contenido HTML.

Ejemplo de uso de <td>:

<table border="1">
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>

Las celdas <td> crean el contenido principal de la tabla y se colocan dentro de las filas <tr>.

4. Elemento <th>

La etiqueta <th> (table header) se utiliza para crear los encabezados de la tabla. Las celdas creadas usando <th>, por defecto, están en negrita y alineadas al centro. Esto es útil para marcar los encabezados de columnas o filas.

Ejemplo de una tabla con encabezados:

    
<table border="1">
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Iván</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Iván</td>
    <td>30</td>
</tr>
<table border="1">
    
  

En este ejemplo <th> se utiliza para marcar los encabezados «Nombre» y «Edad», lo que permite a los usuarios comprender rápidamente lo que significan los datos en cada columna.