loginForm without table

I have a loginForm at http://dot.kr/x-test/loginForm.php
I use table for the page.
How can I make it without table for the same shape of the loginForm?

I’d put the button below the line, then it’s only a matter of some <div>s with appropriate padding/width.

PS. use <label>s where appropriate.

Your site is timing out for me in my browser. Is your server down? You can take a picture of your site if you want - you are asking a theoretical question here so it’s easy to tell you how I would do it.

Hi, zilong.

I believe something like this is what you are seeking.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
<!--
http://www.sitepoint.com/community/t/loginform-without-table/98065
Sep 17, 4:52 AM
zilong
-->
    <title>loginForm</title>
    <style>
html,body {
    margin:0;
    padding:0;
}
form {
    display:table;
    background:gray;
    white-space:nowrap;
    padding:.25em;
}
.fieldwrap {
    display:inline-block;
    vertical-align:middle;
    text-align:right;
}
.fieldwrap > div {
    margin:0 0 .25em;
}
label {
    color:white;
    text-align:right;
}
p {
    border-top:2px solid white;
    color:white;
    text-align:center;
    padding:.25em 0;
    margin:.125em 0 0;
}
a {
    text-decoration:none;
    color:white;
}
    </style>
</head>
<body>

<form action="#">
    <div class="fieldwrap">
        <div>
            <label for="username">ID</label>
            <input type="text" id="username">
        </div>
        <div>
            <label for="pwd">password</label>
            <input type="text" id="pwd">
        </div>
    </div>
    <input type="submit" value="submit">
    <p><a href="">join</a></p>
</form>

</body>
</html>

Thank you very much this is the design that I need

1 Like

You’re welcome, zilong. Thank you for the feedback.