Created
February 19, 2026 10:06
-
-
Save EncodeTheCode/bd3e59867140f2c51acf6bb40d8bb277 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>Simple HTML5 Table From Array</title> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <style> | |
| body{ | |
| font-family: Arial, Helvetica, sans-serif; | |
| background:#f4f6f8; | |
| padding:20px; | |
| } | |
| .table-wrapper{ | |
| margin-bottom:30px; | |
| overflow-x:auto; | |
| } | |
| table{ | |
| width:100%; | |
| border-collapse:collapse; | |
| background:#ffffff; | |
| } | |
| thead th{ | |
| background:#2c3e50; | |
| color:#ffffff; | |
| padding:10px; | |
| text-align:left; | |
| } | |
| tbody td{ | |
| padding:10px; | |
| border-bottom:1px solid #ddd; | |
| } | |
| tbody tr:nth-child(even){ | |
| background:#f2f2f2; | |
| } | |
| tbody tr:hover{ | |
| background:#e6f2ff; | |
| } | |
| caption{ | |
| caption-side:top; | |
| text-align:left; | |
| font-weight:bold; | |
| margin-bottom:8px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Containers for tables --> | |
| <div id="table1" class="table-wrapper"></div> | |
| <div id="table2" class="table-wrapper"></div> | |
| <script> | |
| /* ============================= | |
| TABLE DATA ARRAYS | |
| Each array represents one table | |
| ============================== */ | |
| var table1Data = [ | |
| { Id: 1, name: "Alice", age: 30, role: "Designer" }, | |
| { Id: 2, name: "Bob", age: 28, role: "Developer" }, | |
| { Id: 3, name: "Charlie", age: 35, role: "Manager" } | |
| ]; | |
| var table2Data = [ | |
| { Skte: "A-100", product: "Keyboard", price: 49.99, stock: 12 }, | |
| { Skte: "B-200", product: "Mouse", price: 19.99, stock: 30 }, | |
| { Skte: "C-300", product: "Monitor", price: 199.99, stock: 5 } | |
| ]; | |
| /* ============================= | |
| GENERIC TABLE RENDER FUNCTION | |
| - data: array of objects | |
| - container: DOM selector | |
| - captionText: optional table title | |
| ============================== */ | |
| function renderTable(data, container, captionText) { | |
| if (!data || data.length === 0) return; | |
| var $table = $('<table>'); | |
| if (captionText) { | |
| $table.append($('<caption>').text(captionText)); | |
| } | |
| // Create header from object keys | |
| var keys = Object.keys(data[0]); | |
| var $thead = $('<thead>'); | |
| var $headerRow = $('<tr>'); | |
| keys.forEach(function(key) { | |
| $headerRow.append($('<th>').text(key)); | |
| }); | |
| $thead.append($headerRow); | |
| $table.append($thead); | |
| // Create body | |
| var $tbody = $('<tbody>'); | |
| data.forEach(function(row) { | |
| var $row = $('<tr>'); | |
| keys.forEach(function(key) { | |
| $row.append($('<td>').text(row[key])); | |
| }); | |
| $tbody.append($row); | |
| }); | |
| $table.append($tbody); | |
| $(container).append($table); | |
| } | |
| /* ============================= | |
| RENDER TABLES FROM ARRAYS | |
| ============================== */ | |
| $(document).ready(function() { | |
| renderTable(table1Data, '#table1', 'Employee Table'); | |
| renderTable(table2Data, '#table2', 'Product Table'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment