Crear tabla usando JavaScript

1. Varias etiquetas utilizadas para crear una tabla en HTML
2. Crear una tabla usando JavaScript

El lenguaje de programación JavaScript nos permite crear y manipular elementos DOM (Document Object Model). Nos da mucha más flexibilidad y hace que sea mucho más fácil para todos trabajar con DOM, especialmente si eres un desarrollador de backend.

Hay dos formas de agregar elementos HTML como tablas a un documento HTML, la primera es agregando la etiqueta de la tabla HTML directamente en nuestra página web HTML, y la segunda es creando la tabla completa dentro de nuestro código JavaScript. La segunda opción es la forma más popular de crear y agregar la tabla al DOM.

Pero antes de profundizar en cómo se crea la tabla con JavaScript, primero comprendamos visualmente las diversas etiquetas de tabla que se usan para crear una tabla y qué significa exactamente cada una de esas etiquetas. Esto le dará una representación visual de la tabla, lo que le facilitará la comprensión de la parte del código más adelante en este artículo.

Varias etiquetas utilizadas para crear una tabla en HTML

A continuación se muestra la lista de etiquetas que se utilizan para crear una tabla en HTML.

1. table: la etiqueta HTML table representa la tabla completa en HTML. Esta es la etiqueta de inicio de la tabla dentro de la cual se usarán todas las demás etiquetas relacionadas con la tabla (como thead, tr, td, etc.) dependiendo de cómo desee estructurar la tabla.
2. thead: el thead representa el encabezado de la tabla. Esta etiqueta se usa para agregar encabezados a las tablas. Por lo general, representa la primera fila de la tabla. Para agregar datos dentro de la etiqueta thead, usamos la etiqueta th. Si no desea agregar un encabezado a sus tablas, puede omitir la etiqueta thead.
3. tbody: el tbody significa cuerpo de la mesa. Esta etiqueta representa todo el cuerpo o el contenido de la tabla.
4. tfoot: el tfoot significa pie de tabla. Por lo general, representa la última fila de la tabla. Esta etiqueta es opcional. No usamos esta etiqueta con tanta frecuencia.
5. tr: El tr significa fila de la tabla. Esto representa la fila completa de la tabla. Para insertar datos en la tabla ya sea dentro del encabezado, cuerpo o pie de página de la tabla, primero tenemos que crear una fila, y luego dentro de esa fila, podemos insertar los datos con la ayuda de la etiqueta td.
6. th: El th sólo se utiliza dentro de la etiqueta thead. Representa la celda única de la fila de encabezado. Hace que los encabezados de la tabla estén en negrita.
7. td: El td representa los datos de la tabla. Representa la celda única de la tabla. Es similar a th, pero la única diferencia es que th se usa solo dentro de la etiqueta thead y td se usa en otros lugares. La etiqueta td se puede utilizar con las etiquetas tbody y tfoot.

Si combina todas estas etiquetas en forma anidada, es decir, una dentro de otra, así es como se verá la tabla una vez creada.

El borde rojo representa toda la tabla. Dentro de esto, tenemos 3 etiquetas, el encabezado de la tabla (thead), el cuerpo de la tabla (tbody) y el pie de la tabla (tfoot), que se representan con el borde verde. Para insertar datos dentro de estas tres etiquetas, primero tenemos que crear una fila con la ayuda de la etiqueta tr. Esta fila se representa con el borde amarillo. Y luego, para insertar datos en el encabezado de la tabla, usamos la etiqueta th, y para insertar datos dentro del cuerpo de la tabla o en el pie de la tabla, usamos las etiquetas td. Se muestra con la ayuda de color gris.

Crear una tabla usando JavaScript

Para crear un elemento HTML usando JavaScript tenemos que usar un método llamado document.createElement() que toma el nombre de la etiqueta que es una cadena como parámetro. Por ejemplo, queremos crear una tabla, por lo que pasaremos la cadena table como entrada al método createElement() document.createElement('table').

Ahora creemos la siguiente tabla usando JavaScript.

La tabla de arriba tiene 4 filas. La primera fila contiene todo el encabezado y las siguientes tres filas contienen los datos.

A continuación tenemos el código HTML, CSS y JS. Dentro de nuestra etiqueta body, inicialmente no tenemos nada. Crearemos nuestra tabla dentro de JavaScript y, al final, agregaremos la tabla completa a la etiqueta body para que sea visible en la página web. Dentro de la etiqueta style, le hemos dado un estilo básico a nuestra mesa.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        th, td{
            padding: 10px 20px;
            border: 1px solid #000;
        }
    </style>

</head>
<body id="body">

    <script src="script.js"></script>  
</body>
</html>

Para crear una tabla, primero crearemos la etiqueta table. Luego almacenaremos esta etiqueta en una variable table para que luego podamos usarla. De la misma forma, también crearemos etiquetas thead y tbody y las almacenaremos dentro de las variables. Luego agregamos thead y tbody a la etiqueta table.

let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

table.appendChild(thead);
table.appendChild(tbody);

// Adding the entire table to the body tag
document.getElementById('body').appendChild(table);

Debe adjuntar o agregar esa tabla que ha creado en JavaScript a la etiqueta body. Primero tenemos que obtener la etiqueta del cuerpo HTML usando su id, y luego agregaremos la tabla usando algo llamado método appendChild(). Como ya hemos almacenado nuestra tabla dentro de la variable table, solo tendremos que agregar la tabla que creamos como hijo a este elemento del cuerpo.

En este punto, así es como se ve la estructura de nuestra tabla.

Para agregar filas y datos a nuestra tabla, crearemos filas de tabla (tr), encabezado de tabla (th) y etiquetas de datos de tabla (td) usando el método createElement(), y luego agregue los datos dentro de esos elementos con la ayuda de la propiedad innerHTML.

// Creating and adding data to first row of the table
let row_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML = 'Sr. No.';
let heading_2 = document.createElement('th');
heading_2.innerHTML = 'Name';
let heading_3 = document.createElement('th');
heading_3.innerHTML = 'Company';

row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
row_1.appendChild(heading_3);
thead.appendChild(row_1);


// Creating and adding data to second row of the table
let row_2 = document.createElement('tr');
let row_2_data_1 = document.createElement('td');
row_2_data_1.innerHTML = '1.';
let row_2_data_2 = document.createElement('td');
row_2_data_2.innerHTML = 'James Clerk';
let row_2_data_3 = document.createElement('td');
row_2_data_3.innerHTML = 'Netflix';

row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
row_2.appendChild(row_2_data_3);
tbody.appendChild(row_2);


// Creating and adding data to third row of the table
let row_3 = document.createElement('tr');
let row_3_data_1 = document.createElement('td');
row_3_data_1.innerHTML = '2.';
let row_3_data_2 = document.createElement('td');
row_3_data_2.innerHTML = 'Adam White';
let row_3_data_3 = document.createElement('td');
row_3_data_3.innerHTML = 'Microsoft';

row_3.appendChild(row_3_data_1);
row_3.appendChild(row_3_data_2);
row_3.appendChild(row_3_data_3);
tbody.appendChild(row_3);

Después de insertar los datos usando la propiedad innerHTML, agregaremos esos datos a sus respectivas filas. Por ejemplo, primero, agregamos los títulos (es decir, heading_1, heading_2, heading_3) a row_1. Y luego agregamos nuestra primera fila, es decir, row_1, a la etiqueta thead cuando era niño.

Del mismo modo, estamos creando otras 2 filas, es decir, row_2 y row_3 y luego agregando (row_2_data_1, row_2_data_2, row_2_data_3) y (row_3_data_1, row_3_data_2, row_3_data_3) respectivamente a estas 2 filas. Y al final, agregamos estas 2 filas a la etiqueta tbody, ya que es para niños.

Ahora, así es como se ven la tabla y su estructura HTML en la consola del desarrollador.

A la izquierda, tenemos la tabla y, a la derecha, tenemos el código generado por el navegador. Puede personalizar el código js según cómo desee que se vea la tabla. Solo hemos utilizado 3 métodos JavaScript (createElement(), innerHTML, appendChild()) para lograr esto.