html - 如何将表格中的特定元素居中?

标签 html css html-table

我创建了一个注册表单,之后它将使用 PHP 与 SQL 数据库连接。问题是我无法将提交按钮置于表格的中心。据我所知,HTML5 不支持表格功能。所有 HTML 代码都在 PHP 文件中。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body> 
        <section>
            <form action="#" method="post">
            <table> 
            <tr>
                <td><label>Full Name:</label><td>
                <td><input type="text" placeholder="Full Name" name="name" ><br></td>
            </tr>
            <tr>
                <td><label>E-mail:</label><td>
                <td><input type="email" placeholder="E-mail" name="email" ><br><td>
            </tr>
            <tr>
                <td><label>Username:</label><td>
                <td><input type="text" placeholder="Username" name="username" ><br><td>
            </tr>
            <tr>
                <td><label>Password:</label><td>
                <td><input type="password" placeholder="Password" name="password" ><br><td>
            </tr>
            <tr>
                <td><input type="submit" name="Registration" value="Submit" ><br><td>
            </tr>
            </table>
        </form>
        </section>
    </body>
</html>
body {
    background: #40E0D0;
    background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
    background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
}
form {
    text-align: center;
    display: flex;
    justify-content: center;
}
table {
    display: flex;
    background-color: lightcyan;
    margin: 15px;
    padding: 15px;
}
tr {
    text-align:center;
}
td {
    margin-right: 10px;
}
input {
    width: 300px;
    height: 25px;
}

最佳答案

1).您应该在最后一个 td 中添加一个 colspan。 2).确保结束标签的格式正确 -> 你应该使用 </td> ,当您关闭“td”标签时。请参阅下面更新的 HTML:

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body> 
        <section>
            <form action="#" method="post">
            <table> 
            <tr>
                <td><label>Full Name:</label></td>
                <td><input type="text" placeholder="Full Name" name="name" ></td>
            </tr>
            <tr>
                <td><label>E-mail:</label></td>
                <td><input type="email" placeholder="E-mail" name="email" ></td>
            </tr>
            <tr>
                <td><label>Username:</label></td>
                <td><input type="text" placeholder="Username" name="username" ></td>
            </tr>
            <tr>
                <td><label>Password:</label></td>
                <td><input type="password" placeholder="Password" name="password" ></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" name="Registration" value="Submit" ></td>
            </tr>
            </table>
        </form>
        </section>
    </body>
</html>

关于html - 如何将表格中的特定元素居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56353021/

相关文章:

html - 屏幕分辨率更改时绝对图像位置不起作用

html - 放大和缩小时网页元素会改变大小

php - 选择两个mysql表中的所有数据

javascript - 具有隐藏行的克隆表

html5应用程序缓存 list 文件进度错误

html - Css 打印第二个 div

javascript - 单击一个 div 以便仅打开其子级,而不打开同级的其他 div

html - 使用 Bootstrap 进行页面布局

css - 覆盖 CSS 媒体查询

html - 在表格单元格内尽可能地拉伸(stretch) div