Как я могу центрировать определенный элемент в таблице? - PullRequest
Новая
       16

Как я могу центрировать определенный элемент в таблице?

0 голосов
/ 29 мая 2019

Я создаю одну форму регистрации, где она впоследствии будет связана с базой данных SQL с использованием PHP. Проблема в том, что я не могу центрировать кнопку отправки в таблице. Насколько я знаю, 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 Ответ

0 голосов
/ 29 мая 2019

1). Вы должны добавить 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>
...