How do I make this table using <table>, <tr>, <td> and <div> tags?

I want to make the following table, but I'm having a bit of difficulty with figuring out which elements to use when. At the moment, this table has been implemented using table tags with the first row being done using tr and td tags.

The real problem is Cells E, F, G and H. I thought it would be possible to have the rectangular area created by Cells E, F, G and H be implemented using two div tags, but that doesn't seem to be working. Also, it doesn't appear like I can p开发者_Go百科ut a <table> within a table tag.

---

<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 and colspan are your friends.

---

You actually would need to use 3 rows to get this structure. Use the colspan and rowspan attributes.

"A" would get a colspan of 2, "H" would get a colspan of 3. "I and "J" would get a rowspan of 2.

---

For completeness sake, this should get you exactly what you have

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

See it here: http://jsfiddle.net/63LZW/

---

You think i wouldn't want to do stuff like this after doing it all day.... :)

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