TABLA

Para crear una nueva tabla HTML debes usar la etiqueta <table>. En el interior de la misma es en donde definiremos una serie de filas y columnas que nos permitirán organizar los datos de la misma.

En el interior de las tablas se definen filas y, en el interior de las filas, columnas.

Codigo

<table>
  .... filas  y columnas ...
</table>

ESTRUCTURA

A continuación vamos a ver cuáles son las etiquetas mediante las cuales podrás definir filas y columnas, para así poder agregar contenidos a la misma.


La etiqueta <tr> se utiliza para definir filas dentro de las tablas, por lo que solamente tienen sentido en el interior de la etiqueta <table>. A modo de ejemplo, vamos a crear una tabla con dos filas:

Codigo

<table>
  <tr></tr>
  <tr></tr>
</table>

Sin embargo, todavía no se mostrará nada por pantalla si intentas ver este código en tu navegador, ya que todavía nos faltan las columnas de la tabla.


Mediante la etiqueta <td> podrás agregar columnas en el interior de las filas, por lo que esta etiqueta siempre tendrá que estar en el interior de una etiqueta <tr>. A continuación vamos a agregar tres columnas a cada una de las filas anteriores:

CODIGO
<!DOCTYPE html>
<html lang="es-MX">
  <head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">           

    <style>
    <!--Regla de estilo que establece el fondo en blanco y letras en negro -->
    body { background-color: #FFF; color: #000; font-family: Arial, sans-serif; margin: 0; padding: 0; }
    <!--Regla de estilo que define a las tablas con borde de 2 pixeles y bordes juntos  -->
    table, th, td {  border: 2px solid ; border-collapse: collapse; }
    </style>        
    
  </head>
<body>
  <table width="100%">
    <tr>
      <td>R1 A</td>
      <td>R1 B</td>
      <td>R1 C</td>
    </tr>
    <tr>
      <td>R2 E</td>
      <td>R2 F</td>
      <td>R2 G</td>
    </tr>
  </table>
</body>
</html>

Visualizacion

R1 A R1 B R1 C
R2 E R2 F R2 G
ACTIVIDADES A REALIZAR

1)Crea una pagina HTML con codigo para crear varias tablas

  • Tabla de 1 renglon con 6 columnas
  • Tabla de 2 renglones con 3 columnas
  • Tabla de 4 renglones con 4 columnas

2)Modifica el estilo de la tabla para cambiar los colores y bordes, puedes encontrar informacion y ejemplos en https://www.mclibre.org/consultar/htmlcss/css/css-tablas-modos-bordes.html

Procura no copiar directamente desde una IA


ENCABEZADO

Los encabezados de las columnas se mostrarán sobre las mismas, con un texto resaltado en su estilo por defecto para así poder diferenciarlos de los datos de la tabla. Para agregarlos se usa la etiqueta <th>


Codigo

      
<h2>Ventas Semanales</h2>
<table>
    <tr>
        <th></th>
        <th>Lunes</th>
        <th>Martes</th>
        <th>Miércoles</th>

    </tr>
    <tr>
        <td>Maria García</td>
        <td>150</td>
        <td>200</td>
        <td>120</td>

    </tr>
    <tr>
        <td>Juan López</td>
        <td>220</td>
        <td>180</td>
        <td>280</td>
    </tr>
</table>

Visualizacion

Ventas Semanales

Lunes Martes Miércoles
Maria García 150 200 120
Juan López 220 180 280
ACTIVIDADES A REALIZAR

Crea una pagina HTML con codigo que muestre

  • Tabla de 3 renglon con 8 columnas y sus respectivos encabezados
  • Los encabezados son los dias de la semana
  • El primer renglon es nombre de una vendedora
  • El segundo renglon es nombre de un vendedor
  • El tercer renglon es la suma de las ventas
  • En los datos de los dias añade informacion aleatoria de ventas

Procura no copiar directamente desde una IA