{"id":176456,"date":"2026-01-28T12:32:46","date_gmt":"2026-01-28T11:32:46","guid":{"rendered":"https:\/\/liora.io\/es\/?p=176456"},"modified":"2026-02-27T15:56:51","modified_gmt":"2026-02-27T14:56:51","slug":"tablas-html-que-son","status":"publish","type":"post","link":"https:\/\/liora.io\/es\/tablas-html-que-son","title":{"rendered":"Las tablas HTML: \u00bfQu\u00e9 son? \u00bfC\u00f3mo funcionan?"},"content":{"rendered":"\n<p><b>Las tablas HTML se utilizan para estructurar y presentar datos en la web. Aunque su equivalente en CSS (como los grids o los flexbox) son a menudo preferidos por ser m\u00e1s modernos, las tablas HTML siguen siendo ideales para organizar informaci\u00f3n en forma de tabla.<\/b><\/p>\n\n\n\n<p>Permiten presentar los datos de manera estructurada organiz\u00e1ndolos en filas y columnas. Esto facilita la presentaci\u00f3n de datos complejos y permite al usuario comprender mejor la informaci\u00f3n proporcionada. A menudo se utilizan para tablas de comparaci\u00f3n, informes financieros o simplemente para mostrar informaci\u00f3n bien ordenada.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/liora.io\/es\/nuestros-cursos-de-data\">M\u00e1s informaci\u00f3n sobre HTML<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-es-la-estructura-de-una-tabla-html\">\u00bfC\u00f3mo es la estructura de una Tabla HTML?<\/h2>\n\n\n\n<p>Las tablas HTML se construyen utilizando etiquetas anidadas que definen los diferentes niveles de la estructura. Aqu\u00ed est\u00e1n los principales elementos que puedes usar para construir una tabla.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-lt-table-el-contenedor-principal\"><span style=\"font-size: large\">1.<\/span> &lt;<span style=\"color: #008000\">table<\/span> &gt; : El contenedor principal<\/h3>\n\n\n\n<p>Esta etiqueta es el contenedor principal de toda tabla HTML. Contiene todos los elementos de la tabla, incluidos las filas, columnas y celdas. Por defecto, una tabla no tiene un borde visible. Para a\u00f1adirle uno, es posible utilizar el atributo <i>border<\/i>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-lt-thead-lt-tbody-y-lt-tfoot-organizacion-de-la-tabla\"><span style=\"font-size: large\">2.<\/span> &lt;<span style=\"color: #008000\">thead<\/span> &gt;, &lt;<span style=\"color: #008000\">tbody<\/span> &gt; y &lt;<span style=\"color: #008000\">tfoot<\/span> &gt; : Organizaci\u00f3n de la tabla<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;thead&gt; : Contiene los encabezados de las columnas. Usar esta etiqueta permite agrupar los elementos que sirven como encabezado de la tabla. Las etiquetas en &lt;thead&gt; son a menudo &lt;th&gt; (table headers).<\/li>\n\n\n\n<li>&lt;tbody&gt; : Contiene el cuerpo principal de la tabla, es aqu\u00ed donde los datos generalmente se colocan. Las filas de datos se crean con la etiqueta &lt;tr&gt;.<\/li>\n\n\n\n<li>&lt;tfoot&gt; : Se utiliza para agrupar la informaci\u00f3n que va al final de la tabla, como un resumen o totales.<\/li>\n<\/ul>\n\n\n\n<p>Aqu\u00ed un ejemplo de una tabla:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;table border=\"1\"&gt;\n &nbsp;&lt;thead&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Variable&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Tipo&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Descripci\u00f3n&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/thead&gt;\n &nbsp;&lt;tbody&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Edad&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Entero&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Representa la edad de una persona en a\u00f1os&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Ingreso&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Flotante&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Representa el ingreso anual en euro&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/tbody&gt;\n &nbsp;&lt;tfoot&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td colspan=\"2\"&gt;N\u00famero total de variables&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/tfoot&gt;\n&lt;\/table&gt;<\/pre>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Aqu\u00ed, &lt;tr&gt;, &lt;th&gt;, y &lt;td&gt; crean respectivamente filas, celdas de encabezado (a menudo estilizadas en negrita por defecto) y celdas de datos.<\/p>\n\n\n\n<p>Aqu\u00ed est\u00e1 esta simple tabla concretamente:<\/p>\n\n\n\n<table border=\"1\">\n \u00a0<thead>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th>Variable<\/th>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th>Tipo<\/th>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th>Descripci\u00f3n<\/th>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0<\/thead>\n \u00a0<tbody>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Edad<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Entero<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Representa la edad de una persona en a\u00f1os<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Ingreso<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Flotante<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Representa el ingreso anual en euro<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0<\/tbody>\n \u00a0<tfoot>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td colspan=\"2\">N\u00famero total de variables<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>2<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0<\/tfoot>\n<\/table>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/liora.io\/es\/nuestros-cursos-de-data\">Formaci\u00f3n en HTML<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-manejar-tablas-complejas\">\u00bfC\u00f3mo manejar tablas complejas?<\/h2>\n\n\n\n<p>Las tablas HTML pueden volverse bastante complejas cuando deben representar grandes cantidades de datos o relaciones m\u00e1s detalladas entre las diferentes columnas y filas. Aqu\u00ed un ejemplo de una tabla compleja que utiliza columnas fusionadas y filas fusionadas:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;table id=\"miTabla\" border=\"1\"&gt;\n &nbsp;&lt;thead&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th rowspan=\"2\"&gt;Nombre&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th colspan=\"2\"&gt;Informaci\u00f3n Profesional&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th rowspan=\"2\"&gt;Salario (\u20ac)&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Trabajo&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Nivel&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/thead&gt;\n &nbsp;&lt;tbody&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Bob Sponge&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Analyst&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Junior&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;45 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alice Wonderland&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Scientist&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Senior&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;60 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Bart Simpson&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Engineer&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Interm\u00e9diaire&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;55 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Rick Sanchez&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Architecte Big Data&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Expert&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;75 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Morty Smith&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Machine Learning Engineer&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Junior&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;70 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Fusi\u00f3n de columnas<\/b> colspan : En el encabezado &lt;thead&gt;, la celda \u00abInformaci\u00f3n Profesional\u00bb cubre dos columnas (\u00abTrabajo\u00bb y \u00abNivel\u00bb). Esto se realiza gracias al atributo colspan=\u00ab2\u00bb.<\/li>\n\n\n\n<li><b>Fusi\u00f3n de filas<\/b> rowspan : La celda \u00abNombre\u00bb est\u00e1 fusionada sobre dos filas de encabezado, gracias a rowspan=\u00ab2\u00bb, para indicar que el nombre de cada persona es independiente de las subcategor\u00edas (trabajo y nivel).<\/li>\n\n\n\n<li><b>Estructura m\u00e1s compleja <\/b>: Este tipo de tabla es particularmente \u00fatil para presentar datos con subcategor\u00edas, como el nivel de competencia o detalles adicionales sobre cada entrada.<\/li>\n\n\n\n<li>Usando t\u00e9cnicas avanzadas como colspan y rowspan, puedes crear tablas que no solo estructuran tus datos de manera clara, sino que tambi\u00e9n proporcionan un nivel de informaci\u00f3n m\u00e1s complejo, manteni\u00e9ndose f\u00e1cil de leer para los usuarios.<\/li>\n<\/ul>\n\n\n\n<p>El resultado es el siguiente:<\/p>\n\n\n\n<table id=\"miTabla\" border=\"1\">\n \u00a0<thead>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th rowspan=\"2\">Nombre<\/th>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th colspan=\"2\">Informaci\u00f3n Profesional<\/th>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th rowspan=\"2\">Salario (\u20ac)<\/th>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th>Trabajo<\/th>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th>Nivel<\/th>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0<\/thead>\n \u00a0<tbody>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Bob Sponge<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Data Analyst<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Junior<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>45 000<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Alice Wonderland<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Data Scientist<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Senior<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>60 000<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Bart Simpson<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Data Engineer<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Interm\u00e9diaire<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>55 000<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Rick Sanchez<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Architecte Big Data<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Expert<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>75 000<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Morty Smith<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Machine Learning Engineer<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Junior<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>70 000<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0<\/tbody>\n<\/table>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/liora.io\/es\/nuestros-cursos-de-data\">Saber m\u00e1s sobre HTML<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-estilizar-las-tablas-html\">\u00bfC\u00f3mo estilizar las tablas HTML?<\/h2>\n\n\n\n<p>Aunque algunas propiedades pueden permitir personalizar una tabla HTML, el m\u00e9todo preferido a menudo es el CSS.<\/p>\n\n\n\n<p>El siguiente ejemplo muestra una personalizaci\u00f3n relativamente simple de una tabla HTML:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;style&gt;\n &nbsp;table {\n &nbsp;&nbsp;&nbsp;width: 100%;\n &nbsp;&nbsp;&nbsp;border-collapse: collapse;\n &nbsp;}\n &nbsp;th, td {\n &nbsp;&nbsp;&nbsp;border: 1px solid <b>black<\/b>;\n &nbsp;&nbsp;&nbsp;padding: 10px;\n &nbsp;&nbsp;&nbsp;text-align: left;\n &nbsp;}\n &nbsp;th {\n &nbsp;&nbsp;&nbsp;background-color: #f2f2f2;\n &nbsp;}\n&lt;\/style&gt;\n&lt;table&gt;\n &nbsp;&lt;thead&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Nombre&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Trabajo&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Salario (\u20ac)&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/thead&gt;\n &nbsp;&lt;tbody&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Bob Sponge&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Analyst&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;45 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alice Wonderland&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Scientist&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;60 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Bart Simpson&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Engineer&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;55 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Rick Sanchez&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Architecte Big Data&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;75 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Morty Smith&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Machine Learning Engineer&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;70 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>El resultado ya parece menos austero:<\/p>\n\n\n\n\n \u00a0table {\n \u00a0\u00a0\u00a0width: 100%;\n \u00a0\u00a0\u00a0border-collapse: collapse;\n \u00a0}\n \u00a0th, td {\n \u00a0\u00a0\u00a0border: 1px solid black;\n \u00a0\u00a0\u00a0padding: 10px;\n \u00a0\u00a0\u00a0text-align: left;\n \u00a0}\n \u00a0th {\n \u00a0\u00a0\u00a0background-color: #f2f2f2;\n \u00a0}\n\n<table>\n \u00a0<thead>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th>Nombre<\/th>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th>Trabajo<\/th>\n \u00a0\u00a0\u00a0\u00a0\u00a0<th>Salario (\u20ac)<\/th>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0<\/thead>\n \u00a0<tbody>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Bob Sponge<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Data Analyst<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>45 000<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Alice Wonderland<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Data Scientist<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>60 000<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Bart Simpson<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Data Engineer<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>55 000<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Rick Sanchez<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Architecte Big Data<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>75 000<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0\u00a0\u00a0<tr>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Morty Smith<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>Machine Learning Engineer<\/td>\n \u00a0\u00a0\u00a0\u00a0\u00a0<td>70 000<\/td>\n \u00a0\u00a0\u00a0<\/tr>\n \u00a0<\/tbody>\n<\/table>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Combinando el uso fino del CSS con las tablas, ser\u00e1 posible obtener resultados visualmente muy atractivos, resaltar ciertos elementos, y mucho m\u00e1s.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/liora.io\/es\/nuestros-cursos-de-data\">Ampl\u00ede sus conocimientos de HTML<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-garantizar-la-accesibilidad-y-seguir-buenas-practicas\">\u00bfC\u00f3mo garantizar la accesibilidad y seguir buenas pr\u00e1cticas?<\/h2>\n\n\n\n<p>Las tablas pueden plantear problemas de accesibilidad si no est\u00e1n bien estructuradas. Esto puede ser a\u00fan m\u00e1s impactante seg\u00fan los navegadores, pero especialmente en lo que respecta a los usuarios que usan lectores de pantalla. Se trata de softwares que permiten a las personas con discapacidades visuales navegar por un sitio web. Este software convierte lo que se ve en la pantalla en salida de audio o braille.<\/p>\n\n\n\n<p>Aqu\u00ed algunas buenas pr\u00e1cticas para hacer tus tablas accesibles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Usa encabezados claros<\/b> : Las etiquetas &lt;th&gt; ayudan a los lectores de pantalla a comprender los encabezados de columna. Cada encabezado debe describir con precisi\u00f3n el contenido de la columna o de la fila, para que los usuarios puedan navegar f\u00e1cilmente dentro de la tabla.<\/li>\n\n\n\n<li><b>Agrega atributos scope<\/b> : Usa scope=\u00abcol\u00bb o scope= \u00abrow\u00bb para indicar a qu\u00e9 columna o fila pertenece un encabezado. Esto ayuda a los lectores de pantalla a asociar cada celda de datos con su encabezado correspondiente. Por ejemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;table border=\"1\"&gt;\n &nbsp;&lt;thead&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Nombre&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Trabajo&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Salario (\u20ac)&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/thead&gt;\n &nbsp;&lt;tbody&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alice Wonderland&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Scientist&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;60 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><b>Agrega un <\/b>&lt;caption&gt; : Esta etiqueta se puede usar para proporcionar un t\u00edtulo descriptivo a la tabla. Esto permite a los usuarios, incluidos aquellos que usan lectores de pantalla, comprender r\u00e1pidamente el prop\u00f3sito de la tabla. Por ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;table border=\"1\"&gt;\n &nbsp;&lt;caption&gt;Tabla de salarios de los empleados del \u00e1rea de Datos&lt;\/caption&gt;\n &nbsp;&lt;thead&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Nombre&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Trabajo&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Salario (\u20ac)&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/thead&gt;\n &nbsp;&lt;tbody&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alice Wonderland&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Scientist&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;60 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Prioriza el CSS para la personalizaci\u00f3n <\/b>: Mant\u00e9n el HTML simple y usa el CSS para la personalizaci\u00f3n. Esto mejora el mantenimiento y hace que el c\u00f3digo sea m\u00e1s accesible. Por ejemplo, puedes estilizar tus tablas con CSS para hacerlas m\u00e1s atractivas sin sobrecargar el HTML.<\/li>\n\n\n\n<li><b>Tablas complejas y asociaci\u00f3n de encabezados y celdas<\/b> : Cuando trabajas con tablas complejas, donde los datos se organizan en varios niveles, es \u00fatil asociar cada celda de datos con su encabezado utilizando los atributos <i>headers<\/i> e <i>id<\/i>. Esto garantiza una mejor navegaci\u00f3n para los usuarios de lectores de pantalla. Por ejemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;table border=\"1\"&gt;\n &nbsp;&lt;thead&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th id=\"nombre\"&gt;Nombre&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th id=\"trabajo\"&gt;Trabajo&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th id=\"salario\"&gt;Salario Promedio (\u20ac)&lt;\/th&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/thead&gt;\n &nbsp;&lt;tbody&gt;\n &nbsp;&nbsp;&nbsp;&lt;tr&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td headers=\"nombre\"&gt;Alice Wonderland&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td headers=\"trabajo\"&gt;Data Scientist&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td headers=\"salario\"&gt;45 000&lt;\/td&gt;\n &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n &nbsp;&lt;\/tbody&gt;\n&lt;\/table&gt;<\/pre>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/liora.io\/es\/nuestros-cursos-de-data\">Adquirir conocimientos de HTML<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tablas-y-datos-dinamicos\">Tablas y datos din\u00e1micos<\/h2>\n\n\n\n<p>Puede ser \u00fatil a\u00f1adir dinamismo a las tablas propuestas. Con JavaScript, puede a\u00f1adir o eliminar filas de forma din\u00e1mica, lo que hace que las interfaces sean m\u00e1s interactivas.<\/p>\n\n\n\n<p>He aqu\u00ed un ejemplo de un sencillo script que a\u00f1ade una fila a una tabla:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;button onclick=\"a\u00f1adirFila()\"&gt;A\u00f1adir una fila&lt;\/button&gt;\n&lt;style&gt;\n &nbsp;table {\n &nbsp;&nbsp;&nbsp;width: 100%;\n &nbsp;&nbsp;&nbsp;border-collapse: collapse;\n &nbsp;}\n &nbsp;th, td {\n &nbsp;&nbsp;&nbsp;border: 1px solid <b>black<\/b>;\n &nbsp;&nbsp;&nbsp;padding: 10px;\n &nbsp;&nbsp;&nbsp;text-align: left;\n &nbsp;}\n &nbsp;th {\n &nbsp;&nbsp;&nbsp;background-color: #f2f2f2;\n &nbsp;}\n&lt;\/style&gt;<\/pre>\n\n\n\n<p>&lt;table id=\u00bbmiTabla\u00bb border=\u00bb1&#8243;&gt;<br>\u00a0&lt;thead&gt;<br>\u00a0\u00a0\u00a0&lt;tr&gt;<br>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Nombre&lt;\/th&gt;<br>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Trabajo&lt;\/th&gt;<br>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Salario (\u20ac)&lt;\/th&gt;<br>\u00a0\u00a0\u00a0&lt;\/tr&gt;<br>\u00a0&lt;\/thead&gt;<br>\u00a0&lt;tbody&gt;<br>\u00a0\u00a0\u00a0&lt;tr&gt;<br>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Alice Wonderland&lt;\/td&gt;<br>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Data Scientist&lt;\/td&gt;<br>\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;60 000&lt;\/td&gt;<br>\u00a0\u00a0\u00a0&lt;\/tr&gt;<br>\u00a0&lt;\/tbody&gt;<br>&lt;\/table&gt;<\/p>\n\n\n\n<p>&lt;script&gt;<br>&nbsp;<b>function<\/b> a\u00f1adirFila() {<br>&nbsp;&nbsp;&nbsp;<b>var<\/b> table <b>=<\/b> document.getElementById(\u00abmiTabla\u00bb).getElementsByTagName(&#8216;tbody&#8217;)[0];<br>&nbsp;&nbsp;&nbsp;<b>var<\/b> nuevaFila <b>=<\/b> table.insertRow();<br>&nbsp;&nbsp;&nbsp;<b>var<\/b> celda1 <b>=<\/b> nuevaFila.insertCell(0);<br>&nbsp;&nbsp;&nbsp;<b>var<\/b> celda2 <b>=<\/b> nuevaFila.insertCell(1);<br>&nbsp;&nbsp;&nbsp;<b>var<\/b> celda3 <b>=<\/b> nuevaFila.insertCell(2);<br>&nbsp;&nbsp; celda1.innerHTML <b>=<\/b> \u00abNombre Apellido\u00bb;<br>&nbsp;&nbsp; celda2.innerHTML <b>=<\/b> \u00abData Engineer\u00bb;<br>&nbsp;&nbsp; celda3.innerHTML <b>=<\/b> \u00ab55 000\u00bb;<br>&nbsp;}<br>&lt;\/script&gt;<\/p>\n\n\n\n<p>El bot\u00f3n se utilizar\u00e1 para a\u00f1adir una nueva l\u00ednea, en este ejemplo con valores por defecto.<\/p>\n\n\n\n<button>A\u00f1adir una fila<\/button>\n\n \u00a0table {\n \u00a0\u00a0\u00a0width: 100%;\n \u00a0\u00a0\u00a0border-collapse: collapse;\n \u00a0}\n \u00a0th, td {\n \u00a0\u00a0\u00a0border: 1px solid black;\n \u00a0\u00a0\u00a0padding: 10px;\n \u00a0\u00a0\u00a0text-align: left;\n \u00a0}\n \u00a0th {\n \u00a0\u00a0\u00a0background-color: #f2f2f2;\n \u00a0}\n\n\n<table id=\"miTabla\" border=\"1\">\n\u00a0<thead>\n\u00a0\u00a0\u00a0<tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0<th>Nombre<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0<th>Trabajo<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0<th>Salario (\u20ac)<\/th>\n\u00a0\u00a0\u00a0<\/tr>\n\u00a0<\/thead>\n\u00a0<tbody>\n\u00a0\u00a0\u00a0<tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0<td>Alice Wonderland<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0<td>Data Scientist<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0<td>60 000<\/td>\n\u00a0\u00a0\u00a0<\/tr>\n\u00a0<\/tbody>\n<\/table>\n\n<script>\n\u00a0function a\u00f1adirFila() {\n\u00a0\u00a0\u00a0var table = document.getElementById(\"miTabla\").getElementsByTagName('tbody')[0];\n\u00a0\u00a0\u00a0var nuevaFila = table.insertRow();\n\u00a0\u00a0\u00a0var celda1 = nuevaFila.insertCell(0);\n\u00a0\u00a0\u00a0var celda2 = nuevaFila.insertCell(1);\n\u00a0\u00a0\u00a0var celda3 = nuevaFila.insertCell(2);\n\u00a0\u00a0 celda1.innerHTML = \"Nombre Apellido\";\n\u00a0\u00a0 celda2.innerHTML = \"Data Engineer\";\n\u00a0\u00a0 celda3.innerHTML = \"55 000\";\n\u00a0}\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Las tablas HTML son herramientas poderosas para presentar datos de forma estructurada, facilitando la legibilidad y la comprensi\u00f3n de la informaci\u00f3n. Conociendo los elementos b\u00e1sicos como &lt;table&gt;, &lt;thead&gt;, &lt;tbody&gt;, &lt;tr&gt;, &lt;th&gt; y &lt;td&gt;, as\u00ed como conceptos m\u00e1s avanzados como colspan y rowspan, podr\u00e1s crear tablas sofisticadas y accesibles. Adem\u00e1s, al combinar <b>CSS <\/b>para la personalizaci\u00f3n gr\u00e1fica y <b>JavaScript <\/b>para agregar interactividad, tus tablas podr\u00e1n ser m\u00e1s din\u00e1micas y funcionales. Siguiendo buenas pr\u00e1cticas, especialmente relacionadas con la accesibilidad, tus tablas ser\u00e1n utilizables por una amplia variedad de usuarios y en una gran cantidad de navegadores.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/liora.io\/es\/nuestros-cursos-de-data\">Dominio de HTML<\/a><\/div>\n<\/div>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfC\u00f3mo es la estructura de una Tabla HTML?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Las tablas HTML se construyen con etiquetas anidadas. El contenedor principal es <table>. Para organizar el contenido, se usan <thead> (encabezados de columna, con <th>), <tbody> (cuerpo con los datos, en filas <tr> y celdas <td>) y <tfoot> (para res\u00famenes o totales). Por defecto, las tablas no tienen bordes visibles, pero se pueden a\u00f1adir con el atributo 'border' o con CSS.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfC\u00f3mo manejar tablas complejas?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Para tablas complejas se utilizan los atributos de fusi\u00f3n: 'colspan' para fusionar columnas horizontalmente, y 'rowspan' para fusionar filas verticalmente. Esto permite crear estructuras con subcategor\u00edas, como encabezados que agrupan varias columnas o celdas que abarcan m\u00faltiples filas, manteniendo la claridad en la presentaci\u00f3n de datos con relaciones detalladas.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfC\u00f3mo estilizar las tablas HTML?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Aunque las tablas tienen propiedades b\u00e1sicas, el m\u00e9todo preferido para personalizarlas es CSS. Se pueden aplicar estilos como ancho completo (width: 100%), border-collapse: collapse para unificar bordes, padding en celdas, alineaci\u00f3n de texto y colores de fondo para encabezados. Combinando CSS con HTML se obtienen tablas visualmente atractivas y bien estructuradas.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfC\u00f3mo garantizar la accesibilidad y seguir buenas pr\u00e1cticas?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Para tablas accesibles se recomienda: usar encabezados claros con <th>, a\u00f1adir atributos 'scope' (scope='col' o 'row') para asociar encabezados con celdas, incluir un <caption> descriptivo, priorizar CSS para la personalizaci\u00f3n manteniendo el HTML simple, y en tablas complejas usar los atributos 'headers' e 'id' para vincular cada celda con su encabezado correspondiente, facilitando la navegaci\u00f3n con lectores de pantalla.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Tablas y datos din\u00e1micos\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Con JavaScript se puede a\u00f1adir dinamismo a las tablas, como agregar o eliminar filas de forma interactiva. Mediante funciones que acceden al elemento <tbody> y utilizan m\u00e9todos como insertRow() e insertCell(), es posible modificar el contenido de la tabla en respuesta a acciones del usuario, creando interfaces m\u00e1s interactivas y actualizables sin recargar la p\u00e1gina.\"\n      }\n    }\n  ]\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Las tablas HTML se utilizan para estructurar y presentar datos en la web. Aunque su equivalente en CSS (como los grids o los flexbox) son a menudo preferidos por ser m\u00e1s modernos, las tablas HTML siguen siendo ideales para organizar informaci\u00f3n en forma de tabla.<\/p>\n","protected":false},"author":85,"featured_media":176458,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"editor_notices":[],"footnotes":""},"categories":[2439],"class_list":["post-176456","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud-dev"],"acf":[],"_links":{"self":[{"href":"https:\/\/liora.io\/es\/wp-json\/wp\/v2\/posts\/176456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liora.io\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liora.io\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liora.io\/es\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/liora.io\/es\/wp-json\/wp\/v2\/comments?post=176456"}],"version-history":[{"count":5,"href":"https:\/\/liora.io\/es\/wp-json\/wp\/v2\/posts\/176456\/revisions"}],"predecessor-version":[{"id":184718,"href":"https:\/\/liora.io\/es\/wp-json\/wp\/v2\/posts\/176456\/revisions\/184718"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/liora.io\/es\/wp-json\/wp\/v2\/media\/176458"}],"wp:attachment":[{"href":"https:\/\/liora.io\/es\/wp-json\/wp\/v2\/media?parent=176456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liora.io\/es\/wp-json\/wp\/v2\/categories?post=176456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}