Creación de tablas

6.1 Elementos table y tr

Las tablas en HTML se utilizan para organizar datos en un formato tabular. Las etiquetas principales utilizadas para crear tablas incluyen <table>, <tr>, y <td>. Vamos a ver cada una de ellas en detalle.

<table>

La etiqueta <table> es un contenedor para toda la tabla. Dentro de ella se colocan las filas de la tabla, cada una de las cuales se define usando la etiqueta <tr>.

Ejemplo de uso:

    
      <table>
        <!-- filas y celdas de la tabla se agregarán aquí -->
      </table>
    
  

Etiqueta <tr> (table row)

La etiqueta <tr> representa una fila en la tabla. Dentro de la etiqueta <tr> se colocan las celdas de la tabla, cada una de las cuales se define usando la etiqueta <td> o <th>.

Ejemplo de uso:

    
      <table>
        <tr>
          <!-- celdas de la fila se agregarán aquí -->
        </tr>
      </table>
    
  

6.2 Elementos td y th

Etiqueta <td> (table data)

La etiqueta <td> se utiliza para definir una celda de datos en una fila de la tabla. Estas celdas contienen datos de la tabla y se colocan dentro de una fila, indicada por la etiqueta .

Ejemplo de uso:

    
      <table>
        <tr>
          <td>Celda 1</td>
          <td>Celda 2</td>
          <td>Celda 3</td>
        </tr>
      </table>
    
  

Etiqueta <th> (table head)

La etiqueta <th> se utiliza para representar celdas de encabezado en la tabla. El texto dentro de <th> generalmente se muestra en negrita y alineado al centro.

Ejemplo de uso:

    
      <table>
        <tr>
          <th>Encabezado 1</th>
          <th>Encabezado 2</th>
          <th>Encabezado 3</th>
        </tr>
      </table>
    
  

Ejemplo de tabla:

    
      <table>
        <tr>
          <th>Nombre</th> <th>Edad</th> <th>Ciudad</th>
        </tr>
        <tr>
          <td>Iván</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>María</td> <td>25</td> <td>Fráncfort</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>París</td>
        </tr>
      </table>
    
  

6.3 Estilización de tablas

Es necesario estilizar las tablas con CSS para mejorar significativamente la claridad y legibilidad de los datos.

Por ejemplo, decidiste agregar un borde a cada celda: admirable, pero como cada celda tiene un borde, ahora cada dos celdas están separadas por un borde doble — uno de cada celda. 🤦‍♂️

Si quieres que el borde se vea como deseas, necesitas usar CSS para unificar los bordes adyacentes. Para eso hay una propiedad especial: border-collapse.

Aquí tienes un ejemplo de buena estilización de nuestra tabla:

    
      <table>
        <tr>
          <th>Nombre</th> <th>Edad</th> <th>Ciudad</th>
        </tr>
        <tr>
          <td>Iván</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>María</td> <td>25</td> <td>Fráncfort</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>París</td>
        </tr>
      </table>
    
  

    
      table {
        width: 50%; /* Establece el ancho de la tabla */
        border-collapse: collapse; /* Elimina los bordes dobles entre las celdas */
      }

      th, td {
        border: 1px solid black; /* Establece un borde para las celdas */
        padding: 8px; /* Agrega espacio dentro de las celdas */
        text-align: left; /* Alinea el texto a la izquierda */
      }

      th {
        background-color: #f2f2f2; /* Establece el color de fondo para los encabezados */
      }
    
  

Aquí podemos ver que:

• Cada celda tiene un borde de 1 píxel de color negro
• Se eliminan los bordes dobles entre las celdas
• Cada celda tiene espaciado interior para que el texto no esté pegado a los bordes
• Las celdas de los encabezados tienen un color de fondo separado

¡Qué bonito!