diff --git a/test.html b/test.html
new file mode 100644
index 0000000..9a8453b
--- /dev/null
+++ b/test.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>JSON to HTML Tables</title>
+ <style>
+ .table-container {
+ margin-bottom: 20px; /* Extra space after each table */
+ }
+ .table-caption {
+ font-weight: bold; /* Bold caption */
+ margin-left: 0;
+ margin-bottom: 5px;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+ table, th, td {
+ border: 1px solid black;
+ }
+ th, td {
+ padding: 8px;
+ text-align: left;
+ }
+ th {
+ background-color: #f2f2f2;
+ }
+ </style>
+</head>
+<body>
+
+<script>
+ // Your JSON data
+ var jsonData = {"Face View Side 1": {"Pin 1": ["brown"], "Pin 2": ["white"], "Pin 3": ["blue"], "Pin 4": ["black"], "FE": ["pink"]}, "Face View Side 2": {"Pin 1": ["brown"], "Pin 2": ["white"], "Pin 3": ["blue"], "Pin 4": ["black"], "FE": ["pink"]}, "Product Description": {"Product Family": "Power Connector", "Brand": "Lumberg Automation", "Connector Type": "Cordset, double ended", "Shielding": "Unshielded", "Rated Voltage": "63 V", "Rated Voltage (UL)": "63 V", "Rated Impulse Voltage": "1.5 kV", "Operating Voltage": "50 V AC / 60 V DC", "Rated Current*": "16 A", "Rated Current (UL)*": "16 A"}, "Technical Data Side 1": {"Product Sub Family": "M12 Power", "Type of Contact / Gender": "male", "Connector Design": "straight", "Attachment Type": "Coupling Screw", "Number of Pins": "5(4+FE)", "Coding": "L", "Contact Resistance": "\u2264 10 mOhm", "Insulation Resistance": "\u02c3 10^9 Ohm", "Mating Cycles": "\u2264 100", "Ambient Temperature (Operation)*": "-40 \u00b0C to +125 \u00b0C, notice derating", "Protection Degree / IP Rating**": "IP65, IP67, IP69K", "Design Standard": "IEC 61076-2-111", "Pollution Degree": "3 acc. to DIN EN 60664-1 (VDE 0110-1)", "Clearance / Creepage Distance": "DIN EN 60664-1 (2008/01); VDE 0110-1", "Overvoltage Category": "III acc. to DIN EN 60664-1 (VDE 0110-1)", "Contact Base Material": "CuNi", "Contact Plating": "Cu/Au", "Contact Bearer Material": "PBT GF", "Contact Bearer Color": "grey", "Flammability Class (Contact Bearer)": "UL 94 V-2", "Molded Body Material": "TPE", "Molded Body Color": "blue", "Flammability Class (Molded Body)": "UL 94 HB", "Attachment Material": "CuZn", "Attachment Plating": "Cu/Ni", "O-Ring Material": "FKM", "Fastening Torque (Contact Screw)": "M 12x1: (50-60) Ncm, hand-tight"}, "Cable Data": {"Cable Number": "949", "Conductor Size": "1.50 mm\u00b2", "Number of Wires": "5", "Minimal Bending Radius (Fixed Inst)": "\u02c3 4 x D", "Minimal Bending Radius (Flexible Inst)": "\u02c3 7.5 x D", "Cycles (Bending)": "\u02c3 10 M", "Conductor material": "Cu", "Cable Jacket Material": "PUR", "Cable Jacket Color": "grey (RAL 7032)", "Cable Diameter D": "\u00f8 8.0 \u00b10.20 mm", "Wire Insulation Material": "PP", "Insulated Wire Diameter": "\u00f8 2.35 mm", "Ambient Temperature (Fixed Installation)": "-40 \u00b0C to +90 \u00b0C (UL AWM 80\u00b0C)", "Ambient Temperature (Flex Installation)": "-30 \u00b0C to +90 \u00b0C (UL AWM 80\u00b0C)", "Ambient Temperature (Fixed Installation short-term 100h)": "-40 \u00b0C to +125 \u00b0C", "Ambient Temperature (Drag Chain Inst)": "-20 \u00b0C to +60 \u00b0C", "UL Cable Type": "AWM: 20939", "Flammability Class (Cable Jacket)": "VDE 0482-332-1-2, DIN EN 60332-1-2 / IEC 60332-1 / UL VW-1, CSA FT1"}, "Technical Data Side 2": {"Product Sub Family, Side 2": "M12 Power", "Type of Contact / Gender, Side 2": "female", "Connector Design, Side 2": "straight", "Attachment Type, Side 2": "Coupling Nut", "Number of Pins, Side 2": "5(4+FE)", "Coding, Side 2": "L", "Contact Resistance, Side 2": "\u2264 10 mOhm", "Insulation Resistance, Side 2": "\u02c3 10^9 Ohm", "Mating Cycles, Side 2": "\u2264 100", "Ambient Temperature (Operation), Side 2*": "-40 \u00b0C to +125 \u00b0C, notice derating", "Protection Degree / IP Rating, Side 2**": "IP65, IP67, IP69K", "Design Standard, Side 2": "IEC 61076-2-111", "Pollution Degree, Side 2": "3 acc. to DIN EN 60664-1 (VDE 0110-1)", "Clearance / Creepage Distance, Side 2": "DIN EN 60664-1 (2008/01); VDE 0110-1", "Overvoltage Category, Side 2": "III acc. to DIN EN 60664-1 (VDE 0110-1)", "Contact Base Material, Side 2": "CuNi", "Contact Plating, Side 2": "Cu/Au", "Contact Bearer Material, Side 2": "PBT GF", "Contact Bearer Color, Side 2": "grey", "Flammability Class (Contact Bearer), Side 2": "UL 94 V-2", "Molded Body Material, Side 2": "TPE", "Molded Body Color, Side 2": "blue", "Flammability Class (Molded Body), Side 2": "UL 94 HB", "Attachment Material, Side 2": "CuZn", "Attachment Plating, Side 2": "Cu/Ni", "O-Ring Material, Side 2": "FKM", "Fastening Torque (Contact Screw), Side 2": "M 12x1: (50-60) Ncm, hand-tight"}, "Approvals": {"UL-File": "E497237", "UL": "UL 2237; cULus", "VDE": "VDE 61984"}, "Safety & Environmental Compliance": {"RoHS Compliant": "yes"}, "Resistances": {"Halogenfree": "DIN VDE 0472 T.815", "Oil Resistance": "HD 22.10 Appendix A, DIN EN 60811-404"}, "Notes": {"Protection Degree / IP Rating Note": "** only if mounted and locked in combination with Hirschmann / Lumberg Automation connector.", "Note Derating": "* Notice derating", "Product Characteristics": "To ensure ingress protection, please check the O-ring\u2019s position before connecting. Improperly positioned O-ring leads to ingress protection potential\nfailure."}, "Variants": {"Item #": ["934853163", "934853164", "934853165", "934853166", "934853167", "934853168"], "Item Description": ["RST 5L-RKT 5L-949/0,3 M", "RST 5L-RKT 5L-949/0,6 M", "RST 5L-RKT 5L-949/1 M", "RST 5L-RKT 5L-949/2 M", "RST 5L-RKT 5L-949/5 M", "RST 5L-RKT 5L-949/10 M"], "Cable Length": ["0.3 m", "0.6 m", "1 m", "2 m", "5 m", "10 m"]}};
+
+ // Function to create a table from an object
+ function createTableFromObject(obj, tableName) {
+ var html = '<div class="table-container">';
+ html += '<div class="table-caption">' + tableName + '</div>';
+ html += '<table>';
+
+ // Determine if the object values are arrays (for columns)
+ var areValuesArrays = Object.values(obj).every(value => Array.isArray(value));
+
+ if (areValuesArrays) {
+ // Handle as columns
+ var keys = Object.keys(obj);
+ var maxLength = Math.max(...Object.values(obj).map(arr => arr.length));
+
+ // Headers
+ html += '<tr>';
+ keys.forEach(key => {
+ html += '<th>' + key + '</th>';
+ });
+ html += '</tr>';
+
+ // Rows
+ for (var i = 0; i < maxLength; i++) {
+ html += '<tr>';
+ keys.forEach(key => {
+ var value = obj[key][i] || '';
+ html += '<td>' + value + '</td>';
+ });
+ html += '</tr>';
+ }
+ } else {
+ // Handle as rows
+ html += '<tr><th>Property</th><th>Value</th></tr>';
+ for (var key in obj) {
+ html += '<tr>';
+ html += '<td>' + key + '</td>';
+ html += '<td>' + obj[key] + '</td>';
+ html += '</tr>';
+ }
+ }
+
+ html += '</table>';
+ html += '</div>'; // Close table-container
+ return html;
+ }
+
+ // Function to append the tables to the body
+ function appendTables(jsonData) {
+ var container = document.createElement('div');
+ for (var key in jsonData) {
+ var table = createTableFromObject(jsonData[key], key);
+ container.innerHTML += table;
+ }
+ document.body.appendChild(container);
+ }
+
+
+ // Call the function with your JSON data
+ appendTables(jsonData);
+
+</script>
+</body>
+</html>
\ No newline at end of file