css tables for rowspan and colspan

Question

I am creating a table out of div\'s and need a method replicating the effect of a cell that spans 5 rows and a cell that spans 2 columns.

This is what I have for a f

Answer 1

First of all, take a look at Display Properties

In CSS3, you have ALL possibilities a table has, and then some more. You aren't using any of them, so give it a try

If you're dead set on your approach, try the Column Count property. I really don't understand your code, so for the sake of it, here's a generic sample for your 2 columns span

.cell{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}

and for rows, you can simply apply block styles. Then again, you should use the CSS display options. Way easier and a lot less trouble

Answer 2

colspan and rowspan are not avalaible in CSS, these are really specific to real table tag/elements.

You should rethink your structure/imbrication if it has some meanings :).

DEMO

<div class="tablelayout">
  <h1 class="cell"> title</h1>
  <div class="cell ">
    <h2 class="tablelayout">subtitle</h2>
    <div class="tablelayout">
      <div class="row">
        <p class="cell"> Cell </p>
        <p class="cell"> Cell </p>
      </div>
      <div class="row">
        <p class="cell"> Cell </p>
        <p class="cell"> Cell </p>
      </div>
      <div class="row">
        <p class="cell"> Cell </p>
        <p class="cell"> Cell </p>
      </div>
    </div>
  </div>
</div>

display:table-caption is avalaible and could be used : DEMO 2

display:table-header-group; is avalaible too : DEMO 3