<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Table Diff</title>
    <style>
      table { border-collapse:collapse; margin: 1em; }
      tr, td { border: thin solid black; }
      td { width:8em; height:3em; text-align:center; vertical-align:middle; }
      table.new, tbody.new, tr.new, td.new {
        outline: medium solid #90EE90;
        box-shadow:inset 0 0 0 1ex #EFE; 
      }
      
    </style>
  </head>
  <body>
    
    <p>Table without any changes</p>
    <table>
      <thead>
        <tr>
          <th>col 1</th><th>col 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>no changes</td>
          <td>in this table</td>
        </tr>
      </tbody>
    </table>
    
    <p>A new table</p>
    <table class="new">
      <thead>
        <tr>
          <th>col 1</th><th>col 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>a new</td>
          <td>table</td>
        </tr>
      </tbody>
    </table>
    
    <p>Some changes within the table</p>
    <table>
      <thead>
        <tr>
          <th>col 1</th><th>col 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>no changes</td>
          <td>in this table row</td>
        </tr>
        <tr class="new">
          <td>a new</td>
          <td>table row</td>
        </tr>
        <tr>
          <td>no changes</td>
          <td>in this table row</td>
        </tr>
      </tbody>
      <tbody class="new">
        <tr>
          <td>a new</td>
          <td>table body</td>
        </tr>
        <tr>
          <td>with</td>
          <td>two rows</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>no changes</td>
          <td>in this table row</td>
        </tr>
        <tr>
          <td>a new</td>
          <td class="new">table cell</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>