{"id":23330,"date":"2025-10-23T21:13:51","date_gmt":"2025-10-23T21:13:51","guid":{"rendered":"https:\/\/wedesignmarbella.com\/generador-de-tablas-html\/"},"modified":"2026-07-02T11:01:41","modified_gmt":"2026-07-02T11:01:41","slug":"generador-de-tablas-html","status":"publish","type":"page","link":"https:\/\/wedesignmarbella.com\/es\/herramientas\/generador-de-tablas-html\/","title":{"rendered":"Generador de tablas HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"23330\" class=\"elementor elementor-23330 elementor-15121\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f6d8115 e-flex e-con-boxed e-con e-parent\" data-id=\"f6d8115\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1217be elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"c1217be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Herramienta generadora de tablas HTML<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b2517b0 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"b2517b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Esta herramienta te permite generar tablas HTML r\u00e1pidamente especificando el n\u00famero de filas y columnas. Puedes personalizar la apariencia de la tabla con opciones de estilo como el color del borde, el color de fondo y el relleno de las celdas. Una vez que est\u00e9s satisfecho con tu tabla, se mostrar\u00e1 el c\u00f3digo HTML generado, listo para que lo copies y uses en tu sitio web o contenido.  <\/p>\t\t\t\t\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-2711554 e-flex e-con-boxed e-con e-parent\" data-id=\"2711554\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70412ad elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"70412ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <style>\r\n\r\n    <\/style>\r\n\r\n<label for=\"rows\">N\u00famero de filas: <\/label>\r\n<input type=\"number\" id=\"rows\" value=\"3\" min=\"1\" max=\"10\">\r\n<br><br><label for=\"cols\">N\u00famero de columnas:  <\/label>\r\n<input type=\"number\" id=\"cols\" value=\"3\" min=\"1\" max=\"10\">\r\n<br><br>\r\n<h3>Opciones de estilo de tabla:<\/h3>\r\n\r\n<label for=\"borderColor\">Color del borde:  <\/label>\r\n<input type=\"color\" id=\"borderColor\" value=\"#000000\">\r\n<br><br>\r\n<label for=\"bgColor\">Color de fondo de la tabla:  <\/label>\r\n<input type=\"color\" id=\"bgColor\" value=\"#ffffff\">\r\n<br><br>\r\n<label for=\"cellPadding\">Cell Padding: <\/label>\r\n<input type=\"number\" id=\"cellPadding\" value=\"8\" min=\"0\">\r\n<br><br>\r\n<button onclick=\"generateTable()\">Generar tabla HTML<\/button>\r\n\r\n\r\n\r\n<script>\r\n    function generateTable() {\r\n        const rows = document.getElementById('rows').value;\r\n        const cols = document.getElementById('cols').value;\r\n        const borderColor = document.getElementById('borderColor').value;\r\n        const bgColor = document.getElementById('bgColor').value;\r\n        const cellPadding = document.getElementById('cellPadding').value;\r\n\r\n        let tableHTML = `<table style=\"border: 1px solid ${borderColor}; background-color: ${bgColor}; border-collapse: collapse;\">\\n`;\r\n\r\n        for (let r = 0; r < rows; r++) {\r\n            tableHTML += `  <tr>\\n`;\r\n            for (let c = 0; c < cols; c++) {\r\n                tableHTML += `    td style=\"padding: ${cellPadding}px;\">Row ${r + 1}, Cell ${c + 1}<\/td>\\n`;\r\n            }\r\n            tableHTML += `  <\/tr>\\n`;\r\n        }\r\n\r\n        tableHTML += `<\/table>`;\r\n\r\n        \/\/ Output the generated HTML to the textarea\r\n        document.getElementById('htmlOutput').value = tableHTML;\r\n    }\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1a73a1 elementor-widget elementor-widget-html\" data-id=\"c1a73a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<h3>Generar tabla HTML:<\/h3>\r\n<textarea id=\"htmlOutput\" class=\"output\" rows=\"10\" cols=\"80\" readonly><\/textarea>\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-f9bf0b0 e-flex e-con-boxed e-con e-parent\" data-id=\"f9bf0b0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d323df elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button\" data-id=\"0d323df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/wedesignmarbella.com\/es\/herramientas\/\" title=\"Back to Tools\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Volver a Herramientas<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Herramienta generadora de tablas HTML Esta herramienta te permite generar tablas HTML r\u00e1pidamente especificando el n\u00famero de filas y columnas. Puedes personalizar la apariencia de la tabla con opciones de estilo como el color del borde, el color de fondo y el relleno de las celdas. Una vez que est\u00e9s satisfecho con tu tabla, se [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":23340,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ai_generated_summary":"","footnotes":""},"class_list":["post-23330","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/comments?post=23330"}],"version-history":[{"count":0,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23330\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23340"}],"wp:attachment":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/media?parent=23330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}