Question

在第一行中，我有四列。第2-4行我有2行，以帮助格式化。为了避免验证警告，是否还有更合适的方法？这只是一个学校项目，没有什么紧张或什么的，但我想做对。

<div>
            <h2>Personal Information</h2>
            <form method="post">
                <table class = "center">
                    <tr>
                        <td style = "text-align:right;">First Name:</td>
                        <td>
                            <input name = "fname" type = "text"
                                size = "25" maxlength = "20"
                                required autofocus>
                        </td>

                        <td>Last Name:</td>
                        <td> 
                            <input name = "lname" type = "text"
                                size = "25" maxlength = "20">
                        </td>
                    </tr>

                    <tr>
                        <td>Email Address:</td>
                        <td>
                            <input name = "email" type = "email"
                                placeholder = "e.g., JohnDoe@example.com"
                                size = "25"
                                required title = "Must be a valid email address">
                        </td>
                    </tr>

                    <tr>
                        <td style = "text-align:right;">Gender:</td>
                        <td style = "text-align:left">
                            <label>Male</label>
                                <input name = "gender" type = "radio"
                                    value = "Male">     
                            <label>Female</label>                   
                                <input name = "gender" type = "radio"
                                    value = "Female">
                        </td>
                    </tr>

                    <tr>
                        <td style = "text-align:right;">Age Group:</td>
                        <td style = "text-align:left">

                            <label>Under 21</label>
                                <input name = "under" type = "checkbox"
                                    value = "under">
                            <label>21 - 40</label>
                                <input name = "to" type = "checkbox"
                                    value = "to">
                            <label>Over 40</label>
                                <input name = "over" type = "checkbox"
                                    value = "over">
                        </td>
                    </tr>
                </table>
            </form>
        </div>

Answer 1

对于只有2列的行，您可以使用colspan使一个单元格跨越多列，以便所有内容对齐。

例如：

<tr>
 <td>Email Address:</td>
 <td colspan="3">
  <input name = "email" type = "email" placeholder = "e.g., JohnDoe@example.com" size = "25" required title = "Must be a valid email address">
 </td>
</tr>

除此之外，还有一种更优雅的方式在表格中格式化表格吗？我有不同的数字行

1 个答案: