如何让两个表格(表格)精美对齐,看起来很漂亮

时间:2013-09-18 04:31:28

标签: html css forms html-table

[更新]:一个包含代码的JSFiddle(或者我能够根据需要提出的) - http://jsfiddle.net/CWwvC/1/

我很抱歉打扰你这么蹩脚的事情,但我遇到了问题 - 你可以在这里看到问题 -

过去3个小时我一直在Google上搜索,我觉得现在已经完全崩溃= [有解决方案,我觉得我的思想已被阻挡,我不能再思考= [
我将粘贴整个表单HTML和与之相关的CSS部分 非常感谢任何帮助! 在此先感谢!!!

HTML:

<form name='addUser' action="" method='post'>
    <table id="table" style="float: left;">
        <tr>
            <td><label for='professionOfChoice'>Desired Profession:</label></td>

            <td><select id='professionOfChoice' name='professionOfChoice' />

                <option value="1" <?php echo $professionOfChoice == '1' ?'selected="selected"' : '';?>>Journalist</option>
                <option value="2" <?php echo $professionOfChoice == '2' ?'selected="selected"' : '';?>>HR</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>
                <br/>
            </td>
        </tr>
        <tr>
            <td><label for='username'>Desired Username:</label></td>

            <td><input type='text' id='username' name='username' value="<?php echo $username;?>" />


                <?php echo empty($errors['username']) ? '' :
                    '<font color="red">'.$errors['username'].'</font>';?>
            </td>
            <td id="message"></td>
        </tr>
        <tr>
            <td>
                <br />
            </td>
        </tr>              

        <tr>
            <td><label for='email'>Email:</label></td>

            <td><input type='text' id='email' name='email' value="<?php echo $email;?>" />
                <?php echo empty($errors['email']) ? '' : '<font color="red">'.$errors['email'].'</font>';?> </td>
        </tr>

        <tr>
            <td>

                <br />
            </td>
        </tr>

        <tr>

            <td><label for='price'>Password:</label></td>

            <td><input type='password' id='password' name='password' />


                <?php echo empty($errors['password']) ? '' : 
                    '<font color="red">'.$errors['password'].'</font>';?>
            </td>
        </tr>

        <tr>
            <td>
                <br />
            </td>
        </tr>

        <tr>
            <td><label for='password2'>Repeat Password:</label></td>

            <td><input type='password' id='password2' name='password2' />

                <?php echo empty($errors['password2']) ? '' : 
'<font color="red">'.$errors['password2'].'</font>';?>
            </td>
        </tr>

        <tr>
            <td>
                <br />
            </td>
        </tr>                
        <tr>
            <td><label for='gender'>Gender:</label></td>
            <td><select id='gender' name='gender'>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>
                <br />
            </td>
        </tr>

        <tr>
            <td><input type='submit' name='submit' value='Start!' /></td>
        </tr>

        <tr>
            <td>
                <br />
            </td>
        </tr>                
    </table>
</form>
<form action="" method='post'>
    <table id="login">
        <?php echo empty($errors['login']) ? '' : '<font color="red">'.$errors['login'].'</font>';?>
        <tr>
            <td><input type='text' name='user' value="<?php echo $username;?>" /></td>
        </tr>


        <tr>
            <td><input type='password' id='password' name='password' /></td>
        </tr>
        <tr>
            <td><button type="submit">Login</button></td>
        </tr>
    </table>
</form>

CSS:

#login {
    width: 30%;
    margin-left: 60%;
    font: bold italic 12px/30px Georgia, serif;
    background: rgba(54, 25, 25, .5);
}
table, th, td {
    border-collapse:collapse;
    width:30%;
    margin-left:20%;
    font: bold italic 12px/30px Georgia, serif;
    background: rgba(54, 25, 25, .5);
}

0 个答案:

没有答案