{"id":176456,"date":"2024-12-05T07:30:00","date_gmt":"2024-12-05T06:30:00","guid":{"rendered":"https:\/\/datascientest.com\/es\/?p=176456"},"modified":"2024-11-29T16:54:06","modified_gmt":"2024-11-29T15:54:06","slug":"tablas-html-que-son","status":"publish","type":"post","link":"https:\/\/datascientest.com\/es\/tablas-html-que-son","title":{"rendered":"Las tablas HTML: \u00bfQu\u00e9 son? \u00bfC\u00f3mo funcionan?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"176456\" class=\"elementor elementor-176456\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c8b19aa e-flex e-con-boxed e-con\" data-id=\"c8b19aa\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-64b3980 elementor-widget elementor-widget-text-editor\" data-id=\"64b3980\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<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><p><span style=\"font-weight: 400;\">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.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f353c63 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"f353c63\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/es\/nuestros-cursos-de-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">M\u00e1s informaci\u00f3n sobre HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d335809 e-flex e-con-boxed e-con\" data-id=\"d335809\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a99b355 elementor-widget elementor-widget-heading\" data-id=\"a99b355\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h3 class=\"elementor-heading-title elementor-size-default\">\u00bfC\u00f3mo es la estructura de una Tabla HTML?\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-358dba1 elementor-widget elementor-widget-text-editor\" data-id=\"358dba1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61e09d9 elementor-widget elementor-widget-heading\" data-id=\"61e09d9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\"><font size=\"4\">1. <<span style=\"color: #008000;\">table<\/span> > : El contenedor principal<\/font><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39b5c3f elementor-widget elementor-widget-text-editor\" data-id=\"39b5c3f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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 <\/span><i><span style=\"font-weight: 400;\">border<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68fe065 elementor-widget elementor-widget-heading\" data-id=\"68fe065\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\"><font size=\"4\">2. <<span style=\"color: #008000;\">thead<\/span> >, <<span style=\"color: #008000;\">tbody<\/span> > et <<span style=\"color: #008000;\">tfoot<\/span> > : Organizaci\u00f3n de la tabla<\/font><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e03930 elementor-widget elementor-widget-text-editor\" data-id=\"1e03930\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">thead<\/span>&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;<span style=\"color: #008000;\">thead<\/span>&gt; son a menudo &lt;<span style=\"color: #008000;\">th<\/span>&gt; (table headers).<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">tbody<\/span>&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;<span style=\"color: #008000;\">tr<\/span>&gt;.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">tfoot<\/span>&gt; : Se utiliza para agrupar la informaci\u00f3n que va al final de la tabla, como un resumen o totales.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8eb407 elementor-widget elementor-widget-text-editor\" data-id=\"e8eb407\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Aqu\u00ed un ejemplo de una tabla:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ae150e elementor-widget elementor-widget-text-editor\" data-id=\"8ae150e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Variable&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Tipo&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Descripci\u00f3n&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Edad&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Entero&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Representa la edad de una persona en a\u00f1os&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Ingreso&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Flotante&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Representa el ingreso anual en euro&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">colspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;N\u00famero total de variables&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;2&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-becf297 elementor-widget elementor-widget-text-editor\" data-id=\"becf297\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Aqu\u00ed, &lt;<span style=\"color: #008000;\">tr<\/span>&gt;, &lt;<span style=\"color: #008000;\">th<\/span>&gt;, y &lt;<span style=\"color: #008000;\">td<\/span>&gt; crean respectivamente filas, celdas de encabezado (a menudo estilizadas en negrita por defecto) y celdas de datos.<\/span><\/p><p><span style=\"font-weight: 400;\">Aqu\u00ed est\u00e1 esta simple tabla concretamente:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b190f08 elementor-widget elementor-widget-html\" data-id=\"b190f08\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<table border=\"1\">\r\n <thead>\r\n <tr>\r\n <th>Variable<\/th>\r\n <th>Tipo<\/th>\r\n <th>Descripci\u00f3n<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Edad<\/td>\r\n <td>Entero<\/td>\r\n <td>Representa la edad de una persona en a\u00f1os<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Ingreso<\/td>\r\n <td>Flotante<\/td>\r\n <td>Representa el ingreso anual en euros<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <tfoot>\r\n <tr>\r\n <td colspan=\"2\">N\u00famero total de variables<\/td>\r\n <td>2<\/td>\r\n <\/tr>\r\n <\/tfoot>\r\n<\/table>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a32aaa7 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"a32aaa7\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/es\/nuestros-cursos-de-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Formaci\u00f3n en HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d431d50 e-flex e-con-boxed e-con\" data-id=\"d431d50\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-42de34b elementor-widget elementor-widget-heading\" data-id=\"42de34b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u00bfC\u00f3mo manejar tablas complejas?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b3b633 elementor-widget elementor-widget-text-editor\" data-id=\"3b3b633\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d2fef0 elementor-widget elementor-widget-text-editor\" data-id=\"7d2fef0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"<span style=\"font-weight: 400;\">miTabla<\/span>\"<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span> <span style=\"font-weight: 400; color: #0000ff;\">rowspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Nombre&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">colspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Informaci\u00f3n Profesional&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">rowspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Salario (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Trabajo&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Nivel&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bob Sponge&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Analyst&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Junior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Senior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bart Simpson&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Interm\u00e9diaire&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;55 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Rick Sanchez&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Architecte Big Data&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Expert&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;75 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Morty Smith&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Machine Learning Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Junior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;70 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04b11ae elementor-widget elementor-widget-text-editor\" data-id=\"04b11ae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fusi\u00f3n de columnas<\/b><span style=\"font-weight: 400;\"><span style=\"color: #0000ff;\"> colspan<\/span> : En el encabezado &lt;<span style=\"color: #008000;\">thead<\/span>&gt;, la celda \u00abInformaci\u00f3n Profesional\u00bb cubre dos columnas (\u00abTrabajo\u00bb y \u00abNivel\u00bb). Esto se realiza gracias al atributo <span style=\"color: #0000ff;\">colspan<\/span>=<span style=\"color: #ff0000;\">\u00ab2\u00bb<\/span>.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fusi\u00f3n de filas<\/b><span style=\"font-weight: 400;\"> rowspan : La celda \u00abNombre\u00bb est\u00e1 fusionada sobre dos filas de encabezado, gracias a <span style=\"color: #0000ff;\">rowspan<\/span>=<span style=\"color: #ff0000;\">\u00ab2\u00bb<\/span>, para indicar que el nombre de cada persona es independiente de las subcategor\u00edas (trabajo y nivel).<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Estructura m\u00e1s compleja <\/b><span style=\"font-weight: 400;\">: Este tipo de tabla es particularmente \u00fatil para presentar datos con subcategor\u00edas, como el nivel de competencia o detalles adicionales sobre cada entrada.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Usando t\u00e9cnicas avanzadas como <span style=\"color: #0000ff;\">colspan<\/span> y <span style=\"color: #0000ff;\">rowspan<\/span>, 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.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e42222 elementor-widget elementor-widget-text-editor\" data-id=\"9e42222\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">El resultado es el siguiente:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46fb482 elementor-widget elementor-widget-html\" data-id=\"46fb482\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<table id=\"miTabla\" border=\"1\">\r\n <thead>\r\n <tr>\r\n <th rowspan=\"2\">Nombre<\/th>\r\n <th colspan=\"2\">Informaci\u00f3n Profesional<\/th>\r\n <th rowspan=\"2\">Salario (\u20ac)<\/th>\r\n <\/tr>\r\n <tr>\r\n <th>Trabajo<\/th>\r\n <th>Nivel<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Bob Sponge<\/td>\r\n <td>Data Analyst<\/td>\r\n <td>Junior<\/td>\r\n <td>45 000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Alice Wonderland<\/td>\r\n <td>Data Scientist<\/td>\r\n <td>Senior<\/td>\r\n <td>60 000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Bart Simpson<\/td>\r\n <td>Data Engineer<\/td>\r\n <td>Intermedio<\/td>\r\n <td>55 000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Rick Sanchez<\/td>\r\n <td>Arquitecto Big Data<\/td>\r\n <td>Experto<\/td>\r\n <td>75 000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Morty Smith<\/td>\r\n <td>Machine Learning Engineer<\/td>\r\n <td>Junior<\/td>\r\n <td>70 000<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abb6aa7 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"abb6aa7\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/es\/nuestros-cursos-de-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Saber m\u00e1s sobre HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-794e538 e-flex e-con-boxed e-con\" data-id=\"794e538\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3de9778 elementor-widget elementor-widget-heading\" data-id=\"3de9778\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u00bfC\u00f3mo estilizar las tablas HTML?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de5e6a1 elementor-widget elementor-widget-text-editor\" data-id=\"de5e6a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Aunque algunas propiedades pueden permitir personalizar una tabla HTML, el m\u00e9todo preferido a menudo es el CSS.<\/span><\/p><p><span style=\"font-weight: 400;\">El siguiente ejemplo muestra una personalizaci\u00f3n relativamente simple de una tabla HTML:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4ad8ac elementor-widget elementor-widget-text-editor\" data-id=\"e4ad8ac\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">width<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">100%<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border-collapse<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">collapse<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">1px<\/span> <span style=\"font-weight: 400; color: #0000ff;\">solid <\/span><span style=\"color: #800080;\"><b>black<\/b><\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">padding<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">10px<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">text-align<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">left<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">background-color<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">#f2f2f2<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Nombre&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Trabajo&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Salario (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bob Sponge&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Analyst&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bart Simpson&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;55 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Rick Sanchez&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Architecte Big Data&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;75 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Morty Smith&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Machine Learning Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;70 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc16bab elementor-widget elementor-widget-text-editor\" data-id=\"fc16bab\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">El resultado ya parece menos austero:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-474b7e2 elementor-widget elementor-widget-html\" data-id=\"474b7e2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n }\r\n th, td {\r\n border: 1px solid black;\r\n padding: 10px;\r\n text-align: left;\r\n }\r\n th {\r\n background-color: #f2f2f2;\r\n }\r\n<\/style>\r\n<table>\r\n <thead>\r\n <tr>\r\n <th>Nombre<\/th>\r\n <th>Trabajo<\/th>\r\n <th>Salario (\u20ac)<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Bob Sponge<\/td>\r\n <td>Data Analyst<\/td>\r\n <td>45 000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Alice Wonderland<\/td>\r\n <td>Data Scientist<\/td>\r\n <td>60 000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Bart Simpson<\/td>\r\n <td>Data Engineer<\/td>\r\n <td>55 000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Rick Sanchez<\/td>\r\n <td>Arquitecto Big Data<\/td>\r\n <td>75 000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Morty Smith<\/td>\r\n <td>Machine Learning Engineer<\/td>\r\n <td>70 000<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86b261e elementor-widget elementor-widget-text-editor\" data-id=\"86b261e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Combinando el uso fino del CSS con las tablas, ser\u00e1 posible obtener resultados visualmente muy atractivos, resaltar ciertos elementos, y mucho m\u00e1s.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38ff034 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"38ff034\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/es\/nuestros-cursos-de-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Ampl\u00ede sus conocimientos de HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-41e25ce e-flex e-con-boxed e-con\" data-id=\"41e25ce\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1c1356 elementor-widget elementor-widget-heading\" data-id=\"d1c1356\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u00bfC\u00f3mo garantizar la accesibilidad y seguir buenas pr\u00e1cticas?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-621d231 elementor-widget elementor-widget-text-editor\" data-id=\"621d231\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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.<\/span><\/p><p><span style=\"font-weight: 400;\">Aqu\u00ed algunas buenas pr\u00e1cticas para hacer tus tablas accesibles:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Usa encabezados claros<\/b><span style=\"font-weight: 400;\"> : Las etiquetas &lt;<span style=\"color: #008000;\">th<\/span>&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.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Agrega atributos scope<\/b><span style=\"font-weight: 400;\"> : Usa <span style=\"color: #0000ff;\">scope<\/span>=<span style=\"color: #ff0000;\">\u00abcol\u00bb<\/span> o <span style=\"color: #0000ff;\">scope<\/span>= <span style=\"color: #ff0000;\">\u00abrow<\/span>\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:<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a7d9b37 elementor-widget elementor-widget-text-editor\" data-id=\"a7d9b37\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Nombre&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Trabajo&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Salario (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25a8da9 elementor-widget elementor-widget-text-editor\" data-id=\"25a8da9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><b>Agrega un <\/b><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">caption<\/span>&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:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5357f1b elementor-widget elementor-widget-text-editor\" data-id=\"5357f1b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">caption<\/span><span style=\"font-weight: 400;\">&gt;Tabla de salarios de los empleados del \u00e1rea de Datos&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">caption<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Nombre&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Trabajo&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Salario (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbb3eda elementor-widget elementor-widget-text-editor\" data-id=\"dbb3eda\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Prioriza el CSS para la personalizaci\u00f3n <\/b><span style=\"font-weight: 400;\">: 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.<\/span><\/li><li><b>Tablas complejas y asociaci\u00f3n de encabezados y celdas<\/b><span style=\"font-weight: 400;\"> : 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 <\/span><i><span style=\"font-weight: 400;\">headers<\/span><\/i><span style=\"font-weight: 400;\"> e <\/span><i><span style=\"font-weight: 400;\">id<\/span><\/i><span style=\"font-weight: 400;\">. Esto garantiza una mejor navegaci\u00f3n para los usuarios de lectores de pantalla. Por ejemplo:<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2750a18 elementor-widget elementor-widget-text-editor\" data-id=\"2750a18\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"nombre\"<\/span><span style=\"font-weight: 400;\">&gt;Nombre&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"trabajo\"<\/span><span style=\"font-weight: 400;\">&gt;Trabajo&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"salario\"<\/span><span style=\"font-weight: 400;\">&gt;Salario Promedio (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"nombre\"<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"trabajo\"<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span> <span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"salario\"<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a06abf elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"6a06abf\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/es\/nuestros-cursos-de-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Adquirir conocimientos de HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8aad23d e-flex e-con-boxed e-con\" data-id=\"8aad23d\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8a50b6b elementor-widget elementor-widget-heading\" data-id=\"8a50b6b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Tablas y datos din\u00e1micos<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f809074 elementor-widget elementor-widget-text-editor\" data-id=\"f809074\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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.<\/span><\/p><p><span style=\"font-weight: 400;\">He aqu\u00ed un ejemplo de un sencillo script que a\u00f1ade una fila a una tabla:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc0b614 elementor-widget elementor-widget-text-editor\" data-id=\"bc0b614\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">button <\/span><span style=\"font-weight: 400; color: #0000ff;\">onclick<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"<span style=\"font-weight: 400;\">a\u00f1adirFila()<\/span>\"<\/span><span style=\"font-weight: 400;\">&gt;A\u00f1adir una fila&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">button<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">width<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">100%<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border-collapse<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">collapse<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">1px<\/span> <span style=\"font-weight: 400;\">solid<\/span> <b>black<\/b><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">padding<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">10px<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">text-align<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"color: #0000ff;\"><span style=\"font-weight: 400;\">left<\/span><span style=\"font-weight: 400;\">;<\/span><\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">background-color<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">#f2f2f2<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre><p style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\u00ab<span style=\"font-weight: 400;\">miTabla<\/span>\u00ab<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\u00ab1\u00bb<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Nombre&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Trabajo&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Salario (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p><p style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">script<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"color: #800080;\"><b>function<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\"><span style=\"font-weight: 400;\">a\u00f1adirFila<\/span><\/span><span style=\"font-weight: 400;\"><span style=\"color: #0000ff;\">()<\/span> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b> <\/span><span style=\"font-weight: 400; color: #0000ff;\">table<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #33cccc;\">document<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">getElementById<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #ff0000;\">\u00ab<span style=\"font-weight: 400;\">miTabla\u00bb<\/span><\/span><span style=\"font-weight: 400;\">)<span style=\"color: #993300;\">.<\/span><\/span><span style=\"font-weight: 400; color: #993300;\">getElementsByTagName<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8216;tbody&#8217;<\/span><span style=\"font-weight: 400;\">)[<\/span><span style=\"font-weight: 400; color: #008000;\">0<\/span><span style=\"font-weight: 400;\">];<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\"><span style=\"font-weight: 400;\">nuevaFila<\/span> <\/span><span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">table<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertRow<\/span><\/span><span style=\"font-weight: 400;\">();<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\"><span style=\"font-weight: 400;\">celda<\/span>1<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\"><span style=\"font-weight: 400;\">nuevaFila<\/span><\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">0<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\"><span style=\"font-weight: 400;\">celda<\/span>2<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\"><span style=\"font-weight: 400;\">nuevaFila<\/span><\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">1<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\"><span style=\"font-weight: 400;\">celda<\/span>3<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\"><span style=\"font-weight: 400;\">nuevaFila<\/span><\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">2<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0 <\/span><span style=\"font-weight: 400; color: #333399;\"><span style=\"font-weight: 400;\">celda<\/span>1<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #ff0000;\">\u00ab<span style=\"font-weight: 400;\">Nombre Apellido<\/span>\u00ab<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0 <\/span><span style=\"font-weight: 400; color: #333399;\"><span style=\"font-weight: 400;\">celda<\/span>2<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b> <\/span><span style=\"font-weight: 400; color: #ff0000;\">\u00abData Engineer\u00bb<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0 <\/span><span style=\"font-weight: 400; color: #333399;\"><span style=\"font-weight: 400;\">celda<\/span>3<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #ff0000;\">\u00ab55 000\u00bb<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">script<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc28361 elementor-widget elementor-widget-text-editor\" data-id=\"dc28361\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">El bot\u00f3n se utilizar\u00e1 para a\u00f1adir una nueva l\u00ednea, en este ejemplo con valores por defecto.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e55c499 elementor-widget elementor-widget-html\" data-id=\"e55c499\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<button onclick=\"a\u00f1adirFila()\">A\u00f1adir una fila<\/button>\r\n<style>\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n  th, td {\r\n    border: 1px solid black;\r\n    padding: 10px;\r\n    text-align: left;\r\n  }\r\n  th {\r\n    background-color: #f2f2f2;\r\n  }\r\n<\/style>\r\n<table id=\"miTabla\" border=\"1\">\r\n <thead>\r\n   <tr>\r\n     <th>Nombre<\/th>\r\n     <th>Trabajo<\/th>\r\n     <th>Salario (\u20ac)<\/th>\r\n   <\/tr>\r\n <\/thead>\r\n <tbody>\r\n   <tr>\r\n     <td>Alice Wonderland<\/td>\r\n     <td>Data Scientist<\/td>\r\n     <td>60 000<\/td>\r\n   <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n\r\n<script>\r\n function a\u00f1adirFila() {\r\n   var tabla = document.getElementById(\"miTabla\").getElementsByTagName('tbody')[0];\r\n   var nuevaFila = tabla.insertRow();\r\n   var celda1 = nuevaFila.insertCell(0);\r\n   var celda2 = nuevaFila.insertCell(1);\r\n   var celda3 = nuevaFila.insertCell(2);\r\n   celda1.innerHTML = \"Nombre Apellido\";\r\n   celda2.innerHTML = \"Ingeniero de Datos\";\r\n   celda3.innerHTML = \"55 000\";\r\n }\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d283d80 e-flex e-con-boxed e-con\" data-id=\"d283d80\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c5e292 elementor-widget elementor-widget-heading\" data-id=\"0c5e292\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Conclusi\u00f3n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-65c8e98 elementor-widget elementor-widget-text-editor\" data-id=\"65c8e98\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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;<span style=\"color: #008000;\">table<\/span>&gt;, &lt;<span style=\"color: #008000;\">thead<\/span>&gt;, &lt;<span style=\"color: #008000;\">tbody<\/span>&gt;, &lt;<span style=\"color: #008000;\">tr<\/span>&gt;, &lt;<span style=\"color: #008000;\">th<\/span>&gt; y &lt;<span style=\"color: #008000;\">td<\/span>&gt;, as\u00ed como conceptos m\u00e1s avanzados como colspan y rowspan, podr\u00e1s crear tablas sofisticadas y accesibles. Adem\u00e1s, al combinar <\/span><b>CSS <\/b><span style=\"font-weight: 400;\">para la personalizaci\u00f3n gr\u00e1fica y <\/span><b>JavaScript <\/b><span style=\"font-weight: 400;\">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.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-162a81f elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"162a81f\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/es\/nuestros-cursos-de-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Dominio de HTML<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f245ae2 e-flex e-con-boxed e-con\" data-id=\"f245ae2\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b4aa1fc elementor-widget elementor-widget-html\" data-id=\"b4aa1fc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"FAQPage\",\r\n  \"mainEntity\": [{\r\n    \"@type\": \"Question\",\r\n    \"name\": \"\u00bfQu\u00e9 es una tabla en HTML?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Una tabla en HTML es una estructura utilizada para organizar datos en forma de tabla. Est\u00e1 compuesta por filas (etiqueta <tr>), celdas de datos (etiqueta <td>) y celdas de encabezado (etiqueta <th>) para estructurar la informaci\u00f3n de manera clara y legible.\"\r\n    }\r\n  }, {\r\n    \"@type\": \"Question\",\r\n    \"name\": \"\u00bfC\u00f3mo crear una tabla b\u00e1sica en HTML?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Para crear una tabla b\u00e1sica en HTML, debes usar las etiquetas <table> para delimitar la tabla, <tr> para definir una fila, <td> para una celda de datos y <th> para una celda de encabezado. Por ejemplo:\\n```html\\n<table>\\n  <tr>\\n    <th>Nombre<\/th>\\n    <th>Edad<\/th>\\n  <\/tr>\\n  <tr>\\n    <td>John<\/td>\\n    <td>30<\/td>\\n  <\/tr>\\n<\/table>\\n```\"\r\n    }\r\n  }, {\r\n    \"@type\": \"Question\",\r\n    \"name\": \"\u00bfCu\u00e1les son las buenas pr\u00e1cticas para estructurar una tabla HTML?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Las buenas pr\u00e1cticas incluyen el uso de las etiquetas <thead>, <tbody> y <tfoot> para estructurar correctamente la tabla. Usa <thead> para los encabezados, <tbody> para los datos y <tfoot> para la informaci\u00f3n al final de la tabla, como los totales. Esto mejora la accesibilidad y la legibilidad del c\u00f3digo.\"\r\n    }\r\n  }, {\r\n    \"@type\": \"Question\",\r\n    \"name\": \"\u00bfC\u00f3mo estilizar una tabla en HTML con CSS?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Para estilizar una tabla en HTML, puedes usar propiedades de CSS como `border` para a\u00f1adir bordes, `padding` para espaciar el contenido de las celdas y `text-align` para alinear el texto. Por ejemplo:\\n```css\\ntable {\\n  border-collapse: collapse;\\n}\\nth, td {\\n  border: 1px solid black;\\n  padding: 8px;\\n  text-align: left;\\n}\\n```\"\r\n    }\r\n  }]\r\n}\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","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. Permiten presentar los datos de manera estructurada organiz\u00e1ndolos en filas [&hellip;]<\/p>\n","protected":false},"author":45,"featured_media":176458,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"content-type":"","inline_featured_image":false},"categories":[2423],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v21.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Las tablas HTML: \u00bfQu\u00e9 son? \u00bfC\u00f3mo funcionan?<\/title>\n<meta name=\"description\" content=\"Descubre c\u00f3mo crear y estilizar tablas HTML para organizar tus datos de manera efectiva. Aprende consejos y t\u00e9cnicas para mejorar la accesibilidad y el dise\u00f1o de tus tablas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/datascientest.com\/es\/tablas-html-que-son\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Las tablas HTML: \u00bfQu\u00e9 son? \u00bfC\u00f3mo funcionan?\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/datascientest.com\/es\/tablas-html-que-son\" \/>\n<meta property=\"og:site_name\" content=\"Formaci\u00f3n en ciencia de datos | DataScientest.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataScientestEN\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-05T06:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-29T15:54:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/datascientest.com\/es\/files\/2024\/11\/html-table-datascientest.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Daniel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataScientest__\" \/>\n<meta name=\"twitter:site\" content=\"@DataScientest__\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/datascientest.com\/es\/tablas-html-que-son#article\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/es\/tablas-html-que-son\"},\"author\":{\"name\":\"Daniel\",\"@id\":\"https:\/\/datascientest.com\/es\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0\"},\"headline\":\"Las tablas HTML: \u00bfQu\u00e9 son? \u00bfC\u00f3mo funcionan?\",\"datePublished\":\"2024-12-05T06:30:00+00:00\",\"dateModified\":\"2024-11-29T15:54:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/datascientest.com\/es\/tablas-html-que-son\"},\"wordCount\":1401,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/datascientest.com\/es\/#organization\"},\"articleSection\":[\"Dev\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/datascientest.com\/es\/tablas-html-que-son#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/datascientest.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/datascientest.com\/es\/tablas-html-que-son\",\"url\":\"https:\/\/datascientest.com\/es\/tablas-html-que-son\",\"name\":\"Las tablas HTML: \u00bfQu\u00e9 son? \u00bfC\u00f3mo funcionan?\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/es\/#website\"},\"datePublished\":\"2024-12-05T06:30:00+00:00\",\"dateModified\":\"2024-11-29T15:54:06+00:00\",\"description\":\"Descubre c\u00f3mo crear y estilizar tablas HTML para organizar tus datos de manera efectiva. Aprende consejos y t\u00e9cnicas para mejorar la accesibilidad y el dise\u00f1o de tus tablas.\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/datascientest.com\/es\/tablas-html-que-son\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/datascientest.com\/es\/#website\",\"url\":\"https:\/\/datascientest.com\/es\/\",\"name\":\"Formaci\u00f3n en ciencia de datos | DataScientest.com\",\"description\":\"L\u00edder en formaci\u00f3n en Ciencia de Datos\",\"publisher\":{\"@id\":\"https:\/\/datascientest.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/datascientest.com\/es\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/datascientest.com\/es\/#organization\",\"name\":\"DataScientest\",\"url\":\"https:\/\/datascientest.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/datascientest.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/datascientest.com\/es\/wp-content\/blogs.dir\/7\/files\/2024\/02\/DataScientest_icon_blue-2.png\",\"contentUrl\":\"https:\/\/datascientest.com\/es\/wp-content\/blogs.dir\/7\/files\/2024\/02\/DataScientest_icon_blue-2.png\",\"width\":301,\"height\":301,\"caption\":\"DataScientest\"},\"image\":{\"@id\":\"https:\/\/datascientest.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/DataScientestEN\",\"https:\/\/twitter.com\/DataScientest__\",\"https:\/\/www.linkedin.com\/company\/datascientest-spain\/\",\"https:\/\/www.tiktok.com\/@datascientest\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/datascientest.com\/es\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0\",\"name\":\"Daniel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/datascientest.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g\",\"caption\":\"Daniel\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/school\/datascientest\/\",\"user\"],\"jobTitle\":\"ing\u00e9nieur logiciel\",\"worksFor\":\"DataScientest\",\"url\":\"https:\/\/datascientest.com\/es\/author\/team-redac\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Las tablas HTML: \u00bfQu\u00e9 son? \u00bfC\u00f3mo funcionan?","description":"Descubre c\u00f3mo crear y estilizar tablas HTML para organizar tus datos de manera efectiva. Aprende consejos y t\u00e9cnicas para mejorar la accesibilidad y el dise\u00f1o de tus tablas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/datascientest.com\/es\/tablas-html-que-son","og_locale":"es_ES","og_type":"article","og_title":"Las tablas HTML: \u00bfQu\u00e9 son? \u00bfC\u00f3mo funcionan?","og_description":"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","og_url":"https:\/\/datascientest.com\/es\/tablas-html-que-son","og_site_name":"Formaci\u00f3n en ciencia de datos | DataScientest.com","article_publisher":"https:\/\/www.facebook.com\/DataScientestEN","article_published_time":"2024-12-05T06:30:00+00:00","article_modified_time":"2024-11-29T15:54:06+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/datascientest.com\/es\/files\/2024\/11\/html-table-datascientest.webp","type":"image\/webp"}],"author":"Daniel","twitter_card":"summary_large_image","twitter_creator":"@DataScientest__","twitter_site":"@DataScientest__","twitter_misc":{"Escrito por":"Daniel","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/datascientest.com\/es\/tablas-html-que-son#article","isPartOf":{"@id":"https:\/\/datascientest.com\/es\/tablas-html-que-son"},"author":{"name":"Daniel","@id":"https:\/\/datascientest.com\/es\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0"},"headline":"Las tablas HTML: \u00bfQu\u00e9 son? \u00bfC\u00f3mo funcionan?","datePublished":"2024-12-05T06:30:00+00:00","dateModified":"2024-11-29T15:54:06+00:00","mainEntityOfPage":{"@id":"https:\/\/datascientest.com\/es\/tablas-html-que-son"},"wordCount":1401,"commentCount":0,"publisher":{"@id":"https:\/\/datascientest.com\/es\/#organization"},"articleSection":["Dev"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/datascientest.com\/es\/tablas-html-que-son#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/datascientest.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/datascientest.com\/es\/tablas-html-que-son","url":"https:\/\/datascientest.com\/es\/tablas-html-que-son","name":"Las tablas HTML: \u00bfQu\u00e9 son? \u00bfC\u00f3mo funcionan?","isPartOf":{"@id":"https:\/\/datascientest.com\/es\/#website"},"datePublished":"2024-12-05T06:30:00+00:00","dateModified":"2024-11-29T15:54:06+00:00","description":"Descubre c\u00f3mo crear y estilizar tablas HTML para organizar tus datos de manera efectiva. Aprende consejos y t\u00e9cnicas para mejorar la accesibilidad y el dise\u00f1o de tus tablas.","inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/datascientest.com\/es\/tablas-html-que-son"]}]},{"@type":"WebSite","@id":"https:\/\/datascientest.com\/es\/#website","url":"https:\/\/datascientest.com\/es\/","name":"Formaci\u00f3n en ciencia de datos | DataScientest.com","description":"L\u00edder en formaci\u00f3n en Ciencia de Datos","publisher":{"@id":"https:\/\/datascientest.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/datascientest.com\/es\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/datascientest.com\/es\/#organization","name":"DataScientest","url":"https:\/\/datascientest.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/datascientest.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/datascientest.com\/es\/wp-content\/blogs.dir\/7\/files\/2024\/02\/DataScientest_icon_blue-2.png","contentUrl":"https:\/\/datascientest.com\/es\/wp-content\/blogs.dir\/7\/files\/2024\/02\/DataScientest_icon_blue-2.png","width":301,"height":301,"caption":"DataScientest"},"image":{"@id":"https:\/\/datascientest.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataScientestEN","https:\/\/twitter.com\/DataScientest__","https:\/\/www.linkedin.com\/company\/datascientest-spain\/","https:\/\/www.tiktok.com\/@datascientest"]},{"@type":"Person","@id":"https:\/\/datascientest.com\/es\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0","name":"Daniel","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/datascientest.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g","caption":"Daniel"},"sameAs":["https:\/\/www.linkedin.com\/school\/datascientest\/","user"],"jobTitle":"ing\u00e9nieur logiciel","worksFor":"DataScientest","url":"https:\/\/datascientest.com\/es\/author\/team-redac"}]}},"_links":{"self":[{"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/posts\/176456"}],"collection":[{"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/comments?post=176456"}],"version-history":[{"count":43,"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/posts\/176456\/revisions"}],"predecessor-version":[{"id":176733,"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/posts\/176456\/revisions\/176733"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/media\/176458"}],"wp:attachment":[{"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/media?parent=176456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/categories?post=176456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datascientest.com\/es\/wp-json\/wp\/v2\/tags?post=176456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}