css: same table with colspan and rowspan

I found this really simple but interesting use of colspan and rowspan in the same table example. 

Here’s a example:

<table style="height: 100px;" border="0" cellspacing="0" cellpadding="0" width="100px">
  <tr>
    <td style="background-color:yellow" colspan="2"> 
    </td>
    <td style="background-color:red" rowspan="2">
    </td>
  </tr>
 <tr>
    <td style="background-color:orange" rowspan="2"> 
    </td>
    <td> 
    </td>
  </tr>
  <tr>
    <td style="background-color:gray" colspan="2">
</td>
  </tr>
</table>

Nice…

CSS: Gaps between td, div and table

The little gap between td(s) and the gap between the border of a table to a border of a div is just annoying. Here’s the before and after.
Before:
<table border="0">
  <tr>
    <td style="border: solid 3px gray;border-bottom:none">
      1st row
   </td>
  </tr>
  <tr>
    <td style="border:solid 3px red; border-top:none">
      2nd row
    </td>
  </tr>
</table>

1st row

2nd row

div1

After: if we modify margin, padding, (cellspacing, cellpadding for tables only) properties of table and div to 0, it’ll look fine then:

<table border="0" cellspacing="0">
  <tr>
    <td style="border: solid 3px gray;border-bottom:none">
     <div>
        1st row
      </div>
    </td>
  </tr>
  <tr>
    <td style="border:solid 3px red; border-top:none">
      2nd row
   </td>
  </tr>
</table>
<div style="border:solid 3px yellow;margin:0;">div 2</div>

1st row

2nd row

div2