html - 我想设计我的桌子，如图所示

Question

我希望我的表格看起来像带有 CSS 的图像。有没有办法做到这一点，因为我尽可能多地在我身边尝试但没有奏效。我会很感激你的帮助。

这是我的 HTML 代码

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

Answer 1

我可以建议将您的 HTML（table完全没有必要）修改为以下内容：

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

使用以下 CSS（根据口味修改颜色和尺寸）：

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 小提琴演示。

Answer 2

我会开始用 TH 替换用户和密码的 TD，因为它们是表头。然后我会制作两张图片，一张左边是曲线，一张右边是曲线，然后我会在背景中应用。CSS 看起来像这样：

表 tr th { 背景： url(bg-left.png) 无重复；宽度：100px；高度：40px；}

表 tr td { 背景： url(bg-right.png) 无重复；宽度：250px；高度：40px；}

我删除了字体样式以使其易于阅读。