在Web前端開發中，頁面布局是非常重要的一部分。而使用tables布局是一種非常常見的方式。JavaScript正好可以幫助我們實現這種布局。下面，我們就來看一下如何使用JavaScript來處理tables布局。
首先，讓我們來看一個簡單的例子。假設我們要實現一個表格布局。這個表格需要包含兩列，第一列是標題，第二列是內容。我們可以使用HTML的table標簽來實現這個表格，并設置table標簽的id為“myTable”。下面的JavaScript代碼可以用來初始化這個表格：

var table = document.createElement('table');
table.id = 'myTable';
document.body.appendChild(table);
var tr = document.createElement('tr');
table.appendChild(tr);
var td1 = document.createElement('td');
tr.appendChild(td1);
td1.innerHTML = 'Title';
var td2 = document.createElement('td');
tr.appendChild(td2);
td2.innerHTML = 'Content';

上面的代碼中，我們首先創建了一個table元素，并設置了它的id屬性。然后，創建了一個tr元素，并將它添加到table中。接下來，創建了兩個td元素，其中第一個td元素的innerHTML設置為'Title'，第二個td元素的innerHTML設置為'Content'。最后，將這兩個td元素添加到tr元素中。
通過上面的代碼，我們成功地創建了一個包含兩列的表格。接下來，我們看看如何使用JavaScript來動態地添加行和單元格到這個表格。
如果我們想要在表格中添加一行，我們可以使用以下代碼：

var table = document.getElementById('myTable');
var tr = document.createElement('tr');
table.appendChild(tr);
var td1 = document.createElement('td');
tr.appendChild(td1);
td1.innerHTML = 'Title2';
var td2 = document.createElement('td');
tr.appendChild(td2);
td2.innerHTML = 'Content2';

上面的代碼中，我們首先使用getElementById方法獲取到了我們之前創建的表格。然后，創建了一個新的tr元素，并將它添加到table中。接下來，創建了兩個td元素，并設置它們的innerHTML屬性。最后，將這兩個td元素添加到新創建的tr元素中。
如果我們想要在表格中添加一個單元格，我們可以使用以下代碼：

var table = document.getElementById('myTable');
var trs = table.getElementsByTagName('tr');
var lastTr = trs[trs.length-1];
var td3 = document.createElement('td');
lastTr.appendChild(td3);
td3.innerHTML = 'Extra Content';

上面的代碼中，我們首先使用getElementById方法獲取到了我們之前創建的表格。然后，使用getElementsByTagName方法獲取到了所有的tr元素。接下來，使用最后一個tr元素作為父元素，創建了一個新的td元素，并設置它的innerHTML屬性。最后，將這個td元素添加到最后一個tr元素中。
通過上面的例子，我們可以看出，在JavaScript中使用tables布局并不需要很多代碼。我們只需要簡單地使用createElement、appendChild和innerHTML等方法就可以輕松地創建和修改表格了。