如何使用，<table> <tbody> <tr> <td>和<div>标签创建此表？</div> </td> </tr> </tbody> </table>

Question

我想制作下表，但是在确定使用哪些元素时遇到了一些困难。目前，此表已使用table标记实施，第一行使用tr和td标记完成。

真正的问题是单元格E，F，G和H.我认为可以使用两个div标签来实现单元格E，F，G和H创建的矩形区域，但是似乎不起作用。此外，我似乎无法将<table>放在table标记中。

Answer 1

<table border="1">
    <tr>
        <td>Row 1</td>
        <td colspan="2">A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>        
    </tr>
    <tr>
        <td rowspan="2">Row 2</td>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td rowspan="2">I</td>
        <td rowspan="2">J</td>
    </tr>
    <tr>
        <td colspan="3">H</td>
    </tr>
</table>

jsFiddle：http://jsfiddle.net/77a3V/

rowspan和colspan是您的朋友。

Answer 2

实际上你需要使用3行来获得这个结构。使用colspan和rowspan属性。

“A”的colspan为2，“H”的colspan为3.“我和”J“的rowspan为2。

Answer 3

为了完整起见，这应该可以得到你所拥有的

<style>
td{
      border: 1px solid;  
      padding: 5px 0 0 5px;
      width: 50px;
     }

.red {
 background-color:red;   
}

.yellow {
    background-color: yellow;
}
</style>

<table>
    <thead/>
    <tbody>
        <tr class="yellow">
            <td>Row 1</td>
            <td colspan="2">A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr class="red">
            <td rowspan="2">Row 2</td>
            <td>E</td>
            <td>F</td>
            <td>G</td>
            <td rowspan="2">I</td>
            <td rowspan="2">J</td>
        </tr>
        <tr class="red">
            <td colspan="3">H</td>
        </tr>
    </tbody>
</table>

请在此处查看：http://jsfiddle.net/63LZW/

Answer 4

你认为我整天都不想做这样的事情......：）

http://jsfiddle.net/jeffrod/AXCae/