<div id="app"> </div> был дочерним элементом body и содержал в себе уже весь остальном контент, в т.ч. мои js-скрипты.
Я переместила все js-скрипты вне этого контейнера. И все скрипты заработали.

Так не подойдёт? https://jsfiddle.net/z6qtrLke/

Вы в tr() и td() каждый раз создаёте новую таблицу, а не строку/столбец.

function tr(){
texta.value += '<table><tbody>'; // Один раз создаёте таблицу
    for(let i = 0; i<table1.value;i++){
	texta.value += '<tr>';
    td(); /* Вызов td() должен быть тут, внутри строки, и нигде больше */
  texta.value += '</tr>';
    
//    texta.value += `<table><tbody><tr><td style = "width:${table4.value}px;height:${table3.value}px;border:${table5.value}px ${tableselect.value} ${colorselect.value}"</td></tr>`
    }
}

function td(){
    for(let i = 0; i<table2.value;i++){
    texta.value += '<td style = "width:${table4.value}px;height:${table3.value}px;border:${table5.value}px ${tableselect.value} ${colorselect.value}"</td>';
  
 //       texta.value +=  `<table><tbody><tr><td style = "width:${table4.value}px;height:${table3.value}px;border:${table5.value}px ${tableselect.value} ${colorselect.value}"</td></tr>`

    }
}