Basic table example

This example illustrates merging rows and columns using the colspan and rowspan attributes. The underlying table has five rows and three columns.

colspan="2"
one row
two columns 		one row
one column
rowspan="2"
two rows
one column 		colspan="2"
one row
two columns
one row
one column 		one row
one column
one row
one column 		rowspan="2"
colspan="2"
two rows
two columns
one row
one column

The source code

<table>
  <tbody>

    <tr>
      <td colspan="2">
       one row<br />two columns
      </td>
      <td>
        one row<br />one column
      </td>
    </tr>

    <tr>
      <td rowspan="2">
        two rows<br />one column
    </td>
      <td colspan="2">
        one row<br />two columns
      </td>
    </tr>

    <tr>
      <td>
        one row<br />one column
      </td>
      <td>
        one row<br />one column
      </td>
    </tr>

    <tr>
      <td>
        one row<br />one column
      </td>
      <td rowspan="2" colspan="2">
        two rows<br />two columns
      </td>

    </tr>

    <tr>
      <td>
        one row<br />one column
      </td>
    </tr>

  </tbody>
</table>

The style rules

        table {
            border: solid thin black
            }
        th, td {
            padding: .5em;
            border: solid thin black;
            background: #eee;
        }
        td[colspan="2"] {             /* Attribute selector */
            background: yellow;
            }
        td[rowspan="2"] {             /* Attribute selector */
            background: cyan;
            }