HTML 错误 表格行宽 2 列，小于第一行建立的列数 (3)

Question

I am getting the same HTML error on the validator, if someone can help that would be wonderful. I will put the code below.

    <section class = "blog container">
      <div class = "title">
         <h2>Donate</h2>
         <div>
            <h2>Donate</h2>
         </div>
      </div>
      <form id="donationInfo">
         <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><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><label for="telephone">Phone Number:</label><input type="tel" id="telephone" tabindex="7" size="25"></td>
            </tr>
            <tr>
               <td><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>Yes <input type="checkbox" name="agreeYes" value="Yes" tabindex="12">
                   No <input type="checkbox" name="agreeNo" value="No" tabindex="13">
               </td>
            </tr>
         </table>
         <br/> 
      </form>
   </section>

Here is the picture of the warnings I am getting on the validator. Thanks in advane for any and all help.

Answer 1

You need to have the same number of columns in every row. Your first row ( <tr> ) contains 3 columns ( <td> ) - all next rows should have the same number (in general, it should be the biggest number throughout the entire table).

There are 2 ways to solve that:

• add empty additional columns in every row
• make the existed column to be wider by using colspan attribute . For instance, the next example

    <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>

Also, make sure you closed all the tags, eg in 3d row, you don't close the first column