Skip to content

Commit 8b7abd3

Browse files
TobiasMue91TobiasMue91
committed
- update html table generator with claude
1 parent 6acab16 commit 8b7abd3

File tree

1 file changed

+157
-86
lines changed

1 file changed

+157
-86
lines changed

‎tools/html_table_generator.html‎

Lines changed: 157 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,167 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>HTML Table Generator</title>
8-
<style>
9-
body {
10-
font-family: Arial, sans-serif;
11-
margin: 20px;
12-
}
13-
.container {
14-
display: flex;
15-
justify-content: center;
16-
flex-direction: column;
17-
align-items: center;
18-
}
19-
.form {
20-
display: flex;
21-
flex-direction: column;
22-
margin-bottom: 20px;
23-
}
24-
.form input {
25-
margin-bottom: 10px;
26-
}
27-
.form label {
28-
margin-bottom: 5px;
29-
}
30-
#generated-code {
31-
width: 100%;
32-
min-height: 100px;
33-
}
34-
</style>
4+
<link rel="icon"
5+
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<title>HTML Table Generator</title>
9+
<script src="https://cdn.tailwindcss.com/"></script>
3510
</head>
36-
<body>
37-
<div class="container">
38-
<h1>HTML Table Generator</h1>
39-
<form class="form" id="table-form">
40-
<label for="rows">Rows:</label>
41-
<input type="number" id="rows" min="1" value="3">
42-
<label for="columns">Columns:</label>
43-
<input type="number" id="columns" min="1" value="3">
44-
<label for="cell-width">Cell width (px):</label>
45-
<input type="number" id="cell-width" min="1" value="100">
46-
<label for="cell-height">Cell height (px):</label>
47-
<input type="number" id="cell-height" min="1" value="50">
48-
<label for="border">Border (px):</label>
49-
<input type="number" id="border" min="0" value="1">
50-
<label for="padding">Padding (px):</label>
51-
<input type="number" id="padding" min="0" value="5">
52-
<label for="spacing">Spacing (px):</label>
53-
<input type="number" id="spacing" min="0" value="2">
54-
<button type="submit">Generate Table</button>
55-
</form>
56-
<h2>Generated HTML Code:</h2>
57-
<textarea id="generated-code" readonly></textarea>
58-
<h2>Generated Table:</h2>
59-
<div id="result-table"></div>
11+
<body class="bg-gray-100 text-gray-800 font-sans">
12+
<div class="container mx-auto px-4 py-8 max-w-4xl"><h1 class="text-4xl font-bold text-center mb-8 text-blue-600">HTML
13+
Table Generator</h1>
14+
<form id="table-form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
15+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
16+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="rows">Rows</label><input
17+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
18+
id="rows" type="number" min="1" value="3"></div>
19+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2"
20+
for="columns">Columns</label><input
21+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
22+
id="columns" type="number" min="1" value="3"></div>
23+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="cell-width">Cell Width
24+
(px)</label><input
25+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
26+
id="cell-width" type="number" min="0" value="100"></div>
27+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="cell-height">Cell Height
28+
(px)</label><input
29+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
30+
id="cell-height" type="number" min="0" value="50"></div>
31+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="border-width">Border Width
32+
(px)</label><input
33+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
34+
id="border-width" type="number" min="0" value="1"></div>
35+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="padding">Padding
36+
(px)</label><input
37+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
38+
id="padding" type="number" min="0" value="5"></div>
39+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="header">Header
40+
Row</label><input class="mr-2 leading-tight" type="checkbox" id="header"></div>
41+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="striped">Striped
42+
Rows</label><input class="mr-2 leading-tight" type="checkbox" id="striped"></div>
43+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="border-color">Border
44+
Color</label><input class="shadow appearance-none border rounded w-full h-10" type="color"
45+
id="border-color" value="#000000"></div>
46+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="bg-color">Background
47+
Color</label><input class="shadow appearance-none border rounded w-full h-10" type="color" id="bg-color"
48+
value="#ffffff"></div>
49+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="text-color">Text
50+
Color</label><input class="shadow appearance-none border rounded w-full h-10" type="color"
51+
id="text-color" value="#000000"></div>
52+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="stripe-color">Stripe
53+
Color</label><input class="shadow appearance-none border rounded w-full h-10" type="color"
54+
id="stripe-color" value="#f3f4f6"></div>
55+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="font-family">Font
56+
Family</label><select
57+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
58+
id="font-family">
59+
<option value="Arial, sans-serif">Arial</option>
60+
<option value="Helvetica, sans-serif">Helvetica</option>
61+
<option value="Times New Roman, serif">Times New Roman</option>
62+
<option value="Courier New, monospace">Courier New</option>
63+
</select></div>
64+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="font-size">Font Size
65+
(px)</label><input
66+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
67+
id="font-size" type="number" min="8" value="14"></div>
68+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="hover-effect">Hover
69+
Effect</label><input class="mr-2 leading-tight" type="checkbox" id="hover-effect"></div>
70+
<div class="mb-4"><label class="block text-gray-700 text-sm font-bold mb-2" for="responsive">Responsive
71+
Table</label><input class="mr-2 leading-tight" type="checkbox" id="responsive"></div>
72+
</div>
73+
<div class="flex items-center justify-between mt-6">
74+
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
75+
type="submit">Generate Table
76+
</button>
77+
</div>
78+
</form>
79+
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"><h2 class="text-2xl font-bold mb-4">Generated HTML</h2>
80+
<textarea id="generated-code" class="w-full h-48 p-2 border rounded resize-none" readonly></textarea>
81+
<div class="flex justify-end mt-4">
82+
<button id="copy-btn"
83+
class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2">
84+
Copy HTML
85+
</button>
86+
<button id="download-btn"
87+
class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
88+
Download HTML
89+
</button>
90+
</div>
91+
</div>
92+
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"><h2 class="text-2xl font-bold mb-4">Preview</h2>
93+
<div id="table-preview" class="overflow-x-auto"></div>
94+
</div>
6095
</div>
61-
<script>
62-
function createTable(rows, columns, cellWidth, cellHeight, border, padding, spacing) {
63-
let table = `<table style="border-collapse: separate; border-spacing: ${spacing}px;">`;
64-
for (let i = 0; i < rows; i++) {
65-
table += '<tr>';
66-
for (let j = 0; j < columns; j++) {
67-
table += `<td style="width: ${cellWidth}px; height: ${cellHeight}px; border: ${border}px solid black; padding: ${padding}px;">Cell ${i + 1}, ${j + 1}</td>`;
68-
}
69-
table += '</tr>';
70-
}
71-
table += '</table>';
72-
return table;
73-
}
74-
const form = document.getElementById('table-form');
75-
const generatedCode = document.getElementById('generated-code');
76-
const resultTable = document.getElementById('result-table');
96+
<script>const form = document.getElementById('table-form');
97+
const generatedCode = document.getElementById('generated-code');
98+
const tablePreview = document.getElementById('table-preview');
99+
const copyBtn = document.getElementById('copy-btn');
100+
const downloadBtn = document.getElementById('download-btn');
77101

78-
form.addEventListener('submit', (e) => {
79-
e.preventDefault();
80-
const rows = parseInt(form.rows.value);
81-
const columns = parseInt(form.columns.value);
82-
const cellWidth = parseInt(form['cell-width'].value);
83-
const cellHeight = parseInt(form['cell-height'].value);
84-
const border = parseInt(form.border.value);
85-
const padding = parseInt(form.padding.value);
86-
const spacing = parseInt(form.spacing.value);
87-
88-
const table = createTable(rows, columns, cellWidth, cellHeight, border, padding, spacing);
89-
generatedCode.value = table;
90-
resultTable.innerHTML = table;
91-
});
92-
</script>
102+
function generateTable() {
103+
const rows = parseInt(document.getElementById('rows').value);
104+
const cols = parseInt(document.getElementById('columns').value);
105+
const cellWidth = document.getElementById('cell-width').value;
106+
const cellHeight = document.getElementById('cell-height').value;
107+
const borderWidth = document.getElementById('border-width').value;
108+
const padding = document.getElementById('padding').value;
109+
const header = document.getElementById('header').checked;
110+
const striped = document.getElementById('striped').checked;
111+
const borderColor = document.getElementById('border-color').value;
112+
const bgColor = document.getElementById('bg-color').value;
113+
const textColor = document.getElementById('text-color').value;
114+
const stripeColor = document.getElementById('stripe-color').value;
115+
const fontFamily = document.getElementById('font-family').value;
116+
const fontSize = document.getElementById('font-size').value;
117+
const hoverEffect = document.getElementById('hover-effect').checked;
118+
const responsive = document.getElementById('responsive').checked;
119+
let html = `<table style="border-collapse: collapse; font-family: ${fontFamily}; font-size: ${fontSize}px; width: 100%;">`;
120+
if (header) {
121+
html += `<thead><tr style="background-color: ${bgColor};">`;
122+
for (let i = 0; i < cols; i++) {
123+
html += `<th style="border: ${borderWidth}px solid ${borderColor}; padding: ${padding}px; color: ${textColor}; width: ${cellWidth}px; height: ${cellHeight}px;">Header ${i + 1}</th>`;
124+
}
125+
html += '</tr></thead>';
126+
}
127+
html += '<tbody>';
128+
for (let i = 0; i < rows; i++) {
129+
const rowBgColor = striped && i % 2 !== 0 ? stripeColor : bgColor;
130+
html += `<tr style="background-color: ${rowBgColor};">`;
131+
for (let j = 0; j < cols; j++) {
132+
html += `<td style="border: ${borderWidth}px solid ${borderColor}; padding: ${padding}px; color: ${textColor}; width: ${cellWidth}px; height: ${cellHeight}px;">${header && i === 0 ? '' : (`Cell ${i + 1},${j + 1}`)}</td>`;
133+
}
134+
html += '</tr>';
135+
}
136+
html += '</tbody></table>';
137+
if (hoverEffect || responsive) {
138+
html = `<style>${hoverEffect ? `table tr:hover{background-color:#ddd !important;}` : ''}${responsive ? `@media screen and (max-width:600px){table,thead,tbody,tr,td{display:block;}thead tr{position:absolute;top:-9999px;left:-9999px;}tr{margin-bottom:15px;}td{border:none;position:relative;padding-left:50% !important;}td:before{content:attr(data-label);position:absolute;left:6px;width:45%;padding-right:10px;white-space:nowrap;text-align:left;font-weight:bold;}}` : ''}}</style>` + html;
139+
}
140+
return html;
141+
}
93142

143+
form.addEventListener('submit', (e) => {
144+
e.preventDefault();
145+
const tableHtml = generateTable();
146+
generatedCode.value = tableHtml;
147+
tablePreview.innerHTML = tableHtml;
148+
});
149+
copyBtn.addEventListener('click', () => {
150+
generatedCode.select();
151+
document.execCommand('copy');
152+
alert('HTML copied to clipboard!');
153+
});
154+
downloadBtn.addEventListener('click', () => {
155+
const blob = new Blob([generatedCode.value], {type: 'text/html'});
156+
const url = URL.createObjectURL(blob);
157+
const a = document.createElement('a');
158+
a.href = url;
159+
a.download = 'table.html';
160+
document.body.appendChild(a);
161+
a.click();
162+
document.body.removeChild(a);
163+
URL.revokeObjectURL(url);
164+
});</script>
94165
<script src="../sidebar.js"></script>
95166
</body>
96167
</html>

0 commit comments

Comments
 (0)