Placing of Cells next to each other instead of under each other

Question

I'm currently working on a project and I need to make the cells of my table appear like below:

|       |   [Cell One] [Cell Two]
| Image | 
|       | [Cell Three] [Cell Four]

Despite googling and reading my textbook, I can't seem to find a way to do so, as my code is telling doing this:

|       | [ Cell One]
|       | [ Cell Two]
| Image | [ Cell Three] 
|       | [ Cell Four]

Is there a way to fix this with a CSS syntax, HTML Tag or something of that degree that I missed?

Answer 1

You need to utilise rowspan for this to work in a HTML fashion, like so:

<table>
  <tr>
    <td rowspan="4"><!-- Image here --></td>
    <td rowspan="1"></td>
  </tr>
  <tr>
    <td rowspan="1"></td>
  </tr>
  <tr>
    <td rowspan="1"></td>
  </tr>
  <tr>
    <td rowspan="1"></td>
  </tr>
</table>

See jsFiddle here: http://jsfiddle.net/dhvnP/

you could also do something akin to this, but note the layout is purely for illustration you can play with it and make it work for you, i prefer a table-less layout, if indeed you are making a layout: http://jsfiddle.net/NRsbV/