Question

I am trying to create a table in which the border will appear like a login box.

<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> 

What happens is that even the table cells have border and the border sucks. I want to remove cell border. The border should only be wrapping around the table. I am totally new to this.

Thanks in advance.

Answer 1

Use 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>

FYI: I added colspan="2" to your last <td> in order to make the border go all the way around.