minecraftModder minecraftModder - 1 year ago 42
CSS Question

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

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 Source

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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download