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.

Answers


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


Need Your Help

OpenGL Point Light not Transformed Correctly

java opengl camera glsl lighting

I am working on adding basic point lighting to my LWJGL-based game engine. I am using the OpenGL fixed-function lights for position and color, but am using shaders to do the actual lighting computa...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.