CSS Tables for Rowspan and Colspan

css tables for rowspan and colspan

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

Tables, rowspan and colspan

You need to add colspan for the last cell in the header and the last cell in the first row of the table body otherwise column sum will be only 3 for them(based on colspan).

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <style>

    table,

    td,

    th {

      border: 1px solid #666;

      border-collapse: collapse;

    }

  </style>

  <title>Assignment 4</title>

</head>

<body>

  <table>

    <tr>

      <th colspan="2">Hi</th>

      <th colspan="2">Hi</th>

    </tr>

    <tr>

      <td>Hi</td>

      <td>Hi</td>

      <td colspan="2">hi</td>

    </tr>

    <tr>

      <td>Hi</td>

      <td>Hi</td>

      <td>hi</td>

      <td>hi</td>

    </tr>

  </table>

</body>

</html>

Html table colspan / rowspan

Here is an example of a table that looks like that.

<table style="border-collapse: collapse; width: 100%;" border="1">
  <colgroup>
    <col style="width: 20.0242%;">
    <col style="width: 20.0242%;">
    <col style="width: 20.0242%;">
    <col style="width: 20.0242%;">
    <col style="width: 19.9032%;">
  </colgroup>
  <tbody>
    <tr>
      <td colspan="2" rowspan="3"> </td>
      <td colspan="2"> </td>
      <td rowspan="4"> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </tbody>
</table>

How DIV & CSS work with Rowspan & Colspan?

Try adding another class to your merged column, like so:

<div class='cell merged'>Merged Area</div>

and change the css of the merged area, like so:

.merged{
    width:50%;
    height:50%;
}

The reason I did this is because you had the same class on your merged area, but you wanted the size to take up double the space of a normal cell. So all I did was add an additional class changing the width and height of the merged area to get the desired result.

Here is an updated Fiddle:

https://jsfiddle.net/6hx2uooz/4/

Why is colspan and rowspan not formatting correctly in this table?

You need to add a final row that actually contains five cells for the behaviour of colspan="2" to be visible.

Then add a width to th and td to maintain the correct styles, and you can hide the empty row to match your design.

table, th, td  {
  border: 1px solid black;
  border-collapse: collapse;
}

.title {
  padding: 10px;
}

th, td {
  width: 20%;
}

<h1>Table</h1>

<table>
  <tr>
    <th colspan="4" class="title">A common header for three subheads</th>
    <th rowspan="2">Header 3</th>
  </tr>
  <tr>
    <th>Header 1</th>
    <th colspan="3">Header 2</th>
  </tr>
  <tr>
    <th>Thing A</th>
    <td colspan="2">dataA1</td>
    <td>dataA2</td>
    <td>dataA3</td>
  </tr>
  <tr>
    <th>Thing B</th>
    <td colspan="2">dataB1</td>
    <td>dataB2</td>
    <td>dataC3</td>
  </tr>
  <tr>
    <th>Thing C</th>
    <td colspan="2">dataC1</td>
    <td>dataC2</td>
    <td>dataC3</td>
  </tr>
  <tr style="visibility: hidden;" aria-hidden="true">
    <th></th><td></td><td></td><td></td><td></td>
  </tr>
</table>

CSS Tables for Rowspan and Colspan