如何自定義html表格邊框？

Question

我正在嘗試創建一個表格，其中邊框將顯示爲一個登錄框。

<table border="1"> 
<tr> 
    <td>Username: </td> 
    <td><input type="text" name="username" /></td> 
</tr> 
<tr> 
    <td>Password: </td> 
    <td><input type="password" name="password" /></td> 
</tr> 
<tr> 
    <td><input type="submit" value="Log In" /></td> 
</tr> 
</table> 

會發生什麼事，即使表格單元格有邊框和邊框很爛。我想刪除單元格邊框。邊界只應該圍繞桌子。我對此完全陌生。

在此先感謝。

Answer 1

使用CSS

<style type="text/css"> 
.loginbox { 
    border-collapse: collapse; 
    border-width: 1px; 
    border-style: solid 
} 
</style> 

<table class="loginbox"> 
<tr> 
    <td>Username: </td> 
    <td><input type="text" name="username" /></td> 
</tr> 
<tr> 
    <td>Password: </td> 
    <td><input type="password" name="password" /></td> 
</tr> 
<tr> 
    <td colspan="2"><input type="submit" value="Log In" /></td> 
</tr> 
</table> 

僅供參考：我將colspan="2"添加到您的最後一個<td>中，以便使邊界四處走動。

Answer 2

如果使用下面的CSS，

table { 
    border: thin solid black; 
} 

，這將使你身邊只有表邊框，您可以在http://jsfiddle.net/2CdwW/

Answer 3

使用CSS看到它的jsfiddle把邊界上表代替：

<table style="border: 1px solid black"> 
    <tr> 
      <td>Username: </td> 
      <td><input type="text" name="username" /></td> 
    </tr> 
    <tr> 
      <td>Password: </td> 
      <td><input type="password" name="password" /></td> 
    </tr> 
    <tr> 
      <td colspan="2"><input type="submit" value="Log In" /></td> 
    </tr> 
</table>