GobiasKoffi GobiasKoffi - 1 month ago 6
CSS Question

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 put a
<table>
within a
table
tag.

enter image description here

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

Comments