在 <table> 和 <tr> 之間隱藏 <form> 的留白
之前在這篇《回應 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><form> outside <table></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><form> between <table> and <tr></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> 之間」也就勉強用用吧。:-)
2 Comments
这则技巧很棒! 感谢分享
理論上,用 CSS 會比較好。不過,在古老的年代,CSS 還不是那麼好用的時候,這招倒是蠻有用處的。
Post a Comment