CODEWITHSUNDEEP
htmlcss
Son of Man
Son of Man

Reputation: 117

How to customize html table border?

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.

Upvotes: 2

Views: 5628

Answers (3)

Asaph
Asaph

Reputation: 162761

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.

Upvotes: 2

ETWW-Dave
ETWW-Dave

Reputation: 732

Use CSS to put the border on the table instead:

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

Upvotes: 1

user456814
user456814

Reputation:

If you use the following css,

table {
    border: thin solid black;
}

that will give you a border around the table only, you can see a jsfiddle for it at http://jsfiddle.net/2CdwW/

Upvotes: 1

Related Questions