diff --git a/_layouts/default.html b/_layouts/default.html
index 07402da..5c62251 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -38,18 +38,25 @@
             $('[data-toggle="tooltip"]').tooltip()
         })
     </script>
+
     {% if page.datatable == true %}
+    <!-- Include the standard DataTables bits -->
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
     <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
+    <!-- First, this walks through the tables that occur between ...-begin
+         and ...-end and add the "datatable" class to them.
+         Then it invokes DataTable's standard initializer
+         Credit here: http://www.beardedhacker.com/blog/2015/08/28/add-class-attribute-to-markdown-table/
+      -->
     <script>
-        $(document).ready(function(){
-            $('table.display').DataTable( {
-                        paging: true,
-                        stateSave: true,
-                        searching: true
-                    }
-            );
-        });
+      $(document).ready(function(){
+          $('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
+          $('table.display').DataTable( {
+              paging: true,
+              stateSave: true,
+              searching: true
+          });
+       });
     </script>
     {% endif %}
 
diff --git a/pages/mydoc/mydoc_tables.md b/pages/mydoc/mydoc_tables.md
index 98b4d25..1e5bee7 100644
--- a/pages/mydoc/mydoc_tables.md
+++ b/pages/mydoc/mydoc_tables.md
@@ -97,93 +97,36 @@ You also must add a class of `display` to your tables.  You can change the class
 
 You can also add page-specific triggers (by copying the `<script></script>` block from the default layout into the page) and classes, which lets you use different options on different tables.
 
-Markdown doesn't allow you to add classes to tables, so you'll need to use HTML for any DataTables. Here's an example:
+If you use an HTML table, adding `class="display"` to the `<table>` tag is sufficient.
 
-```html
-<table id="sampleTable" class="display">
-   <thead>
-      <tr>
-         <th>Parameter</th>
-         <th>Description</th>
-         <th>Type</th>
-         <th>Default Value</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <td>Parameter 1</td>
-         <td>Sample description
-         </td>
-         <td>Sample type</td>
-         <td>Sample default value</td>
-      </tr>
-      <tr>
-         <td>Parameter 2</td>
-         <td>Sample description
-         </td>
-         <td>Sample type</td>
-         <td>Sample default value</td>
-      </tr>
-    <tr>
-       <td>Parameter 3</td>
-       <td>Sample description
-       </td>
-       <td>Sample type</td>
-       <td>Sample default value</td>
-    </tr>
-      <tr>
-         <td>Parameter 4</td>
-         <td>Sample description
-         </td>
-         <td>Sample type</td>
-         <td>Sample default value</td>
-      </tr>
-   </tbody>
-</table>
+Markdown, however, doesn't allow you to add classes to tables, so you'll need to use a trick: add `<div class="datatable-begin"></div>` before the table and `<div class="datatable-end"></div>` after the table.  The default layout includes a jQuery snippet that automagically adds the `display` class to any table it finds between those two markers.  So you can start with this (we've trimmed the descriptions for display):
+
+```markdown
+<div class="datatable-begin"></div>
+
+Food    | Description                           | Category | Sample type
+------- | ------------------------------------- | -------- | -----------
+Apples  | A small, somewhat round ...           | Fruit    | Fuji
+Bananas | A long and curved, often-yellow ...    | Fruit    | Snow
+Kiwis   | A small, hairy-skinned sweet ...      | Fruit    | Golden
+Oranges | A spherical, orange-colored sweet ... | Fruit    | Navel
+
+<div class="datatable-end"></div>
 ```
 
-This renders to the following:
+and get this:
+
+<div class="datatable-begin"></div>
+
+Food    | Description                                                                                       | Category | Sample type
+------- | ------------------------------------------------------------------------------------------------- | -------- | -----------
+Apples  | A small, somewhat round and often red-colored, crispy fruit grown on trees.                       | Fruit    | Fuji
+Bananas | A long and curved, often-yellow, sweet and soft fruit that grows in bunches in tropical climates. | Fruit    | Snow
+Kiwis   | A small, hairy-skinned sweet fruit with green-colored insides and seeds.                          | Fruit    | Golden
+Oranges | A spherical, orange-colored sweet fruit commonly grown in Florida and California.                 | Fruit    | Navel
+
+<div class="datatable-end"></div>
 
-<table id="sampleTable" class="display">
-   <thead>
-      <tr>
-         <th>Food</th>
-         <th>Description</th>
-         <th>Category</th>
-         <th>Sample type</th>
-      </tr>
-   </thead>
-   <tbody>
-      <tr>
-         <td>Apples</td>
-         <td>A small, somewhat round and often red-colored, crispy fruit grown on trees.
-         </td>
-         <td>Fruit</td>
-         <td>Fuji</td>
-      </tr>
-      <tr>
-         <td>Bananas</td>
-         <td>A long and curved, often-yellow, sweet and soft fruit that grows in bunches in tropical climates.
-         </td>
-         <td>Fruit</td>
-         <td>Snow</td>
-      </tr>
-      <tr>
-         <td>Kiwis</td>
-         <td>A small, hairy-skinned sweet fruit with green-colored insides and seeds.
-         </td>
-         <td>Fruit</td>
-         <td>Golden</td>
-      </tr>
-        <tr>
-           <td>Oranges</td>
-           <td>A spherical, orange-colored sweet fruit commonly grown in Florida and California.
-           </td>
-           <td>Fruit</td>
-           <td>Navel</td>
-        </tr>
-   </tbody>
-</table>
 
 Notice a few features: