HTML验证器报错：表格行列数少于首行定义的3列如何修复？

报错原因 #

该错误是因为你的表格列数不统一：第一行<tr>定义了3个<td>，也就是整个表格的基准列数为3，但后续多个行的<td>数量少于3，同时还存在一处标签未闭合的语法问题，最终触发验证警告。

具体问题点 #

• 邮箱、日期所在行：仅2个<td>，列数不足
• 电话类型、手机号所在行：第一个<td>缺少闭合标签</td>，且同样仅2个<td>
• 捐款金额所在行：仅1个<td>，列数不足
• 同意条款所在行：仅2个<td>，列数不足

修复方案 #

给不足列数的单元格添加colspan属性实现跨列合并，使每行的总列数相加等于3，同时补全缺失的标签即可，修正后的表格代码如下：

<table class="center">
  <tr>
    <td><label for="title">Title:</label>
      Mr.<input type="radio" name="title" tabindex="-1">
      Mrs.<input type="radio" name="title">
      Ms.<input type="radio" name="title">
      Dr.<input type="radio" name="title">
    </td>
    <td><label for="fname">First Name:</label><input type="text" id="fname" tabindex="2" size="20" maxlength="20"></td>
    <td><label for="lname">Last Name:</label><input type="text" id="lname" tabindex="3" size="25" maxlength="20"></td>
  </tr>
  <tr>
    <td><label for="email">Email Address:</label><input type="email" id="email" tabindex="4" size="25"></td>
    <td colspan="2"><label for="date">Date:</label><input type="date" id="date" tabindex="5" size="25"></td>
  </tr>
  <tr>
    <td>
      <label for="phonetype">Phone Type:</label>
      <select id="phonetype">
        <option value="C">Cell</option>
        <option value="H">Home</option>
        <option value="W">Work</option>
        <option value="O">Other</option>
      </select>
    </td>
    <td colspan="2"><label for="telephone">Phone Number:</label><input type="tel" id="telephone" tabindex="7" size="25"></td>
  </tr>
  <tr>
    <td colspan="3"><label for="amount">Donation Amount:</label><input type="number" id="amount" tabindex="8"></td>
  </tr>
  <tr>
    <td><label for="ccNumber">Credit Card Number:</label><input type="text" id="ccNumber" tabindex="9" size="19"></td>
    <td><label for="security">Security Code:</label><input type="text" id="security" tabindex="10" size="4"></td>
    <td><label for="expiration">Expiration:</label><input type="text" id="expiration" tabindex="11" size="5"></td>
  </tr>
  <tr>
    <td>Agree to Terms:</td>
    <td colspan="2">Yes <input type="checkbox" name="agreeYes" value="Yes" tabindex="12">
        No <input type="checkbox" name="agreeNo" value="No" tabindex="13">
    </td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者Landon Byrd