html - 将 td 拆分为两列，如附图

Question

这里我附上了图片。我怎样才能像这张图片一样创建表格(HTML)

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0; height:100%; }
  #span1 { background-color: #DDD; width: 25px; float: right; height:100%; }
  #span2 { background-color: #EEE; width: 24px; float: left; }
  .t { border-top: 1px solid black; }
  .r { border-right: 1px solid black; height: 100%; }

<table>
    <tbody>
      <tr>
        <td>1</td><td>2</td><td>3<div><div id="span1" class="t">1</div><div id="span2" class="t r">1</div></div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2 2 2 2 2 22 2 </td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2 2 2 2 2 2 2 2 </td><td><span style="line-height:2"><div id="span1">3</div><div id="span2" class="r">3</div></span></td><td>4</td>
      </tr>
    </tbody>
  </table>
  
  <table>
    <tbody>
      <tr>
        <td>q</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>

请查看此 URL:https://jsfiddle.net/L9haaLqg/

Answer 1

你需要一个rowspan上大td让它工作。我想这就是您要找的。

rowspan将整理出大 td被拉伸(stretch)成两行(在这个例子中)。

table {
  border: 2px solid black;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  vertical-align: top;
  border: 1px solid gray;
}

.explanation {
  width: 60%;
}

.smallbox {
  height: 50px;
  width: 10%;
}

<table>
    <tbody>
      <tr>
        <td class="explanation" rowspan="2">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet iste doloribus saepe recusandae a aliquam nostrum quod, voluptatem impedit ut! Rerum quas, qui consequatur id maxime minima tempora obcaecati voluptas!
        </td>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
      </tr>
      <tr>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
      </tr>
    </tbody>
  </table>