LabEx
EntrarÚnete

Fila de tabla HTML

HTMLBeginner
Practicar Ahora

Introducción

Las tablas se pueden utilizar para presentar datos en un formato estructurado. El componente básico de cualquier tabla es un elemento de fila de tabla () que define una fila de celdas. Las filas de tabla deben estar encerradas dentro de un elemento de tabla (

). En esta práctica, aprenderemos cómo crear filas de tabla HTML.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para previsualizar la página web.

Creando una estructura de tabla HTML

Para crear una tabla HTML, primero necesitamos definir la estructura de la tabla. Comencemos creando un archivo HTML llamado index.html. Agregue el siguiente código a su archivo:

<!doctype html>
<html>
  <head>
    <title>Mi Tabla</title>
  </head>

  <body>
    <table>
      <tr>
        <th>Celda de encabezado 1</th>
        <th>Celda de encabezado 2</th>
      </tr>

      <tr>
        <td>Celda de datos 1</td>
        <td>Celda de datos 2</td>
      </tr>
    </table>
  </body>
</html>

En este código, hemos creado una tabla HTML con dos filas y dos columnas. La primera fila contiene dos celdas de encabezado (

a la tabla. Por ejemplo, para agregar otra fila a la tabla, agregue el siguiente código entre los elementos existentes:

<tr>
  <td>Celda de datos 3</td>
  <td>Celda de datos 4</td>
</tr>

Ahora, la tabla tiene tres filas, con cada fila conteniendo dos celdas.

Dar estilo a las filas de la tabla

Podemos agregar estilos a las filas de la tabla usando CSS. Agregue el siguiente estilo al elemento para agregar un color de fondo a las filas pares:

<style>
  tr:nth-child(even) {
    background-color: lightgray;
  }
</style>

Este código agregará un color de fondo lightgray a cada segunda fila de la tabla.

Combinando filas de tabla

Podemos fusionar dos o más filas adyacentes en una sola fila utilizando el atributo rowspan. Por ejemplo, digamos que queremos fusionar las dos primeras filas en una sola fila. Reemplace el primer elemento

con el siguiente código:

<tr>
  <th rowspan="2">Celda de encabezado 1</th>
  <th>Celda de encabezado 2</th>
</tr>

El atributo rowspan="2" en la primera celda de encabezado fusionará las dos primeras filas en una sola fila.

Creando encabezados de celdas de tabla

Podemos usar el elemento

) y la segunda fila contiene dos celdas de datos ().

Agregando más filas

Para agregar más filas a la tabla, necesitamos agregar más elementos

para crear celdas de encabezado en la tabla. Las celdas de encabezado se utilizan típicamente para describir el contenido de las columnas. Para agregar una celda de encabezado a la primera columna, reemplace el primer elemento en la segunda fila con el siguiente código:

<th scope="row">Celda de datos 1</th>

El atributo scope="row" en el elemento

especifica que esta es una celda de encabezado para la primera fila.

Resumen

En este laboratorio, aprendimos cómo crear filas de tabla HTML y personalizar la tabla usando CSS. También aprendimos cómo fusionar filas adyacentes y crear celdas de encabezado en la tabla. Con estas habilidades, ahora puedes crear tablas hermosas y estructuradas para tus páginas web.

Relacionado HTML Cursos
HTML para Principiantes

HTML para Principiantes

htmlweb-development
Construir una aplicación web de Tres en Raya

Construir una aplicación web de Tres en Raya

javascriptweb-development
Creación de un juego web de Golpear al Topo

Creación de un juego web de Golpear al Topo

javascriptweb-development