建立HTML表格，並且讓TR變成Form表單

一般傳統設計
我們可能會在FORM表單下包著TABLE，這樣當所有的element要被送出時，我們都會透過submit按鈕將資料全部送出，但假使我們的資料有分區塊呢？

把FORM包在TABLE底下，好像可以區分出好幾列，也可以個別送出表單資料且一如往昔，但是這樣的設計就w3c的規範是不正規的、無效的(DOM沒有這樣規定)。所以當使用javascript要取用DOM元素時，是有問題的，試想FORM的子元素或是TR的子元素，絕對不會是FORM或是TD，這樣想起來就很怪，而且一定出錯。

<table>
    <tr>
        <form method="GET" action="whatever">
            <td><input type="text"/></td>
            <td><input type="text"/></td>
        </form>
    </tr>
    <tr>
        <form method="GET" action="whatever">
            <td><input type="text"/></td>
            <td><input type="text"/></td>
        </form>
    </tr>
</table>

因此現在很多的網頁設計都改用DIV的方式來設計並把表單包進來。

最近看到一個有趣的設計，可以利用CSS的方式，融合表單以及TABLE的樣式，做出一個像TABLE一樣的表格，而且又可以分區塊送出FORM需要的動作ACTION。主要用的就是display:table、display:table-row、display:table-cell

<style>
    DIV.table    {
        display:table;    }
    FORM.tr, DIV.tr    {
        display:table-row;    }
    SPAN.td    {
        display:table-cell;    }
</style>
...<br />
<div class="table">
    <form action="blah.html" class="tr" method="post">
        <span class="td"><input type="text" /></span>
        <span class="td"><input type="text" /></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...</div> 

參考網頁：stackoverflow - Create a HTML table where each TR is a FORM