{"id":941,"date":"2023-02-16T06:41:24","date_gmt":"2023-02-16T06:41:24","guid":{"rendered":"https:\/\/www.tools.keywordfinder.us\/?page_id=941"},"modified":"2023-02-16T06:41:24","modified_gmt":"2023-02-16T06:41:24","slug":"html-table-generator","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/hi\/html-table-generator\/","title":{"rendered":"HTML Table Generator"},"content":{"rendered":"<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-cyan-bluish-gray-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<section><link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext\">\n<h1>HTML Table Generator<\/h1>\n\n<div class=\"container\">\n<div class=\"page-header\"><h2 class=\"page-title\"><\/h2><\/div>\n<div class=\"row\">\n<div class=\"col-12\">\n<form action=\"#Q\" method=\"post\" class=\"card\" data-trp-original-action=\"#Q\">\n<div class=\"card-status bg-purple-light\"><\/div>\n<div class=\"card-status card-status-left bg-purple-light\"><\/div>\n\n<div class=\"card-body\">\n<div class=\"row\">\n<div class=\"col-md-5 col-lg-5\">\n<label class=\"form-label\">Table Structure<\/label>\n<div class=\"row\">\n<div class=\"col-md-6 col-lg-6\">\n<div class=\"form-group\">\n<label class=\"form-label\">Columns: <\/label>\n<input id=\"sizeCols\" type=\"number\" name=\"sizeCols\" value=\"5\" size=\"4\" class=\"form-control\">\n<\/div><\/div><br>\n<div class=\"col-md-6 col-lg-6\">\n<div class=\"form-group\">\n<label class=\"form-label\">Rows: &nbsp; &nbsp; &nbsp;<\/label>\n<input id=\"sizeRows\" type=\"number\" name=\"sizeRows\" value=\"7\" size=\"4\" class=\"form-control\">\n<\/div><\/div><\/div><br>\n\n<label class=\"form-label\"><b>Table Style<\/b><\/label>\n<div class=\"row\">\n<div class=\"col-md-6 col-lg-6\">\n<div class=\"form-group\">\n<label class=\"form-label\">Color <\/label>&nbsp;&nbsp;&nbsp;&nbsp;\n<select id=\"tableColor\" name=\"tableColor\" class=\"form-control\">\n<option value=\"Blue\">Blue\n<\/option><option value=\"Green\">Green\n<\/option><option value=\"Grey\">Grey\n<\/option><option value=\"Orange\">Orange\n<\/option><option value=\"Brown\">Brown\n<\/option><option value=\"Black\">Black\n<\/option><option value=\"None\">None\n<\/option><\/select>\n<\/div><\/div>\n<div class=\"col-md-6 col-lg-6\">\n<div class=\"form-group\">\n<label class=\"form-label\">Apply on <\/label>\n<select id=\"tableDesign\" name=\"tableDesign\" class=\"form-control\">\n<option value=\"alternating\">Theme\n<\/option><option value=\"minimal\">Header\n<\/option><option value=\"noStyle\">No Style\n<\/option><\/select>\n<\/div><\/div><\/div>\n\n<div class=\"form-group\">\n<label class=\"form-label\">Highlight<\/label>\n<select id=\"tableHighlight\" name=\"tableHighlight\" class=\"form-control\">\n<option value=\"row\">Table row highlight on hover\n<\/option><option value=\"none\">No hover highlight\n<\/option><\/select>\n<\/div>\n\n<div class=\"form-group\">\n<label class=\"form-label\">Cell Info<\/label>&nbsp;\n<select id=\"tableInfo\" name=\"tableInfo\" class=\"form-control\">\n<option value=\"yesInfo\">Add Placeholder\n<\/option><option value=\"noInfo\">No Placeholder\n<\/option><\/select>\n<\/div>\n\n<\/div>\n\n<div class=\"col-md-7 col-lg-7\">\n<fieldset class=\"form-fieldset\">\n<div class=\"form-group\">\n<label class=\"form-label\">Copy the HTML code below to put your table online<\/label>\n<textarea class=\"form-control\" name=\"tC\" id=\"tC\" rows=\"8\" placeholder=\"HTML Table Code\"><\/textarea>\n<\/div>\n\n<div class=\"form-group\">\n<div class=\"selectgroup selectgroup-pills\">\n<label class=\"selectgroup-item\" data-toggle=\"tooltip\" id=\"bReset\" title=\"\">\n<input type=\"reset\" name=\"icon-input\" value=\"Clear All\" class=\"selectgroup-input\">\n<span class=\"selectgroup-button selectgroup-button-icon\"><\/span>\n<\/label>\n<label class=\"selectgroup-item\" data-toggle=\"tooltip\" id=\"Download\" title=\"\">\n<input type=\"radio\" name=\"icon-input\" value=\"4\" class=\"selectgroup-input\">\n<span class=\"selectgroup-button selectgroup-button-icon\">Refresh<\/span>\n<\/label>\n<label class=\"selectgroup-item\" data-toggle=\"tooltip\" id=\"bCopy\" title=\"\">\n<input type=\"radio\" name=\"icon-input\" value=\"3\" class=\"selectgroup-input\">\n<span class=\"selectgroup-button selectgroup-button-icon\">Copy to Clipboard<\/span>\n<\/label>\n<\/div><\/div>\n<\/fieldset>\n<\/div><\/div>\n<h3 style=\"padding-bottom:0px;\">Your HTML Table Preview<\/h3>\n<div id=\"newTable\" class=\"table-responsive\"><\/div>\n<p>Your custom number of table rows and columns are not reflected in this preview.<\/p>\n<\/div>\n<input type=\"hidden\" name=\"trp-form-language\" value=\"hi\"\/><\/form>\n<\/div><\/div><\/div>\n<\/section>\n\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"><\/script>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.3\/umd\/popper.min.js\"><\/script>\n\n<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/js\/bootstrap.min.js\"><\/script>\n<style><\/style>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function () {\n\tvar t = \"\",\n\t\te = \"\",\n\t\to = \"\",\n\t\td = \"\",\n\t\tl = \"\",\n\t\tr = \"\",\n\t\tn = \"\",\n\t\ta = \"\",\n\t\tb = \"\",\n\t\tf = \"\",\n\t\tc = \"\";\n\n\tfunction s() {\n\t\tif (o = document.getElementById(\"tableColor\").value, d = document.getElementById(\"tableDesign\").value, t = document.getElementById(\"sizeCols\").value, e = document.getElementById(\"sizeRows\").value, \"0\" == t && (t = \"5\", document.getElementById(\"sizeCols\").value = \"5\"), \"0\" == e && (e = \"7\", document.getElementById(\"sizeRows\").value = \"7\"), l = document.getElementById(\"tableInfo\").value, r = document.getElementById(\"tableHighlight\").value, \"alternating\" == d) {\n\t\t\tif (a = \"\", \"Blue\" == o) {\n\t\t\t\t\"#d4e3e5\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#d4e3e5;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#ffffff;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t\telse if (\"Green\" == o) {\n\t\t\t\t\"#bedda7\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#abd28e;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#bedda7;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#ffffff;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t\telse if (\"Grey\" == o) {\n\t\t\t\t\"#cdcdcd\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #a9a9a9;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#b8b8b8;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#cdcdcd;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#ffffff;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t\telse if (\"Orange\" == o) {\n\t\t\t\t\"#f0c169\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #ebab3a;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#e6983b;border-width: 1px;padding: 8px;border-style: solid;border-color: #ebab3a;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#f0c169;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #ebab3a;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#ffffff;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t\telse if (\"Brown\" == o) {\n\t\t\t\t\"#e9dbbb\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #bcaf91;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#ded0b0;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#e9dbbb;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#ffffff;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t\telse if (\"Black\" == o) {\n\t\t\t\t\"#2f2f2f\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#fbfbfb;width:100%;border-width: 1px;border-color: #686767;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#171515;border-width: 1px;padding: 8px;border-style: solid;border-color: #686767;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#2f2f2f;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #686767;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#171515;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t} else if (\"minimal\" == d) {\n\t\t\tif (a = \"\", \"Blue\" == o) {\n\t\t\t\t\"#ffffff\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#ffffff;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#ffff99;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t\telse if (\"Green\" == o) {\n\t\t\t\t\"#ffffff\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#abd28e;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#ffffff;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#ffff99;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t\telse if (\"Grey\" == o) {\n\t\t\t\t\"#ffffff\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #a9a9a9;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#b8b8b8;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#ffffff;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#ffff99;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t\telse if (\"Orange\" == o) {\n\t\t\t\t\"#ffffff\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #ebab3a;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#e6983b;border-width: 1px;padding: 8px;border-style: solid;border-color: #ebab3a;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#ffffff;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #ebab3a;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#ffff99;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t\telse if (\"Brown\" == o) {\n\t\t\t\t\"#ffffff\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #bcaf91;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#ded0b0;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#ffffff;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#ffff99;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t\telse if (\"Black\" == o) {\n\t\t\t\t\"#171515\",\n\t\t\t\ta += '<style type=\"text\/css\">\\n',\n\t\t\t\ta += \".tftable {font-size:12px;color:#fbfbfb;width:100%;border-width: 1px;border-color: #686767;border-collapse: collapse;}\\n\",\n\t\t\t\ta += \".tftable th {font-size:12px;background-color:#171515;border-width: 1px;padding: 8px;border-style: solid;border-color: #686767;text-align:left;}\\n\",\n\t\t\t\ta += \".tftable tr {background-color:#171515;}\\n\",\n\t\t\t\ta += \".tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #686767;}\\n\",\n\t\t\t\t\"none\" != r && \"None\" != o && (a += \".tftable tr:hover {background-color:#666666;}\\n\"),\n\t\t\t\ta += \"<\/style>\\n\\n\"\n\t\t\t}\n\t\t} else \"alternatingXY\" == d ? a = \"\\x3c!-- alternatingXY --\\x3e\\n\" : \"minimalXY\" == d ? a = \"\\x3c!-- minimalXY --\\x3e\\n\" : \"noStyle\" == d && (a = \"\");\n\t\tb = '<table class=\"tftable\" border=\"1\">\\n<tr>';\n\t\tfor (var s = 0, i = 0; s < t;) b += \"<th>Header \" + (i = s + 1) + \"<\/th>\", s++;\n\t\tb += \"<\/tr>\\n\";\n\t\tfor (var p = 0; p < e - 1;) {\n\t\t\tb += \"<tr>\";\n\t\t\tfor (s = 0; s < t;) i = p + 1, \"yesInfo\" == l ? b = b + \"<td>Row:\" + i + \" Cell:\" + (s + 1) + \"<\/td>\" : b += \"<td> <\/td>\", s++;\n\t\t\tb += \"<\/tr>\\n\", p++\n\t\t}\n\t\tf = a + (\"yesInfo\" == l ? '<table class=\"table table card-table table-vcenter text-nowrap tftable\" border=\"1\"><tbody><tr><th>Header 1<\/th><th>Header 2<\/th><th>Header 3<\/th><th>Header 4<\/th><th>Header 5<\/th><\/tr><tr><td>Row 1 - Cell 1<\/td><td>Row 1  - Cell 2<\/td><td>Row 1  - Cell 3<\/td><td>Row 1  - Cell 4<\/td><td>Row 1  - Cell 5<\/td><\/tr><tr><td>Row 2  - Cell 1<\/td><td>Row 2  - Cell 2<\/td><td>Row 2  - Cell 3<\/td><td>Row 2  - Cell 4<\/td><td>Row 2  - Cell 5<\/td><\/tr><tr><td>Row 3  - Cell 1<\/td><td>Row 3  - Cell 2<\/td><td>Row 3  - Cell 3<\/td><td>Row 3  - Cell 4<\/td><td>Row 3  - Cell 5<\/td><\/tr><tr><td>Row 4  - Cell 1<\/td><td>Row 4  - Cell 2<\/td><td>Row 4  - Cell 3<\/td><td>Row 4  - Cell 4<\/td><td>Row 4  - Cell 5<\/td><\/tr><tr><td>Row 5  - Cell 1<\/td><td>Row 5  - Cell 2<\/td><td>Row 5  - Cell 3<\/td><td>Row 5  - Cell 4<\/td><td>Row 5  - Cell 5<\/td><\/tr><tr><td>Row 6  - Cell 1<\/td><td>Row 6  - Cell 2<\/td><td>Row 6  - Cell 3<\/td><td>Row 6  - Cell 4<\/td><td>Row 6  - Cell 5<\/td><\/tr><\/tbody><\/table>' : '<table class=\"table table card-table table-vcenter text-nowrap tftable\" border=\"1\"><tbody><tr><th> <\/th><th> <\/th><th> <\/th><th> <\/th><th> <\/th><\/tr><tr><td> <\/td><td> <\/td><td> <\/td><td> <\/td><td> <\/td><\/tr><tr><td> <\/td><td> <\/td><td> <\/td><td> <\/td><td> <\/td><\/tr><tr><td> <\/td><td> <\/td><td> <\/td><td> <\/td><td> <\/td><\/tr><tr><td> <\/td><td> <\/td><td> <\/td><td> <\/td><td> <\/td><\/tr><tr><td> <\/td><td> <\/td><td> <\/td><td> <\/td><td> <\/td><\/tr><tr><td> <\/td><td> <\/td><td> <\/td><td> <\/td><td> <\/td><\/tr><\/tbody><\/table>'), c = n + a + (b += \"<\/table>\\n\\n\") + \"\", document.getElementById(\"newTable\").innerHTML = f, document.getElementById(\"tC\").value = c\n\t}\n\tdocument.getElementById(\"sizeCols\").onkeyup = function () {\n\t\tt = (t = document.getElementById(\"sizeCols\").value).replace(\/[^0-9]+\/g, \"\").replace(\/\\s+\/, \"\"), document.getElementById(\"sizeCols\").value = t, s()\n\t}, document.getElementById(\"sizeRows\").onkeyup = function () {\n\t\te = (e = document.getElementById(\"sizeRows\").value).replace(\/[^0-9]+\/g, \"\").replace(\/\\s+\/, \"\"), document.getElementById(\"sizeRows\").value = e, s()\n\t}, document.getElementById(\"tableColor\").onchange = function () {\n\t\to = document.getElementById(\"tableColor\").value, d = document.getElementById(\"tableDesign\").value, \"None\" == o && (document.getElementById(\"tableDesign\").selectedIndex = 2), \"None\" != o && \"noStyle\" == d && (document.getElementById(\"tableDesign\").selectedIndex = 0), s()\n\t}, document.getElementById(\"tableDesign\").onchange = function () {\n\t\to = document.getElementById(\"tableColor\").value, \"noStyle\" == (d = document.getElementById(\"tableDesign\").value) && (document.getElementById(\"tableColor\").selectedIndex = 6), \"noStyle\" != d && \"None\" == o && (document.getElementById(\"tableColor\").selectedIndex = 0), s()\n\t}, document.getElementById(\"tableHighlight\").onchange = function () {\n\t\ts()\n\t}, document.getElementById(\"tableInfo\").onchange = function () {\n\t\ts()\n\t}, s()\n}), $(document).ready(function () {\n\t$('[data-toggle=\"tooltip\"]').tooltip(), $(\"#bCopy\").click(function () {\n\t\t$(\"#tC\").focus(), $(\"#tC\").select(), document.execCommand(\"copy\")\n\t}), $(\"#bDownload\").click(function () {\n\t\treturn \"\" != $(\"#tC\").val().trim() && ($(\"#tC\").focus(), $(\"#tC\").select(), $(\"<a \/>\", {\n\t\t\tdownload: $.now() + \".txt\",\n\t\t\thref: URL.createObjectURL(new Blob([$(\"#tC\").val()], {\n\t\t\t\ttype: \"text\/plain\"\n\t\t\t}))\n\t\t}).appendTo(\"body\")[0].click(), $(window).one(\"focus\", function () {\n\t\t\t$(\"a\").last().remove()\n\t\t}), !1)\n\t})\n});\n  <\/script>\n<style>\n\nbody{text-align:center}\n\n\/* Button Styles *\/\nbutton, .button, #button, btn, .btn, #btn, downloadlink,  #download-button, #button-copy, button-copy, copy-button, #copy-button, #copy, copy, #download-html-button{\n  display: inline-block;\n  padding: 12px 24px;\n  font-size: 16px;\n  font-weight: 500;\n  color: #ffffff;\n  text-transform: uppercase;\n  text-decoration: none;\n  text-align: center;\n  border-radius: 30px;\n  background-image: linear-gradient(to right, #0088FF, #0088FF);\n  border: 3px solid #fff;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\n  transition: all 0.3s ease;\n  margin:0 auto;\n  margin-top:11px;\n  margin-bottom:11px;\n  text-shadow: 2px 2px 4px #333;\n}\n\n\/* Button Hover State *\/\nbutton:hover {\n  background-image: linear-gradient(to right, #FF1493, #FF1493);\n  border: 3px solid #ffffff;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n}\n\n -input{\n  width: 25%;\n  height: 100%;\n  padding: 5px;\n  font-size: 16px;\n  font-family: Arial, sans-serif;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc;\n  transition: all 0.2s ease-in-out;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n}\n\ninput[type=file]::file-selector-button {\n  display: inline-block;\n  padding: 1.0rem 1rem;\n  font-size: 1.125rem;\n  font-weight: bold;\n  color: #fff;\n  text-align: center;\n  text-transform: uppercase;\n  background-color: #0088FF;\n  border-radius: 0rem;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n  border: 0px solid #fff;\n  width:100%;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\n}\n\ninput[type=file]::file-selector-button:hover {\n  background-color: #5b52d6;\n}\n\ninput[type=file]::file-selector-button:active {\n  background-color: #4a41ad;\n}\n\ninput[type=file]::file-selector-button:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6c63ff;\n}\n\ninput[type=file]::file-selector-button::before {\n  content: \"Select File\";\n}\n\ninput[type=file]::file-selector-button::before,\ninput[type=file]::file-selector-button::before {\n  content: \"\\2193 Browse Files\";\n}\n\n\ninput[type=\"file\"] {\n  display: yes;\n}\ninput[type=\"text\"], input[type=\"url\"] {\n  width: 80%;\n  height: 50px;\n  padding: 5px;\n  font-size: 16px;\n  font-family: Arial, sans-serif;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc;\n  transition: all 0.2s ease-in-out;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n}\ninput[type=\"number\"], select {\n  width: 30%;\n  height: 50px;\n  padding: 5px;\n  font-size: 16px;\n  font-family: Arial, sans-serif;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc;\n  transition: all 0.2s ease-in-out;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n}\n\ntextarea {\n  width: 100%;\n  height: 170px;\n  padding: 10px;\n  font-size: 16px;\n  font-family: Arial, sans-serif;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;  \n  transition: all 0.2s ease-in-out;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n}\n\ntextarea:hover {\n  border-color: #06c;\n  box-shadow: 2px 2px 10px #06c;\n}\n\ntextarea:focus {\n  outline: none;\n  border-color: #06c;\n  box-shadow: 2px 2px 10px #06c;\n}\n\ncanvas, #image-container, .img, #img, image, .image, #image, #convertedImage, #preview-image {\n  border: 5px solid;\n  border-image: linear-gradient(to bottom, #007bff, #00f260);\n  border-image-slice: 1;\n  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);\n  margin-top:10px;margin-bottom:10px;\n  width:90%;\n  margin:0 auto;padding:15px;\n\n}\n\n#image-container img {\n  max-width: 100%;\n  }\n\ncode, pre, .result, output, #output, .output {\n  font-family: Monaco, Consolas, \"Andale Mono\", \"DejaVu Sans Mono\", monospace;\n  font-size: 0.9em;\n  color: #333;\n  background-color: #f9f9f9;\n  padding: 0.2em 0.4em;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;\n  border-radius: 5px;\n  box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;  \n  transition: all 0.2s ease-in-out;\n  white-space: pre-wrap;\n  margin-top:10px;margin-bottom:10px;\n  margin:0 auto;\n  width:100%;\n  padding:15px;\n\n}\n\n\ninput[type=\"range\"] {\n  -webkit-appearance: none;\n  width: 80%;\n  background: transparent;\n  height: 10px;\n  border-radius: 5px;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  box-shadow: inset 0 0 5px #333;\n  transition: box-shadow 0.2s;\n  margin-top:10px;\n\n}\n\ninput[type=\"range\"]:focus {\n  box-shadow: inset 0 0 5px #888;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  background: #4CAF50;\n  cursor: pointer;\n  transition: background 0.2s;\n  margin-top:-5px;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n  background: #3e8e41;\n}\n\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  height: 10px;\n  background: #ddd;\n  border-radius: 5px;\n  border: none;\n}\ninput[type=\"checkbox\"] {\n  appearance: none;\n  width: 45px;\n  height: 25px;\n  background: transparent;\n  border: 2px solid;\n  border-image: linear-gradient(to right, #06c, #f90) 1;  border-radius: 5px;\n  margin: 10px;\n  outline: none;\n  cursor: pointer;\n  position: relative;\n}\n\ninput[type=\"checkbox\"]:before {\n  content: \"\";\n  width: 15px;\n  height: 15px;\n  background: #D209A4;\n  border-radius: 100px;\n  position: absolute;\n  left: 2px;\n  \n  top: 3px;\n  transition: all 0.2s;\n}\n\ninput[type=\"checkbox\"]:checked:before {\n  transform: translateX(20px);\n}\n\ninput[type=\"checkbox\"]:focus {\n  border: 2px solid #888;\n}\ninput[type=\"radio\"] {\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 2px solid #333;\n  margin-right: 10px;\n  outline: none;\n  position: relative;\n  cursor: pointer;\n}\n\ninput[type=\"radio\"]:after {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #333;\n  position: absolute;\n  top: 5px;\n  left: 5px;\n  opacity: 0;\n  transition: all 0.2s;\n}\n\ninput[type=\"radio\"]:checked:after {\n  opacity: 1;\n}\n\ninput[type=\"radio\"]:focus {\n  border-color: #888;\n}\n\n\ninput[type=\"radio\"] {\n  display: inline-block;\n  margin-right: 10px;\n  vertical-align: middle;\n}\n\nlabel {\n  display: block; \/* makes each label appear on a new line *\/\n  font-size: 16px;\n  font-weight: bold;\n  margin-bottom: 5px; \/* adds a small gap below each label *\/\n  color:#55555e;\n  margin-top:11px;margin-bottom:11px;\n}\n\ninput[type=\"color\"]{width:17.2%;}\n.form-control {\n    display: block;\n    margin:0 auto;\n    width: 70%;\n    padding: 0.375rem 0.75rem;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5;\n    color: #212529;\n    background-color: #fff;\n    background-clip: padding-box;\n    border: 1px solid #ced4da;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    border-radius: 0.25rem;\n    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;\n}\nsection{\n        margin: 0px auto;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 20px;\n      }\n<\/style>\n\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>HTML Table Generator Table Structure Columns: Rows: &nbsp; &nbsp; &nbsp; Table Style Color &nbsp;&nbsp;&nbsp;&nbsp; Blue Green Grey Orange Brown Black None Apply on Theme Header No Style Highlight Table row highlight on hover No hover highlight Cell Info&nbsp; Add Placeholder No Placeholder Copy the HTML code below to put your table online Refresh Copy to &#8230; <a title=\"HTML Table Generator\" class=\"read-more\" href=\"https:\/\/tools.billionsideas.com\/hi\/html-table-generator\/\" aria-label=\"Read more about HTML Table Generator\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-941","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/hi\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/pages\/941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/comments?post=941"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/pages\/941\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/media?parent=941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}