diff --git a/.datatables-commit-sync b/.datatables-commit-sync
index 9ea60ddc..44efd87c 100644
--- a/.datatables-commit-sync
+++ b/.datatables-commit-sync
@@ -1 +1 @@
-f8edaad29e8eaed5eb37d057ae93f2677abe75bb
+d7d75853b423d7cf18d187597b001a23a8533eb0
diff --git a/examples/advanced_init/column_render.html b/examples/advanced_init/column_render.html
index c8c931a1..8d38d6d4 100644
--- a/examples/advanced_init/column_render.html
+++ b/examples/advanced_init/column_render.html
@@ -52,7 +52,7 @@ $(document).ready(function() {
 				assigning colours based on content rules and any other form of text manipulation you require.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -63,16 +63,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -531,6 +521,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/complex_header.html b/examples/advanced_init/complex_header.html
index ec93aa87..a88a762c 100644
--- a/examples/advanced_init/complex_header.html
+++ b/examples/advanced_init/complex_header.html
@@ -47,7 +47,7 @@ $(document).ready(function() {
 				<p>The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th rowspan="2">Name</th>
@@ -62,16 +62,6 @@ $(document).ready(function() {
 						<th>E-mail</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Salary</th>
-						<th>Office</th>
-						<th>Extn.</th>
-						<th>E-mail</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -530,6 +520,16 @@ $(document).ready(function() {
 						<td>d.snider@datatables.net</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Salary</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>E-mail</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/defaults.html b/examples/advanced_init/defaults.html
index b2f8b31b..1056ae8f 100644
--- a/examples/advanced_init/defaults.html
+++ b/examples/advanced_init/defaults.html
@@ -43,7 +43,7 @@ $(document).ready(function() {
 				<p>This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -54,16 +54,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -522,6 +512,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/dom_multiple_elements.html b/examples/advanced_init/dom_multiple_elements.html
index 5d9bff73..47c48176 100644
--- a/examples/advanced_init/dom_multiple_elements.html
+++ b/examples/advanced_init/dom_multiple_elements.html
@@ -49,7 +49,7 @@ $(document).ready(function() {
 				<p>This is shown in the demo below where the four key built-in features are duplicated above and below the table.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -60,16 +60,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -528,6 +518,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/dom_toolbar.html b/examples/advanced_init/dom_toolbar.html
index cff6b62a..bafff19f 100644
--- a/examples/advanced_init/dom_toolbar.html
+++ b/examples/advanced_init/dom_toolbar.html
@@ -53,7 +53,7 @@ $(document).ready(function() {
 				Excel / PDF, and more).</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -64,16 +64,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -532,6 +522,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/dt_events.html b/examples/advanced_init/dt_events.html
index 13c25722..91729107 100644
--- a/examples/advanced_init/dt_events.html
+++ b/examples/advanced_init/dt_events.html
@@ -53,7 +53,7 @@ $(document).ready(function() {
 			<div class="demo-html">
 				<div id="demo_info" class="box"></div>
 			</div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -64,16 +64,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -532,6 +522,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/events_live.html b/examples/advanced_init/events_live.html
index f7061f4d..56e05a2c 100644
--- a/examples/advanced_init/events_live.html
+++ b/examples/advanced_init/events_live.html
@@ -43,7 +43,7 @@ $(document).ready(function() {
 				retrieve information about the selected row - the row's data so we can show it in the <code>alert</code> message in this case.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -54,16 +54,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -522,6 +512,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/footer_callback.html b/examples/advanced_init/footer_callback.html
index 6b67ca4a..90d97374 100644
--- a/examples/advanced_init/footer_callback.html
+++ b/examples/advanced_init/footer_callback.html
@@ -75,7 +75,7 @@ $(document).ready(function() {
 				footer.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
@@ -85,12 +85,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th colspan="4" style="text-align:right">Total:</th>
-						<th></th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger</td>
@@ -492,6 +486,12 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th colspan="4" style="text-align:right">Total:</th>
+						<th></th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/html5-data-attributes.html b/examples/advanced_init/html5-data-attributes.html
index 172696cb..62466720 100644
--- a/examples/advanced_init/html5-data-attributes.html
+++ b/examples/advanced_init/html5-data-attributes.html
@@ -46,7 +46,7 @@ $(document).ready(function() {
 				the column will correctly order numerically as the <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric data.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -57,16 +57,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td data-search="Tiger Nixon">T. Nixon</td>
@@ -525,6 +515,16 @@ $(document).ready(function() {
 						<td data-order="112000">$112,000/y</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/language_file.html b/examples/advanced_init/language_file.html
index 5d1cc4a2..f8aeed54 100644
--- a/examples/advanced_init/language_file.html
+++ b/examples/advanced_init/language_file.html
@@ -41,7 +41,7 @@ $(document).ready(function() {
 				<p>The following example shows DataTables reading a German language file which is hosted on the <a href="http://cdn.datatables.net">DataTables CDN</a></p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -52,16 +52,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -520,6 +510,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/length_menu.html b/examples/advanced_init/length_menu.html
index 3783af9a..8f01d48f 100644
--- a/examples/advanced_init/length_menu.html
+++ b/examples/advanced_init/length_menu.html
@@ -43,7 +43,7 @@ $(document).ready(function() {
 				<p>The example below shows a 2D array being used to include a "Show all" records option.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -54,16 +54,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -522,6 +512,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/object_dom_read.html b/examples/advanced_init/object_dom_read.html
index 43ab5d15..d1abf07b 100644
--- a/examples/advanced_init/object_dom_read.html
+++ b/examples/advanced_init/object_dom_read.html
@@ -60,7 +60,7 @@ $(document).ready(function() {
 				<p>Please note that this feature requires DataTables 1.10.3 or newer.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -71,16 +71,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -539,6 +529,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/row_callback.html b/examples/advanced_init/row_callback.html
index 29e4ae59..c907c1cb 100644
--- a/examples/advanced_init/row_callback.html
+++ b/examples/advanced_init/row_callback.html
@@ -49,7 +49,7 @@ $(document).ready(function() {
 				"DataTables initialisation option">columns.createdCell</code></a> could also be used to create exactly the same effect.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -60,16 +60,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -528,6 +518,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/row_grouping.html b/examples/advanced_init/row_grouping.html
index 3a678e2e..e09bd4a5 100644
--- a/examples/advanced_init/row_grouping.html
+++ b/examples/advanced_init/row_grouping.html
@@ -81,7 +81,7 @@ $(document).ready(function() {
 				new sites that make use of row grouping, it is suggested that you use the new RowGroup extension.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -92,16 +92,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -560,6 +550,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/advanced_init/sort_direction_control.html b/examples/advanced_init/sort_direction_control.html
index 67f3bd2b..82d38d9b 100644
--- a/examples/advanced_init/sort_direction_control.html
+++ b/examples/advanced_init/sort_direction_control.html
@@ -56,7 +56,7 @@ $(document).ready(function() {
 				how these options can be used and therefore applied across all columns.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -67,16 +67,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -535,6 +525,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/ajax/custom_data_flat.html b/examples/ajax/custom_data_flat.html
index bf02c7dd..03fb4faf 100644
--- a/examples/ajax/custom_data_flat.html
+++ b/examples/ajax/custom_data_flat.html
@@ -57,7 +57,7 @@ $(document).ready(function() {
 				object with an array inside it as is the default.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
diff --git a/examples/ajax/custom_data_property.html b/examples/ajax/custom_data_property.html
index 9c3f5fe1..03948fb6 100644
--- a/examples/ajax/custom_data_property.html
+++ b/examples/ajax/custom_data_property.html
@@ -50,7 +50,7 @@ $(document).ready(function() {
 				<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
diff --git a/examples/ajax/deep.html b/examples/ajax/deep.html
index 3725f0a1..3778f040 100644
--- a/examples/ajax/deep.html
+++ b/examples/ajax/deep.html
@@ -63,7 +63,7 @@ $(document).ready(function() {
 </code></pre>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
diff --git a/examples/ajax/defer_render.html b/examples/ajax/defer_render.html
index 64db1f5a..68c16f28 100644
--- a/examples/ajax/defer_render.html
+++ b/examples/ajax/defer_render.html
@@ -42,7 +42,7 @@ $(document).ready(function() {
 				significantly from simply enabling this parameter.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
diff --git a/examples/ajax/null_data_source.html b/examples/ajax/null_data_source.html
index f409f7dd..d804cf96 100644
--- a/examples/ajax/null_data_source.html
+++ b/examples/ajax/null_data_source.html
@@ -61,7 +61,7 @@ $(document).ready(function() {
 				contained in the data source object.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
diff --git a/examples/ajax/objects.html b/examples/ajax/objects.html
index 83d6ca31..a10c669a 100644
--- a/examples/ajax/objects.html
+++ b/examples/ajax/objects.html
@@ -58,7 +58,7 @@ $(document).ready(function() {
 				<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
diff --git a/examples/ajax/objects_subarrays.html b/examples/ajax/objects_subarrays.html
index 8649050f..4fc48306 100644
--- a/examples/ajax/objects_subarrays.html
+++ b/examples/ajax/objects_subarrays.html
@@ -72,7 +72,7 @@ $(document).ready(function() {
 </code></pre>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
diff --git a/examples/ajax/orthogonal-data.html b/examples/ajax/orthogonal-data.html
index 1e90e59e..3f0eb1a2 100644
--- a/examples/ajax/orthogonal-data.html
+++ b/examples/ajax/orthogonal-data.html
@@ -63,7 +63,7 @@ $(document).ready(function() {
 </code></pre>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
diff --git a/examples/ajax/simple.html b/examples/ajax/simple.html
index d509ea9a..2d04ffdb 100644
--- a/examples/ajax/simple.html
+++ b/examples/ajax/simple.html
@@ -53,7 +53,7 @@ $(document).ready(function() {
 				<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
diff --git a/examples/api/add_row.html b/examples/api/add_row.html
index 6d0afc75..ecf096d8 100644
--- a/examples/api/add_row.html
+++ b/examples/api/add_row.html
@@ -61,7 +61,7 @@ $(document).ready(function() {
 			<div class="demo-html">
 				<button id="addRow">Add new row</button>
 			</div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Column 1</th>
diff --git a/examples/api/api_in_init.html b/examples/api/api_in_init.html
index 772ef847..0569d018 100644
--- a/examples/api/api_in_init.html
+++ b/examples/api/api_in_init.html
@@ -50,7 +50,7 @@ $(document).ready(function() {
 				shows the use of the API inside the callbacks!</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -61,16 +61,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -529,6 +519,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/api/counter_columns.html b/examples/api/counter_columns.html
index 73cfce0a..a8089d35 100644
--- a/examples/api/counter_columns.html
+++ b/examples/api/counter_columns.html
@@ -54,7 +54,7 @@ $(document).ready(function() {
 				"DataTables API method">column()</code></a> method to get the nodes in the current order and with the currently applied filter.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th></th>
@@ -65,16 +65,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th></th>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td></td>
@@ -533,6 +523,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th></th>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/api/form.html b/examples/api/form.html
index c59a0fc3..2332a602 100644
--- a/examples/api/form.html
+++ b/examples/api/form.html
@@ -52,7 +52,7 @@ $(document).ready(function() {
 			<div class="demo-html">
 				<button type="submit">Submit form</button>
 			</div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -61,14 +61,6 @@ $(document).ready(function() {
 						<th>Office</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Age</th>
-						<th>Position</th>
-						<th>Office</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -1325,6 +1317,14 @@ $(document).ready(function() {
 						</select></td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Age</th>
+						<th>Position</th>
+						<th>Office</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/api/highlight.html b/examples/api/highlight.html
index 901c8b66..5f0f910e 100644
--- a/examples/api/highlight.html
+++ b/examples/api/highlight.html
@@ -53,7 +53,7 @@ $(document).ready(function() {
 				apply the new highlighted class, respectively.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
+			<table id="example" class="row-border hover order-column" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -64,16 +64,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -532,6 +522,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/api/multi_filter.html b/examples/api/multi_filter.html
index 73553775..323b46be 100644
--- a/examples/api/multi_filter.html
+++ b/examples/api/multi_filter.html
@@ -69,7 +69,7 @@ $(document).ready(function() {
 				"DataTables API method">column()</code></a> method takes into account any hidden columns when selecting the column to act upon.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -80,16 +80,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -548,6 +538,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/api/multi_filter_select.html b/examples/api/multi_filter_select.html
index 24219ddf..d1ccec0e 100644
--- a/examples/api/multi_filter_select.html
+++ b/examples/api/multi_filter_select.html
@@ -73,7 +73,7 @@ $(document).ready(function() {
 				after the data has been loaded.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -84,16 +84,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -552,6 +542,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/api/regex.html b/examples/api/regex.html
index 94a8bafb..0dc3345f 100644
--- a/examples/api/regex.html
+++ b/examples/api/regex.html
@@ -121,7 +121,7 @@ $(document).ready(function() {
 					</tbody>
 				</table>
 			</div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -132,16 +132,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -600,6 +590,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/api/row_details.html b/examples/api/row_details.html
index e968e197..98e14332 100644
--- a/examples/api/row_details.html
+++ b/examples/api/row_details.html
@@ -99,7 +99,7 @@ $(document).ready(function() {
 				the server</a> to obtain any extra information.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th></th>
diff --git a/examples/api/select_row.html b/examples/api/select_row.html
index 793aa766..9263f62d 100644
--- a/examples/api/select_row.html
+++ b/examples/api/select_row.html
@@ -48,7 +48,7 @@ $(document).ready(function() {
 			<div class="demo-html">
 				<button id="button">Row count</button>
 			</div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -59,16 +59,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -527,6 +517,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/api/select_single_row.html b/examples/api/select_single_row.html
index a086b1b1..6b80800e 100644
--- a/examples/api/select_single_row.html
+++ b/examples/api/select_single_row.html
@@ -56,7 +56,7 @@ $(document).ready(function() {
 			<div class="demo-html">
 				<button id="button">Delete selected row</button>
 			</div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -67,16 +67,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -535,6 +525,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/api/show_hide.html b/examples/api/show_hide.html
index f16158db..81c2226e 100644
--- a/examples/api/show_hide.html
+++ b/examples/api/show_hide.html
@@ -59,7 +59,7 @@ $(document).ready(function() {
 					"5">Salary</a>
 				</div>
 			</div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -70,16 +70,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -538,6 +528,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/alt_pagination.html b/examples/basic_init/alt_pagination.html
index 772ce0ee..3ef4022c 100644
--- a/examples/basic_init/alt_pagination.html
+++ b/examples/basic_init/alt_pagination.html
@@ -51,7 +51,7 @@ $(document).ready(function() {
 				<p>The example below shows the <code class="string" title="String">full_numbers</code> type of pagination.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -62,16 +62,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -530,6 +520,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/comma-decimal.html b/examples/basic_init/comma-decimal.html
index 4c011529..a7dcb930 100644
--- a/examples/basic_init/comma-decimal.html
+++ b/examples/basic_init/comma-decimal.html
@@ -47,7 +47,7 @@ $(document).ready(function() {
 				<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -58,16 +58,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -526,6 +516,16 @@ $(document).ready(function() {
 						<td>$112.000,00</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/complex_header.html b/examples/basic_init/complex_header.html
index 41f2bde8..103ae723 100644
--- a/examples/basic_init/complex_header.html
+++ b/examples/basic_init/complex_header.html
@@ -36,7 +36,7 @@ $(document).ready(function() {
 				<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th rowspan="2">Name</th>
@@ -51,16 +51,6 @@ $(document).ready(function() {
 						<th>E-mail</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Salary</th>
-						<th>Office</th>
-						<th>Extn.</th>
-						<th>E-mail</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -519,6 +509,16 @@ $(document).ready(function() {
 						<td>d.snider@datatables.net</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Salary</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>E-mail</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/dom.html b/examples/basic_init/dom.html
index 5773ad96..81c06c0f 100644
--- a/examples/basic_init/dom.html
+++ b/examples/basic_init/dom.html
@@ -85,7 +85,7 @@ $(document).ready(function() {
 				<code>div</code>.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -96,16 +96,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -564,6 +554,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/filter_only.html b/examples/basic_init/filter_only.html
index 51eed420..40ee3d5a 100644
--- a/examples/basic_init/filter_only.html
+++ b/examples/basic_init/filter_only.html
@@ -37,7 +37,7 @@ $(document).ready(function() {
 				<p>In the following example only the search feature is left enabled (which it is by default).</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -48,16 +48,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -516,6 +506,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/flexible_width.html b/examples/basic_init/flexible_width.html
index 37e999a8..281f7d63 100644
--- a/examples/basic_init/flexible_width.html
+++ b/examples/basic_init/flexible_width.html
@@ -40,7 +40,7 @@ $(document).ready(function() {
 				dynamically.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -51,16 +51,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -519,6 +509,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/hidden_columns.html b/examples/basic_init/hidden_columns.html
index fe01dcfc..ded1c0d0 100644
--- a/examples/basic_init/hidden_columns.html
+++ b/examples/basic_init/hidden_columns.html
@@ -51,7 +51,7 @@ $(document).ready(function() {
 				<p>In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -62,16 +62,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -530,6 +520,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/language.html b/examples/basic_init/language.html
index 1e822273..158a670e 100644
--- a/examples/basic_init/language.html
+++ b/examples/basic_init/language.html
@@ -41,7 +41,7 @@ $(document).ready(function() {
 				<p>This example shows a different set of English string being used, rather than the defaults.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -52,16 +52,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -520,6 +510,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/multi_col_sort.html b/examples/basic_init/multi_col_sort.html
index c7c84b45..283c9883 100644
--- a/examples/basic_init/multi_col_sort.html
+++ b/examples/basic_init/multi_col_sort.html
@@ -58,7 +58,7 @@ $(document).ready(function() {
 				directly to the first and the salary column to the first name column.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/basic_init/multiple_tables.html b/examples/basic_init/multiple_tables.html
index 4ee2aa22..2dfcc0ae 100644
--- a/examples/basic_init/multiple_tables.html
+++ b/examples/basic_init/multiple_tables.html
@@ -41,7 +41,7 @@ $(document).ready(function() {
 				which have the class of <code>table.display</code> (which is suitable in this example, you might wish to use a different selector).</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="" class="display" cellspacing="0" width="100%">
+			<table id="" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -51,15 +51,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -125,17 +116,6 @@ $(document).ready(function() {
 						<td>$183,000</td>
 					</tr>
 				</tbody>
-			</table>
-			<table id="" class="display" cellspacing="0" width="100%">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Salary</th>
-					</tr>
-				</thead>
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -145,6 +125,17 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</tfoot>
+			</table>
+			<table id="" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
 				<tbody>
 					<tr>
 						<td>Jena Gaines</td>
@@ -231,6 +222,15 @@ $(document).ready(function() {
 						<td>$103,500</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/scroll_x.html b/examples/basic_init/scroll_x.html
index af9b3db8..c45e22bb 100644
--- a/examples/basic_init/scroll_x.html
+++ b/examples/basic_init/scroll_x.html
@@ -43,7 +43,7 @@ $(document).ready(function() {
 				also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display nowrap" cellspacing="0" width="100%">
+			<table id="example" class="display nowrap" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/basic_init/scroll_xy.html b/examples/basic_init/scroll_xy.html
index f12db1eb..2b6890b9 100644
--- a/examples/basic_init/scroll_xy.html
+++ b/examples/basic_init/scroll_xy.html
@@ -40,7 +40,7 @@ $(document).ready(function() {
 				the scrolling accounts for this.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display nowrap" cellspacing="0" width="100%">
+			<table id="example" class="display nowrap" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/basic_init/scroll_y.html b/examples/basic_init/scroll_y.html
index 807f86f7..3d64c760 100644
--- a/examples/basic_init/scroll_y.html
+++ b/examples/basic_init/scroll_y.html
@@ -44,7 +44,7 @@ $(document).ready(function() {
 				"DataTables initialisation option">scrollY</code></a>.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -55,16 +55,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -523,6 +513,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/scroll_y_dynamic.html b/examples/basic_init/scroll_y_dynamic.html
index 96a2295e..6c3009b3 100644
--- a/examples/basic_init/scroll_y_dynamic.html
+++ b/examples/basic_init/scroll_y_dynamic.html
@@ -40,7 +40,7 @@ $(document).ready(function() {
 				<code>vh</code> unit and all other evergreen browsers.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -51,16 +51,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -519,6 +509,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/state_save.html b/examples/basic_init/state_save.html
index 9dc8d28c..29c8bf3b 100644
--- a/examples/basic_init/state_save.html
+++ b/examples/basic_init/state_save.html
@@ -45,7 +45,7 @@ $(document).ready(function() {
 				"DataTables initialisation option">stateSave</code></a> option.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -56,16 +56,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -524,6 +514,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/table_sorting.html b/examples/basic_init/table_sorting.html
index 1fa536b0..9fe9da68 100644
--- a/examples/basic_init/table_sorting.html
+++ b/examples/basic_init/table_sorting.html
@@ -40,7 +40,7 @@ $(document).ready(function() {
 				<p>The table below is ordered (descending) by the Age column.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -51,16 +51,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -519,6 +509,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/basic_init/zero_configuration.html b/examples/basic_init/zero_configuration.html
index e0650a15..535b8e09 100644
--- a/examples/basic_init/zero_configuration.html
+++ b/examples/basic_init/zero_configuration.html
@@ -35,7 +35,7 @@ $(document).ready(function() {
 				<p>Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -46,16 +46,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -514,6 +504,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/data_sources/ajax.html b/examples/data_sources/ajax.html
index 52da4e34..d33d8b61 100644
--- a/examples/data_sources/ajax.html
+++ b/examples/data_sources/ajax.html
@@ -42,7 +42,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
diff --git a/examples/data_sources/dom.html b/examples/data_sources/dom.html
index b9f04e00..57374888 100644
--- a/examples/data_sources/dom.html
+++ b/examples/data_sources/dom.html
@@ -36,7 +36,7 @@ $(document).ready(function() {
 				<a href="../advanced_init">advanced initialisation</a> examples.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -47,16 +47,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -515,6 +505,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/data_sources/server_side.html b/examples/data_sources/server_side.html
index f36f5f90..642e1d97 100644
--- a/examples/data_sources/server_side.html
+++ b/examples/data_sources/server_side.html
@@ -43,7 +43,7 @@ $(document).ready(function() {
 				using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/plug-ins/api.html b/examples/plug-ins/api.html
index 48c81d67..734eff85 100644
--- a/examples/plug-ins/api.html
+++ b/examples/plug-ins/api.html
@@ -62,7 +62,7 @@ $(document).ready(function() {
 			<div class="demo-html">
 				<div id="demo"></div>
 			</div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -73,16 +73,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -541,6 +531,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/plug-ins/dom_sort.html b/examples/plug-ins/dom_sort.html
index 531c2f6b..2e9ff237 100644
--- a/examples/plug-ins/dom_sort.html
+++ b/examples/plug-ins/dom_sort.html
@@ -82,7 +82,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> methods.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -91,14 +91,6 @@ $(document).ready(function() {
 						<th>Office</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Age</th>
-						<th>Position</th>
-						<th>Office</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -1355,6 +1347,14 @@ $(document).ready(function() {
 						</select></td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Age</th>
+						<th>Position</th>
+						<th>Office</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/plug-ins/range_filtering.html b/examples/plug-ins/range_filtering.html
index d0903948..a4ffb130 100644
--- a/examples/plug-ins/range_filtering.html
+++ b/examples/plug-ins/range_filtering.html
@@ -70,7 +70,7 @@ $(document).ready(function() {
 					</tr>
 				</table>
 			</div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -81,16 +81,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -549,6 +539,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/plug-ins/sorting_auto.html b/examples/plug-ins/sorting_auto.html
index cf578faf..af01c01e 100644
--- a/examples/plug-ins/sorting_auto.html
+++ b/examples/plug-ins/sorting_auto.html
@@ -56,7 +56,7 @@ $(document).ready(function() {
 				<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -67,16 +67,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -535,6 +525,16 @@ $(document).ready(function() {
 						<td>Low</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/plug-ins/sorting_manual.html b/examples/plug-ins/sorting_manual.html
index f7966ec6..e76b7ff9 100644
--- a/examples/plug-ins/sorting_manual.html
+++ b/examples/plug-ins/sorting_manual.html
@@ -55,7 +55,7 @@ $(document).ready(function() {
 				<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -66,16 +66,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -534,6 +524,16 @@ $(document).ready(function() {
 						<td>Low</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/server_side/custom_vars.html b/examples/server_side/custom_vars.html
index 0dc7828e..f70618d9 100644
--- a/examples/server_side/custom_vars.html
+++ b/examples/server_side/custom_vars.html
@@ -51,7 +51,7 @@ $(document).ready(function() {
 				function.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/server_side/defer_loading.html b/examples/server_side/defer_loading.html
index 9aab48ef..de1defe1 100644
--- a/examples/server_side/defer_loading.html
+++ b/examples/server_side/defer_loading.html
@@ -45,7 +45,7 @@ $(document).ready(function() {
 				data is available and that it should wait for user interaction (ordering, paging etc) before making an Ajax call.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
@@ -56,16 +56,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>First name</th>
-						<th>Last name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tr class="odd">
 					<td>Airi</td>
 					<td>Satou</td>
@@ -146,6 +136,16 @@ $(document).ready(function() {
 					<td>29th Mar 12</td>
 					<td>$433,060</td>
 				</tr>
+				<tfoot>
+					<tr>
+						<th>First name</th>
+						<th>Last name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/server_side/ids.html b/examples/server_side/ids.html
index 95089484..4e43ed69 100644
--- a/examples/server_side/ids.html
+++ b/examples/server_side/ids.html
@@ -49,7 +49,7 @@ $(document).ready(function() {
 				<p>This example below shows <code>DT_RowId</code> being used to add information to the table. In addition objects are used as the data source for the rows.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/server_side/jsonp.html b/examples/server_side/jsonp.html
index 9c5b6256..59dc93bb 100644
--- a/examples/server_side/jsonp.html
+++ b/examples/server_side/jsonp.html
@@ -47,7 +47,7 @@ $(document).ready(function() {
 				used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/server_side/object_data.html b/examples/server_side/object_data.html
index 563083ba..9a2b7956 100644
--- a/examples/server_side/object_data.html
+++ b/examples/server_side/object_data.html
@@ -48,7 +48,7 @@ $(document).ready(function() {
 				column.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/server_side/pipeline.html b/examples/server_side/pipeline.html
index 8dff9f4e..eb53672d 100644
--- a/examples/server_side/pipeline.html
+++ b/examples/server_side/pipeline.html
@@ -168,7 +168,7 @@ $(document).ready(function() {
 				when using server-side processing, is only available at the server.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/server_side/post.html b/examples/server_side/post.html
index 9cc19c0e..cc7fc7eb 100644
--- a/examples/server_side/post.html
+++ b/examples/server_side/post.html
@@ -55,7 +55,7 @@ $(document).ready(function() {
 				used with the <code>type</code> option set to <code class="string" title="String">POST</code> to make a POST request.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/server_side/row_details.html b/examples/server_side/row_details.html
index 2d796bd0..4286141f 100644
--- a/examples/server_side/row_details.html
+++ b/examples/server_side/row_details.html
@@ -110,7 +110,7 @@ $(document).ready(function() {
 				in server-side processing mode rows are automatically destroyed and recreated on each draw.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th></th>
diff --git a/examples/server_side/select_rows.html b/examples/server_side/select_rows.html
index 30fe1cfa..273889b1 100644
--- a/examples/server_side/select_rows.html
+++ b/examples/server_side/select_rows.html
@@ -63,7 +63,7 @@ $(document).ready(function() {
 				an API that is fully integrated with DataTables for selecting rows and acting upon that selection.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/server_side/simple.html b/examples/server_side/simple.html
index ef09b233..e86d9447 100644
--- a/examples/server_side/simple.html
+++ b/examples/server_side/simple.html
@@ -42,7 +42,7 @@ $(document).ready(function() {
 				<p>This example shows a very simple table, matching the other client-side processing examples, but in this instance using server-side processing.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
diff --git a/examples/styling/bootstrap.html b/examples/styling/bootstrap.html
index 4d87376e..7f4baab0 100644
--- a/examples/styling/bootstrap.html
+++ b/examples/styling/bootstrap.html
@@ -38,7 +38,7 @@ $(document).ready(function() {
 				normal, as shown in this example.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
+			<table id="example" class="table table-striped table-bordered" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -49,16 +49,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -517,6 +507,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/bootstrap4.html b/examples/styling/bootstrap4.html
index 0bbe2679..3beee0ae 100644
--- a/examples/styling/bootstrap4.html
+++ b/examples/styling/bootstrap4.html
@@ -34,7 +34,7 @@ $(document).ready(function() {
 				files (CSS and JS) which sets the defaults needed for DataTables to be initialised as normal, as shown in this example.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
+			<table id="example" class="table table-striped table-bordered" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -45,16 +45,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -513,6 +503,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/cell-border.html b/examples/styling/cell-border.html
index cce3c942..833b88a7 100644
--- a/examples/styling/cell-border.html
+++ b/examples/styling/cell-border.html
@@ -31,7 +31,7 @@ $(document).ready(function() {
 				<p>This example shows DataTables with just the <code>cell-border</code> class specified, giving a strong delineation between individual cells.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="cell-border" cellspacing="0" width="100%">
+			<table id="example" class="cell-border" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -42,16 +42,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -510,6 +500,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/compact.html b/examples/styling/compact.html
index 7ddb8f67..56c42ef5 100644
--- a/examples/styling/compact.html
+++ b/examples/styling/compact.html
@@ -31,7 +31,7 @@ $(document).ready(function() {
 				<p>The <code>compact</code> class reduces the amount of white-space in the default styling, increasing the information density on screen, as shown below.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display compact" cellspacing="0" width="100%">
+			<table id="example" class="display compact" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -42,16 +42,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -510,6 +500,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/display.html b/examples/styling/display.html
index 5f958eb3..43ff1f44 100644
--- a/examples/styling/display.html
+++ b/examples/styling/display.html
@@ -43,7 +43,7 @@ $(document).ready(function() {
 				in the example below.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -54,16 +54,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -522,6 +512,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/foundation.html b/examples/styling/foundation.html
index 851a7571..b6123fb9 100644
--- a/examples/styling/foundation.html
+++ b/examples/styling/foundation.html
@@ -38,7 +38,7 @@ $(document).ready(function() {
 				normal, as shown in this example.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -49,16 +49,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -517,6 +507,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/hover.html b/examples/styling/hover.html
index 63cd3ce1..46649789 100644
--- a/examples/styling/hover.html
+++ b/examples/styling/hover.html
@@ -32,7 +32,7 @@ $(document).ready(function() {
 				hovered over it.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="hover" cellspacing="0" width="100%">
+			<table id="example" class="hover" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -43,16 +43,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -511,6 +501,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/jqueryUI.html b/examples/styling/jqueryUI.html
index 53e715dd..3aaae0dc 100644
--- a/examples/styling/jqueryUI.html
+++ b/examples/styling/jqueryUI.html
@@ -37,7 +37,7 @@ $(document).ready(function() {
 				information.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -48,16 +48,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -516,6 +506,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/material.html b/examples/styling/material.html
index 30a3945d..4fa79d17 100644
--- a/examples/styling/material.html
+++ b/examples/styling/material.html
@@ -44,7 +44,7 @@ $(document).ready(function() {
 				implementation for DataTables can currently only be installed from source and is not available in package managers or the DataTables downloader.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="mdl-data-table" cellspacing="0" width="100%">
+			<table id="example" class="mdl-data-table" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -55,16 +55,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -523,6 +513,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/no-classes.html b/examples/styling/no-classes.html
index 56a871cd..d6fb0dd4 100644
--- a/examples/styling/no-classes.html
+++ b/examples/styling/no-classes.html
@@ -31,7 +31,7 @@ $(document).ready(function() {
 				<p>This example shows the base DataTables style file being used, with none of the additional feature style classes being used.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="" cellspacing="0" width="100%">
+			<table id="example" class="" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -42,16 +42,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -510,6 +500,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/order-column.html b/examples/styling/order-column.html
index 5d091e31..01e9d676 100644
--- a/examples/styling/order-column.html
+++ b/examples/styling/order-column.html
@@ -32,7 +32,7 @@ $(document).ready(function() {
 				addition to <code>order-column</code> (possibly <code>hover</code> as well), but this example shows just the ordered column highlighting.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="order-column" cellspacing="0" width="100%">
+			<table id="example" class="order-column" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -43,16 +43,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -511,6 +501,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/row-border.html b/examples/styling/row-border.html
index 7a40f045..b56a2a19 100644
--- a/examples/styling/row-border.html
+++ b/examples/styling/row-border.html
@@ -31,7 +31,7 @@ $(document).ready(function() {
 				<p>This example shows DataTables with just the <code>row-border</code> class specified, which can create a pleasing, minimalist, interface for your tables.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="row-border" cellspacing="0" width="100%">
+			<table id="example" class="row-border" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -42,16 +42,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -510,6 +500,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/semanticui.html b/examples/styling/semanticui.html
index 898145a8..57283108 100644
--- a/examples/styling/semanticui.html
+++ b/examples/styling/semanticui.html
@@ -35,7 +35,7 @@ $(document).ready(function() {
 				names like words to create natural language styling library.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="ui celled table" cellspacing="0" width="100%">
+			<table id="example" class="ui celled table" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -46,16 +46,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -514,6 +504,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/stripe.html b/examples/styling/stripe.html
index 11e8682e..f032db0f 100644
--- a/examples/styling/stripe.html
+++ b/examples/styling/stripe.html
@@ -31,7 +31,7 @@ $(document).ready(function() {
 				<p>This example shows DataTables with just the <code>stripe</code> class specified.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="stripe" cellspacing="0" width="100%">
+			<table id="example" class="stripe" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -42,16 +42,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -510,6 +500,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>
diff --git a/examples/styling/uikit.html b/examples/styling/uikit.html
index e992d563..f2eb1318 100644
--- a/examples/styling/uikit.html
+++ b/examples/styling/uikit.html
@@ -35,7 +35,7 @@ $(document).ready(function() {
 				support UIKit will the integration be complete and available via the DataTables download builder.</p>
 			</div>
 			<div class="demo-html"></div>
-			<table id="example" class="uk-table uk-table-hover uk-table-striped" cellspacing="0" width="100%">
+			<table id="example" class="uk-table uk-table-hover uk-table-striped" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -46,16 +46,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -514,6 +504,16 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>