I dont like how rendered
 // Render all tables
    function renderTables() {
        tablesContainer.innerHTML = '';

        tables.forEach(table => {
            const tableContainer = document.createElement('div');
            tableContainer.className = 'table-container';

            // Table header with title and copy button
            const tableHeader = document.createElement('div');
            tableHeader.className = 'table-header';

            const tableTitle = document.createElement('h2');
            tableTitle.textContent = table.title;

            const copyBtn = document.createElement('button');
            copyBtn.className = 'copy-btn';
            copyBtn.textContent = 'Copy as Markdown';
            copyBtn.addEventListener('click', () => copyTableAsMarkdown(table));

            tableHeader.appendChild(tableTitle);
            tableHeader.appendChild(copyBtn);
            tableContainer.appendChild(tableHeader);

            // Create table element
            const tableElement = document.createElement('table');

            // Create table header
            const thead = document.createElement('thead');
            const headerRow = document.createElement('tr');

            table.headers.forEach(header => {
                const th = document.createElement('th');
                th.textContent = header;
                headerRow.appendChild(th);
            });

            thead.appendChild(headerRow);
            tableElement.appendChild(thead);

            // Create table body
            const tbody = document.createElement('tbody');

            table.rows.forEach(row => {
                const tr = document.createElement('tr');

                row.forEach((cell, index) => {
                    const td = document.createElement('td');

                    if (index === 1 && (cell === '[x]' || cell === '[ ]')) {
                        // Create checkbox for "Done" column
                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.className = 'checkbox';
                        checkbox.checked = cell === '[x]';
                        checkbox.addEventListener('change', (e) => {
                            row[index] = e.target.checked ? '[x]' : '[ ]';
                            updateTables();
                        });
                        td.appendChild(checkbox);
                    } else {
                        td.textContent = cell;
                    }

                    tr.appendChild(td);
                });

                tbody.appendChild(tr);
            });

            tableElement.appendChild(tbody);
            tableContainer.appendChild(tableElement);

            // Add row form
            const addRowForm = document.createElement('div');
            addRowForm.className = 'add-row';

            const taskInput = document.createElement('input');
            taskInput.type = 'text';
            taskInput.placeholder = 'New task name';

            const addBtn = document.createElement('button');
            addBtn.textContent = '+ ADD';
            addBtn.addEventListener('click', () => {
                if (taskInput.value.trim()) {
                    addRow(table.title, taskInput.value.trim());
                    taskInput.value = '';
                }
            });

            addRowForm.appendChild(taskInput);
            addRowForm.appendChild(addBtn);
            tableContainer.appendChild(addRowForm);

            tablesContainer.appendChild(tableContainer);
        });
    }

think how to improve? too big space for done column, text in task column is not multiline