JeffHung.Blog

之前在這篇《回應 zmx: 該怎麼說 HTTP？》提到了所謂的「在 <table> 和 <tr> 之間隱藏 <form> 的技巧」，就此解釋一下。

<form> 是一個 CSS 屬性 display 為 block 的 HTML tag，所以他的呈現，會是一個矩型的區域，不管在 IE 或是在 mozilla/firefox (gecko) 之下，都會有一個特點：<form> 的內含區域的下方會有一塊留白。這是什麼意思呢？讓我們來看看範例就知道。

範例一：一個 <table> 內含一個 <form>，<form> 再內含一個 <table>：

<table border="1">  <tr>    <td>      <form>        <table border="1">          <tr>            <td>&lt;form&gt; outside &lt;table&gt;</td>          </tr>        </table>      </form>    </td>  </tr></table>

由於已知 <table> 的大小，取決於內含物的大小，故從這個範例，我們可以看到，<form> 的下方多撐出了一塊留白。 為了消除這一塊留白，這個「在 <table> 和 <tr> 之間隱藏 <form> 的技巧」就可以派的上用場，請看範例：

範例二：同範例一，但把 <form> 夾在 <table> 和 <tr> 之間：

<table border="1">  <form>    <tr>      <td>        <table border="1">          <tr>            <td>&lt;form&gt; between &lt;table&gt; and &lt;tr&gt;</td>          </tr>        </table>      </td>    </tr>  </form></table>

由於 <form> 被夾在 <table> 和 <tr> 之間，而 <table> 和 <tr> 之間，實際上是無空間 (意義) 的，因此，<form> 的留白，被 <table> 給消除掉了。

不過，這一招實際上不是標準的 HTML，依照《HTML4.01 Specification》的 The TABLE element 這一節的說法，在 <table> 內可以接的 tag 只有 <caption>、<col>、<colgroup>、<thead>、<tfoot> 和 <tbody>，<form> 並不在其中。因此，把「<form> 夾在 <table> 和 <tr> 之間」的技巧，實際上是不合法的 HTML 寫法。不過，「<table> 內不可以直接接 <tr>」的這條規則，大家也都沒有在遵守，所以，有需要的人，「<form> 夾在 <table> 和 <tr> 之間」也就勉強用用吧。:-)