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

请参阅以下网址：https://jsfiddle.net/L9haaLqg/

Answer 1

您在大td需要rowspan得到它的工作。我想这就是你要找的。

rowspan将整理大的td被拉伸到两行（在这个例子中）。

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>