HTML Table 显示不正确

Question

大家好，我最近在 HTML 创建了这个 table table。图片：http://imgur.com/wPXCwrd table（如图所示）完美创建，但创建了一个奇怪的空白行（图中标记为红色）。当我试图删除该代码时，QUESTIONS 行下方的整个单元格都发生了移动（图片 link:http://imgur.com/jBfmNGV）。如何删除 MEN 单元格后的空白单元格？

代码：

<!DOCTYPE html>
<html>      
    <body>
        <table align="left" border="1" cellpadding="3" cellspacing="3">
        <tbody>
        <tr>
            <td colspan="5">QUESTIONAIRE RESULTS</td>
        </tr>
        <tr>
            <td rowspan="3">QUESTIONS</td>
            <td colspan="2" rowspan="2">WOMEN</td>
            <td colspan="2" rowspan="2">MEN</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>YES</td>
            <td>NO</td>
            <td>YES</td>
            <td>NO</td>
        </tr>
        <tr>
            <td>Question 1</td>
            <td>42%</td>
            <td>58%</td>
            <td>61%</td>
            <td>39%</td>
        </tr>
        <tr>
            <td>Question 2</td>
            <td>53%</td>
            <td>47%</td>
            <td>69%</td>
            <td>31%</td>
        </tr>
        <tr>
            <td>Question 3</td>
            <td>26%</td>
            <td>74%</td>
            <td>51%</td>
            <td>49%</td>
        </tr>
        <tr>
            <td>Question 4</td>
            <td>40%</td>
            <td>60%</td>
            <td>60%</td>
            <td>40%</td>
        </tr>
    </tbody>
</table>
    </body>
</html>

Answer 1

只需删除：

<td>&nbsp;</td>

所以你的最终代码将是：

<!DOCTYPE html>
<html>      
    <body>
        <table align="left" border="1" cellpadding="3" cellspacing="3">
        <tbody>
        <tr>
            <td colspan="5">QUESTIONAIRE RESULTS</td>
        </tr>
        <tr>
            <td rowspan="3">QUESTIONS</td>
            <td colspan="2" rowspan="2">WOMEN</td>
            <td colspan="2" rowspan="2">MEN</td>
        </tr>
        <tr>

        </tr>
        <tr>
            <td>YES</td>
            <td>NO</td>
            <td>YES</td>
            <td>NO</td>
        </tr>
        <tr>
            <td>Question 1</td>
            <td>42%</td>
            <td>58%</td>
            <td>61%</td>
            <td>39%</td>
        </tr>
        <tr>
            <td>Question 2</td>
            <td>53%</td>
            <td>47%</td>
            <td>69%</td>
            <td>31%</td>
        </tr>
        <tr>
            <td>Question 3</td>
            <td>26%</td>
            <td>74%</td>
            <td>51%</td>
            <td>49%</td>
        </tr>
        <tr>
            <td>Question 4</td>
            <td>40%</td>
            <td>60%</td>
            <td>60%</td>
            <td>40%</td>
        </tr>
    </tbody>
</table>
    </body>
</html>

预览：https://jsfiddle.net/3q6n9v7k/

Answer 2

更正确的答案是更改 rowspan 和 colspan。

而不是

 <tr>
            <td rowspan="3">QUESTIONS</td> //
            <td colspan="2" rowspan="2">WOMEN</td>
            <td colspan="2" rowspan="2">MEN</td>
 </tr>

这样做

 <tr>
      <td rowspan="2">QUESTIONS</td>
      <td colspan="2" rowspan="1">WOMEN</td>
      <td colspan="2" rowspan="1">MEN</td>             
 </tr>

同时删除：

 <tr>
      <td>&nbsp;</td>
 </tr>

查看 Fiddle

HTML Table 显示不正确

HTML Table not displaying properly

html

html-table