I want to style my table as shown in picture

Question

Link to Image

I would like my table to look like the one in image with CSS. Is there a way to do it because I tried by my side as much as I could but did not work. I would appreciate your help.

Here is my HTML code

<div id="login_fields"> 
    <form id="login_form">
        <table>
          <tr>
            <td>User</td>
            <td><input type="text" name="user" id="user" /></td>
          </tr>
          <tr>
            <td>Password</td>
            <td><input type="password" name="password" id="password" /></td>
          </tr>
        </table>
    </form>
</div>

[What have you tried?](http://www.whathaveyoutried.com/) See [ask advice](http://stackoverflow.com/questions/ask-advice), please. — John Conde, Jan 23 '13 at 16:15
I wouldn't recommend using a table for this. Just a form with labels and input fields will do the trick. — zxqx, Jan 23 '13 at 16:16
Why the hell are you using a table. You haven't closed your
either — ediblecode, Jan 23 '13 at 16:17
Also, check out http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html. — Rémi Breton, Jan 23 '13 at 16:17
@danrhul I am closing form tag its just not in the code above and I am not familiar with divs so much that is why I am using table. If you have any good idea how to do the styling I would love to hear it — user1853834, Jan 23 '13 at 16:21
If you found that design on a website, a better option would be to see check their source code. Welcome to Stackoverflow. — Deepak Kamat, Jan 23 '13 at 16:32
@SidJoshi I only said because you included the closing `` tag. Which should come after the closing `` tag — ediblecode, Jan 23 '13 at 16:33

David Thomas · Accepted Answer · 2013-01-23T16:39:41.810

May I suggest amending your HTML (the table is entirely unnecessary), to the following:

<form action="#" method="post">
    <!-- using a label means that clicking the text automatically focuses
         the relevant input, the value of the 'for' attribute must match the 'id'
         of the relevant input though -->
    <label for="uName">User</label>
    <input id="uName" />
    <label for="pass">Password</label>
    <input type="password" id="pass" />
</form>

With the following CSS (amend colours and dimensions according to taste):

form {
    /* aesthetics, just to move the label/input pairs from the edge of the screen */
    padding: 1em;
}

label,
input {
    float: left; /* to allow for width to be given, and for clearing */
    border: 1px solid #999; /* amend the following as required */
    line-height: 1.2em;
    padding: 0.2em 0;
    font-size: 1em;
    height: 1.4em;
    margin-bottom: 0.8em;
}

input + label {
    clear: left; /* this styles a label element that immediately
                    follows an input, and forces a new-line */
}

label {
    text-indent: 0.5em; /* moves the text away from the curved corners */
    width: 30%;
    border-radius: 0.5em 0 0 0.5em; /* handles the curved corners */
}

input {
    width: 60%;
    border-radius: 0 0.5em 0.5em 0;
    outline: none;
}

input:focus,
input:active {
    box-shadow: inset 0 0 5px #55f; /* compensates for the fact I removed the
                                       default outline, and gives visual
                                       feedback to show the input is focused/active */
}

JS Fiddle demo.

It was kind of an accidental find. I was wondering why the characters were showing up in the password field while looking at the jsFiddle. — SeinopSys, Jan 23 '13 at 16:41

score 0 · Answer 2 · answered Jan 23 '13 at 16:25

0

I'd start replacing the TD's for User and Password with TH's, since they're table headers. Then I'd produce two images, one with the curve in the left and one with the curve in the right, then I'd apply then in the background. The CSS would look like that:

table tr th { background: url(bg-left.png) no-repeat; width: 100px; height: 40px; }

table tr td { background: url(bg-right.png) no-repeat; width: 250px; height: 40px; }

I've removed the font styling to keep it easy to read.

answered Jan 23 '13 at 16:25

Tiago César Oliveira

812
8
18

2

"I'd produce two images" Why not `border-radius`? – SeinopSys Jan 23 '13 at 16:27
You'd need to use images for graceful degradation anyways. But you're right. – Tiago César Oliveira Jan 23 '13 at 16:28

I want to style my table as shown in picture

2 Answers2