3️⃣ ¿Cómo hacer tablas en HTML? Curso De HTML Desde Cero

Tiempo de lectura: 3 minutos

Rate this post

Las tablas en HTML son la forma de representar información en filas y columnas. Podemos usar las tablas en HTML para mostrar diferentes tipos de contenido como imágenes, texto e información.

Recuerda que esta es una serie de artículos sobre HTML desde cero, por lo que te recomiendo iniciar con el artículo Curso De HTML Desde Cero: Crea Páginas Web Con Este Curso Práctico De HTML

¿Cómo hacer tablas en HTML? Ejemplo

Para poder crear un tabla en HTML debemos de usar la etiqueta <table> y cada filda de la tabla será representada por la etiqueta <tr> dentro de cada fila debemos de agregar las celdas representadas por la etiqueta <td>. Aquí te muestro un ejemplo de una tabla simple:

<table>
  <tr>
    <td>No.</td>
    <td>Curso</td>
    <td>Participantes</td>
  </tr>
</table>

HTML

Encabezados de Tablas en HTML

A las tablas en HTML también le podemos añadir encabezados, cada encabezado deberá de ir dentro de una fila y la única diferencia es que cambiaremos la etiqueta <td> por la etiqueta <th>. Por ejemplo:

<table>
  <tr>
    <th>No.</th>
    <th>Curso</th>
    <th>Participantes</th>
  </tr>
    <tr>
    <th>1</th>
    <th>HTML</th>
    <th>1,000</th>
  </tr>
</table>

HTML

Para poder tener una mejor semántica y poder separar el contenido de los encabezados dentro de las tablas en HTML utilizaremos las etiquetas <thead><tbody> y <tfoot>

Estructura de una tabla en HTML

La etiqueta <thead> es usada para poder agrupar el contenido de los encabezados de la tabla en HTML, una anotación importante que debemos de hacer, es que solo debe de existir una única etiqueta <tr> dentro de <thead>, es decir, solo podrá existir una fila del encabezado

Por otra parte, la etiqueta <tbody> es usada para poder agrupar el contenido principal de la tabla en HTML, por lo que en esta sección podrán existir desde 1 hasta n cantidad de filas que queramos incluir.

Por último, la etiqueta <tfoot> es usada para poder agregar el pie de página dentro de una tabla en HTML, la etiqueta <tfoot> a diferencia de la etiqueta <thead> podrá tener más de una fila dentro de ella.

Adicional a estas etiquetas también podemos incluir una etiqueta caption, la cual permite agregar un subtitulo dentro de la tabla en HTML

Colspan y Rowspan en HTML

De todas estas etiquetas, la más importante sin duda es la etiqueta <td> ya que en ella podremos agregar la información que necesitamos mostrar al visitante, es por ello que <td> cuenta con al menos 2 atributos importantes: colspan y rowspan

Colspan específica el número de columnas que una celda debe expandirse, es decir, lo que comúnmente conocemos en los procesadores de textos como combinar celdas.

Por otro lado, Rowspan indica el número de filas que una celda debe expandirse, es decir, mientras colspan trabaja en sentido horizontal, rowspan trabajará en sentido vertical dentro de las tablas en HTML.

Un ejemplo completo de todas estas etiquetas podría ser algo como esto

<table>
  <caption>Información del Usuario</caption>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Correo electrónico</th>
      <th colspan="2">Teléfono</th>    
    </tr>
  <thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>    
      <td>123-45-678</td>
      <td>212-00-546</td>    
    </tr>
  <tbody>
  <tfoot>
    <tr>
    	<td colspan="4">Desarrollado por 8devmx</td> 
    </tr>
  </tfoot>
</table>

HTML

Observa que en principio definimos la etiqueta <table>, después un subtítulo mediante caption con la leyenda Información del Usuario, agrupamos el encabezado mediante la etiqueta thead

Aquí viene la primera cosa importante, el encabezado cuenta con 4 celdas, aunque podemos observar que solo existen 3 etiquetas <th> sin embargo, la última en la línea 7 cuenta con un colspan de 2, por lo que ocupará 2 celdas.

Después de ello, agregamos el tbody con las filas que sean necesarias para trabajar y para finalizar la etique tfoot contiene una fila, dentro de la cual solo existe un <td> pero de igual forma que en la parte superior, ocupa 4 columnas de ancho.

Si te ha gustado este artículo te pido me sigas en mis redes sociales:

🖥️ Youtube: https://www.youtube.com/@eightdev?sub_confirmation=1

🎵 Tik Tok: https://www.tiktok.com/@8devmx

✅ Facebook: https://www.facebook.com/8devmx/

📸 Instagram: https://www.instagram.com/8devmx/

Sin más, ¡nos vemos la próxima!