How can I align this input button in the center of the table row?

February 9, 2022

I understand that this is a very basic question, but I’ve searched stackoverflow and I cannot find a question that helps me solve my own issue. I am trying to center align the contents (an input with type="submit") of a table cell (td element). I can center the contents in the cell, but the cell itself is not stretching the width of the table. I cannot find any css attribute that helps me to spread this td element the width of the table. How can I do this?

td {border: 1px solid black;}
th {border: 1px solid black;}

<div class="content-container">
            
            
<main id="registration">
<div class="form">
    <h1>Register For an Account</h1>
    <form action="#" method="post">
        <table>
            <tbody><tr><th><label for="id_username">Username:</label></th><td><input type="text" name="username" required="" id="id_username"></td></tr>
<tr><th><label for="id_first_name">First name:</label></th><td><input type="text" name="first_name" required="" id="id_first_name"></td></tr>
<tr><th><label for="id_last_name">Last name:</label></th><td><input type="text" name="last_name" required="" id="id_last_name"></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" required="" id="id_email"></td></tr>
<tr><th><label for="id_birthdate">Birthdate:</label></th><td><input type="text" name="birthdate" required="" id="id_birthdate"></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input type="password" name="password" required="" id="id_password"></td></tr>
<tr><th><label for="id_confirm_password">Confirm password:</label></th><td><input type="password" name="confirm_password" required="" id="id_confirm_password"></td></tr>
            <tr>
                <!-- This is the issue -->
                <td align="center" style="border: 1px solid black; width: 100%; text-align: center; margin: auto; display: block; horizontal-align: middle;" colspan=2><input type="submit" value="Register"></td>
            </tr>
        </tbody></table>
        
    </form>
</div>
</main>
</div>

>Solution :

Add colspan="2" also remove other style

<tr>
    <!-- This is the issue -->
    <td align="center" colspan="2" style="border: 1px solid black; horizontal-align: middle;" colspan=2><input type="submit" value="Register"></td>
</tr>

td {border: 1px solid black;}
th {border: 1px solid black;}

<div class="content-container">
            
            
<main id="registration">
<div class="form">
    <h1>Register For an Account</h1>
    <form action="#" method="post">
        <table>
            <tbody><tr><th><label for="id_username">Username:</label></th><td><input type="text" name="username" required="" id="id_username"></td></tr>
<tr><th><label for="id_first_name">First name:</label></th><td><input type="text" name="first_name" required="" id="id_first_name"></td></tr>
<tr><th><label for="id_last_name">Last name:</label></th><td><input type="text" name="last_name" required="" id="id_last_name"></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" required="" id="id_email"></td></tr>
<tr><th><label for="id_birthdate">Birthdate:</label></th><td><input type="text" name="birthdate" required="" id="id_birthdate"></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input type="password" name="password" required="" id="id_password"></td></tr>
<tr><th><label for="id_confirm_password">Confirm password:</label></th><td><input type="password" name="confirm_password" required="" id="id_confirm_password"></td></tr>
            <tr>
                <!-- This is the issue -->
                <td align="center" colspan="2" style="border: 1px solid black; horizontal-align: middle;" colspan=2><input type="submit" value="Register"></td>
            </tr>
        </tbody></table>
        
    </form>
</div>
</main>
</div>