html - 如何使用CSS设计表格网格？

Question

我想创建一个表格网格之类的图像，如下所示:

我也创建了一个表，但它看起来不像我们图片中的那样。这是代码

<table border="2" cellpadding="1">
  <tr border="1">
    <td>
      <p id="p_tit" class="p_tit">=====================================Q-05========================================</p>
    </td>
  </tr>
</table>
<table border="2" cellpadding="1">
  <tr border="1">
    <td colspan="2">
      <p id="p_tit3">Question</p>
      <p>1604100016</p>
    </td>
    <td colspan="2">
      <p id="p_tit3">
        A train 125 m long passes a man, running at 5 km/hr in the same direction in which the train is going, in 10 seconds. The speed of the train is:
      </p>
    </td>
  </tr>
  <tr border="1">
    <td colspan="2">
      <p id="p_tit3">Options</p>
    </td>
    <td colspan="2">
      <table align="center">
        <tr>
          <td id="opt">45 km/h</td>
          <td id="opt">50 km/h</td>
        </tr>
        <tr>
          <td id="opt">40 km/h</td>
          <td id="opt">55 km/h</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr border="1">
    <td colspan="2">
      <p id="p_tit3">Explanation</p>
    </td>
    <td colspan="2">
      <p>
        Explanation
      </p>
    </td>
  </tr>
</table>

它看起来像

那么如何创建如图 1 所示的表格？请帮助我。

谢谢

Answer 1

你想要的是属性rowspan。我在表格的第一行添加了(并给它 20% 的宽度，它不会折叠):

    <td rowspan="3" style="width: 20%;">          
    </td>

全表代码:

<table border="2" cellpadding="1">
    <tr border="1">
        <td colspan="2">
            <p id="p_tit3">Question</p>
            <p>1604100016</p>
        </td>
        <td colspan="2">
            <p id="p_tit3"> 
                A train 125 m long passes a man, running at 5 km/hr in the same direction in which the train is going, in 10 seconds. The speed of the train is:
            </p>
        </td>
        <td rowspan="3" style="width: 20%;">          
        </td>
    </tr>
    <tr border="1">
        <td colspan="2">
            <p id="p_tit3">Options</p>
        </td>
        <td colspan="2">
            <table align="center">
                <tr>
                    <td id="opt">45 km/h</td>
                    <td id="opt">50 km/h</td>
                </tr>
                <tr>
                    <td id="opt">40 km/h</td>
                    <td id="opt">55 km/h</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr border="1">
        <td colspan="2">
            <p id="p_tit3">Explanation</p>
        </td>
        <td colspan="2">
            <p>
                Explanation
            </p>
        </td>
    </tr>
</table>

这是一个 fiddle :https://jsfiddle.net/72htupn4/

这是一些关于 rowspan 的文档:https://www.w3schools.com/tags/att_td_rowspan.asp