From 06d22af2bfb1c41163fdcba90605cdb3d98cd0b8 Mon Sep 17 00:00:00 2001
From: Ningxin Hu <ningxin.hu@intel.com>
Date: Wed, 27 Sep 2017 16:35:43 +0800
Subject: [PATCH] Use horizontal input/output images layout in OpenCV.js
 tutorials

---
 .../js_basic_ops_copymakeborder.html          | 26 +++++---
 .../js_assets/js_basic_ops_roi.html           | 26 +++++---
 doc/js_tutorials/js_assets/js_canny.html      | 26 +++++---
 .../js_assets/js_colorspaces_cvtColor.html    | 26 +++++---
 .../js_assets/js_colorspaces_inRange.html     | 26 +++++---
 .../js_contour_features_approxPolyDP.html     | 26 +++++---
 .../js_assets/js_contour_features_area.html   |  4 +-
 .../js_contour_features_boundingRect.html     | 26 +++++---
 .../js_contour_features_convexHull.html       | 26 +++++---
 .../js_contour_features_fitEllipse.html       | 26 +++++---
 .../js_contour_features_fitLine.html          | 26 +++++---
 .../js_contour_features_minAreaRect.html      | 26 +++++---
 ...s_contour_features_minEnclosingCircle.html | 26 +++++---
 .../js_contour_features_moments.html          |  4 +-
 .../js_contour_features_perimeter.html        |  4 +-
 .../js_contour_properties_transpose.html      | 26 +++++---
 .../js_assets/js_contours_begin_contours.html | 26 +++++---
 ...tours_more_functions_convexityDefects.html | 26 +++++---
 .../js_contours_more_functions_shape.html     | 33 ++++++----
 .../js_assets/js_example_style.css            |  7 +-
 .../js_assets/js_face_detection.html          | 26 +++++---
 .../js_assets/js_filtering_GaussianBlur.html  | 26 +++++---
 .../js_filtering_bilateralFilter.html         | 26 +++++---
 .../js_assets/js_filtering_blur.html          | 26 +++++---
 .../js_assets/js_filtering_filter.html        | 26 +++++---
 .../js_assets/js_filtering_medianBlur.html    | 26 +++++---
 .../js_assets/js_fourier_transform_dft.html   | 26 +++++---
 ...ic_transformations_getAffineTransform.html | 26 +++++---
 .../js_geometric_transformations_resize.html  | 26 +++++---
 ...tric_transformations_rotateWarpAffine.html | 26 +++++---
 ..._geometric_transformations_warpAffine.html | 26 +++++---
 ...etric_transformations_warpPerspective.html | 26 +++++---
 .../js_assets/js_grabcut_grabCut.html         | 26 +++++---
 .../js_assets/js_gradients_Laplacian.html     | 26 +++++---
 .../js_assets/js_gradients_Sobel.html         | 36 ++++++----
 .../js_assets/js_gradients_absSobel.html      | 36 ++++++----
 ...togram_backprojection_calcBackProject.html | 36 ++++++----
 .../js_histogram_begins_calcHist.html         | 26 +++++---
 ...js_histogram_equalization_createCLAHE.html | 26 +++++---
 ...s_histogram_equalization_equalizeHist.html | 26 +++++---
 .../js_houghcircles_HoughCirclesP.html        | 26 +++++---
 .../js_assets/js_houghlines_HoughLines.html   | 26 +++++---
 .../js_assets/js_houghlines_HoughLinesP.html  | 26 +++++---
 .../js_image_arithmetics_bitwise.html         | 44 +++++++++----
 .../js_assets/js_image_display.html           | 26 +++++---
 .../js_morphological_ops_blackHat.html        | 26 +++++---
 .../js_morphological_ops_closing.html         | 26 +++++---
 .../js_morphological_ops_dilate.html          | 26 +++++---
 .../js_assets/js_morphological_ops_erode.html | 26 +++++---
 ...rphological_ops_getStructuringElement.html | 26 +++++---
 .../js_morphological_ops_gradient.html        | 26 +++++---
 .../js_morphological_ops_opening.html         | 26 +++++---
 .../js_morphological_ops_topHat.html          | 26 +++++---
 .../js_assets/js_pyramids_pyrDown.html        | 26 +++++---
 .../js_assets/js_pyramids_pyrUp.html          | 26 +++++---
 .../js_assets/js_setup_usage.html             | 26 +++++---
 .../js_template_matching_matchTemplate.html   | 44 +++++++++----
 .../js_thresholding_adaptiveThreshold.html    | 26 +++++---
 .../js_assets/js_thresholding_threshold.html  | 26 +++++---
 doc/js_tutorials/js_assets/js_trackbar.html   | 66 +++++++------------
 .../js_assets/js_watershed_background.html    | 26 +++++---
 .../js_watershed_distanceTransform.html       | 26 +++++---
 .../js_assets/js_watershed_foreground.html    | 26 +++++---
 .../js_assets/js_watershed_threshold.html     | 26 +++++---
 .../js_assets/js_watershed_watershed.html     | 26 +++++---
 65 files changed, 1163 insertions(+), 555 deletions(-)

diff --git a/doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html b/doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html
index 448269c323..126b13141f 100644
--- a/doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html
+++ b/doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_basic_ops_roi.html b/doc/js_tutorials/js_assets/js_basic_ops_roi.html
index c23390b3c8..688c23d03b 100644
--- a/doc/js_tutorials/js_assets/js_basic_ops_roi.html
+++ b/doc/js_tutorials/js_assets/js_basic_ops_roi.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_canny.html b/doc/js_tutorials/js_assets/js_canny.html
index cf06df66d3..48264a0713 100644
--- a/doc/js_tutorials/js_assets/js_canny.html
+++ b/doc/js_tutorials/js_assets/js_canny.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html b/doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html
index 2eb60d238a..d6c79a0175 100644
--- a/doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html
+++ b/doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_colorspaces_inRange.html b/doc/js_tutorials/js_assets/js_colorspaces_inRange.html
index 6d8ec0630f..44fd749cc9 100644
--- a/doc/js_tutorials/js_assets/js_colorspaces_inRange.html
+++ b/doc/js_tutorials/js_assets/js_colorspaces_inRange.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contour_features_approxPolyDP.html b/doc/js_tutorials/js_assets/js_contour_features_approxPolyDP.html
index 4323fe8975..99bd42929e 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_approxPolyDP.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_approxPolyDP.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contour_features_area.html b/doc/js_tutorials/js_assets/js_contour_features_area.html
index ffb6379393..5f447fee4a 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_area.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_area.html
@@ -19,11 +19,11 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
+    <div>
         <canvas id="canvasInput"></canvas>
         <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
-    <div class="inputoutput">
+    <div>
         <p><strong>The area is: </strong><span id="areaOutput"></span></p>
     </div>
 
diff --git a/doc/js_tutorials/js_assets/js_contour_features_boundingRect.html b/doc/js_tutorials/js_assets/js_contour_features_boundingRect.html
index 44ff22eb16..a0586da8f1 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_boundingRect.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_boundingRect.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contour_features_convexHull.html b/doc/js_tutorials/js_assets/js_contour_features_convexHull.html
index 0275569cd2..1e4fae4c9c 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_convexHull.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_convexHull.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html b/doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html
index 9b66f0bb70..7ae1e48687 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contour_features_fitLine.html b/doc/js_tutorials/js_assets/js_contour_features_fitLine.html
index d36434d16f..f3398190c3 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_fitLine.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_fitLine.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contour_features_minAreaRect.html b/doc/js_tutorials/js_assets/js_contour_features_minAreaRect.html
index 837f17a8aa..990be3725b 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_minAreaRect.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_minAreaRect.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contour_features_minEnclosingCircle.html b/doc/js_tutorials/js_assets/js_contour_features_minEnclosingCircle.html
index c3253cabfd..77b6d7a92e 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_minEnclosingCircle.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_minEnclosingCircle.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contour_features_moments.html b/doc/js_tutorials/js_assets/js_contour_features_moments.html
index a4ed3a3abf..a8fee29e1b 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_moments.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_moments.html
@@ -19,11 +19,11 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
+    <div>
         <canvas id="canvasInput"></canvas>
         <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
-    <div class="inputoutput">
+    <div>
         <p><strong>The m00 is: </strong><span id="momentsOutput"></span></p>
     </div>
 </div>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_perimeter.html b/doc/js_tutorials/js_assets/js_contour_features_perimeter.html
index 477768ec14..b94ca18d9b 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_perimeter.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_perimeter.html
@@ -19,11 +19,11 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
+    <div>
         <canvas id="canvasInput"></canvas>
         <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
-    <div class="inputoutput">
+    <div>
         <p><strong>The perimeter is: </strong><span id="perimeterOutput"></span></p>
     </div>
 </div>
diff --git a/doc/js_tutorials/js_assets/js_contour_properties_transpose.html b/doc/js_tutorials/js_assets/js_contour_properties_transpose.html
index 54c8195c40..6aefa0180a 100644
--- a/doc/js_tutorials/js_assets/js_contour_properties_transpose.html
+++ b/doc/js_tutorials/js_assets/js_contour_properties_transpose.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contours_begin_contours.html b/doc/js_tutorials/js_assets/js_contours_begin_contours.html
index 67255cf9f5..8efd3298a5 100644
--- a/doc/js_tutorials/js_assets/js_contours_begin_contours.html
+++ b/doc/js_tutorials/js_assets/js_contours_begin_contours.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contours_more_functions_convexityDefects.html b/doc/js_tutorials/js_assets/js_contours_more_functions_convexityDefects.html
index 7fc6a88352..62861f7b34 100644
--- a/doc/js_tutorials/js_assets/js_contours_more_functions_convexityDefects.html
+++ b/doc/js_tutorials/js_assets/js_contours_more_functions_convexityDefects.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_contours_more_functions_shape.html b/doc/js_tutorials/js_assets/js_contours_more_functions_shape.html
index 06d448f68c..6b899ed33a 100644
--- a/doc/js_tutorials/js_assets/js_contours_more_functions_shape.html
+++ b/doc/js_tutorials/js_assets/js_contours_more_functions_shape.html
@@ -19,18 +19,27 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
-    <div class="inputoutput">
-        <p><strong>The result is: </strong><span id="matchShapesOutput"></span></p>
-    </div>
-
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
+</div>
+<div>
+    <p><strong>The result is: </strong><span id="matchShapesOutput"></span></p>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_example_style.css b/doc/js_tutorials/js_assets/js_example_style.css
index 7e2e30f4a1..7c0cb726a0 100644
--- a/doc/js_tutorials/js_assets/js_example_style.css
+++ b/doc/js_tutorials/js_assets/js_example_style.css
@@ -45,10 +45,6 @@ button[disabled] {
     color: red;
     font-weight: bold;
 }
-.inputoutput {
-    margin-top: 1em;
-    margin-bottom: 1em;
-}
 .caption {
     margin: 0;
     font-weight: bold;
@@ -69,3 +65,6 @@ button[disabled] {
 .hidden {
     display: none;
 }
+.small {
+    max-width: 300px;
+}
diff --git a/doc/js_tutorials/js_assets/js_face_detection.html b/doc/js_tutorials/js_assets/js_face_detection.html
index 7a3033a31d..6a047edada 100644
--- a/doc/js_tutorials/js_assets/js_face_detection.html
+++ b/doc/js_tutorials/js_assets/js_face_detection.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_filtering_GaussianBlur.html b/doc/js_tutorials/js_assets/js_filtering_GaussianBlur.html
index 7bb9064b21..1fc2033a98 100644
--- a/doc/js_tutorials/js_assets/js_filtering_GaussianBlur.html
+++ b/doc/js_tutorials/js_assets/js_filtering_GaussianBlur.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_filtering_bilateralFilter.html b/doc/js_tutorials/js_assets/js_filtering_bilateralFilter.html
index dd8ea1ebc6..e67b967a0b 100644
--- a/doc/js_tutorials/js_assets/js_filtering_bilateralFilter.html
+++ b/doc/js_tutorials/js_assets/js_filtering_bilateralFilter.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_filtering_blur.html b/doc/js_tutorials/js_assets/js_filtering_blur.html
index e1c3c525b3..9fc8528e84 100644
--- a/doc/js_tutorials/js_assets/js_filtering_blur.html
+++ b/doc/js_tutorials/js_assets/js_filtering_blur.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_filtering_filter.html b/doc/js_tutorials/js_assets/js_filtering_filter.html
index 7d31d0a34e..df0e1fa0c8 100644
--- a/doc/js_tutorials/js_assets/js_filtering_filter.html
+++ b/doc/js_tutorials/js_assets/js_filtering_filter.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_filtering_medianBlur.html b/doc/js_tutorials/js_assets/js_filtering_medianBlur.html
index e3ec63b46f..093b52e6d3 100644
--- a/doc/js_tutorials/js_assets/js_filtering_medianBlur.html
+++ b/doc/js_tutorials/js_assets/js_filtering_medianBlur.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_fourier_transform_dft.html b/doc/js_tutorials/js_assets/js_fourier_transform_dft.html
index 6551b542d1..df3f73a1b4 100644
--- a/doc/js_tutorials/js_assets/js_fourier_transform_dft.html
+++ b/doc/js_tutorials/js_assets/js_fourier_transform_dft.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_geometric_transformations_getAffineTransform.html b/doc/js_tutorials/js_assets/js_geometric_transformations_getAffineTransform.html
index 5d3025e2c8..48aa2b2ab6 100644
--- a/doc/js_tutorials/js_assets/js_geometric_transformations_getAffineTransform.html
+++ b/doc/js_tutorials/js_assets/js_geometric_transformations_getAffineTransform.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_geometric_transformations_resize.html b/doc/js_tutorials/js_assets/js_geometric_transformations_resize.html
index 27a4105dc3..5100b946ce 100644
--- a/doc/js_tutorials/js_assets/js_geometric_transformations_resize.html
+++ b/doc/js_tutorials/js_assets/js_geometric_transformations_resize.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_geometric_transformations_rotateWarpAffine.html b/doc/js_tutorials/js_assets/js_geometric_transformations_rotateWarpAffine.html
index f798926836..798d1ce86e 100644
--- a/doc/js_tutorials/js_assets/js_geometric_transformations_rotateWarpAffine.html
+++ b/doc/js_tutorials/js_assets/js_geometric_transformations_rotateWarpAffine.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_geometric_transformations_warpAffine.html b/doc/js_tutorials/js_assets/js_geometric_transformations_warpAffine.html
index 3ba1759da2..a7e54d661d 100644
--- a/doc/js_tutorials/js_assets/js_geometric_transformations_warpAffine.html
+++ b/doc/js_tutorials/js_assets/js_geometric_transformations_warpAffine.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_geometric_transformations_warpPerspective.html b/doc/js_tutorials/js_assets/js_geometric_transformations_warpPerspective.html
index 2699003bf5..5608b918a7 100644
--- a/doc/js_tutorials/js_assets/js_geometric_transformations_warpPerspective.html
+++ b/doc/js_tutorials/js_assets/js_geometric_transformations_warpPerspective.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_grabcut_grabCut.html b/doc/js_tutorials/js_assets/js_grabcut_grabCut.html
index e83ac71769..c8347f95db 100644
--- a/doc/js_tutorials/js_assets/js_grabcut_grabCut.html
+++ b/doc/js_tutorials/js_assets/js_grabcut_grabCut.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_gradients_Laplacian.html b/doc/js_tutorials/js_assets/js_gradients_Laplacian.html
index a37f9b401b..0ada3a3185 100644
--- a/doc/js_tutorials/js_assets/js_gradients_Laplacian.html
+++ b/doc/js_tutorials/js_assets/js_gradients_Laplacian.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_gradients_Sobel.html b/doc/js_tutorials/js_assets/js_gradients_Sobel.html
index 38296906d1..676eb86846 100644
--- a/doc/js_tutorials/js_assets/js_gradients_Sobel.html
+++ b/doc/js_tutorials/js_assets/js_gradients_Sobel.html
@@ -19,18 +19,30 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutputx"></canvas>
-        <div class="caption">canvasOutputx</div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutputy"></canvas>
-        <div class="caption">canvasOutputy</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput" class="small"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutputx" class="small"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutputy" class="small"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutputx</div>
+        </td>
+        <td>
+            <div class="caption">canvasOutputy</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_gradients_absSobel.html b/doc/js_tutorials/js_assets/js_gradients_absSobel.html
index 7fba5e5e44..3b304f7871 100644
--- a/doc/js_tutorials/js_assets/js_gradients_absSobel.html
+++ b/doc/js_tutorials/js_assets/js_gradients_absSobel.html
@@ -19,18 +19,30 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput8U"></canvas>
-        <div class="caption">canvasOutput8U</div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput64F"></canvas>
-        <div class="caption">canvasOutput64F</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput" class="small"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput8U" class="small"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput64F" class="small"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput8U</div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput64F</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_histogram_backprojection_calcBackProject.html b/doc/js_tutorials/js_assets/js_histogram_backprojection_calcBackProject.html
index dc79945b96..b3881c84f5 100644
--- a/doc/js_tutorials/js_assets/js_histogram_backprojection_calcBackProject.html
+++ b/doc/js_tutorials/js_assets/js_histogram_backprojection_calcBackProject.html
@@ -19,18 +19,30 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="srcCanvasInput"></canvas>
-        <div class="caption">srcCanvasInput <input type="file" id="srcFileInput" name="file" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="dstCanvasInput"></canvas>
-        <div class="caption">dstCanvasInput <input type="file" id="dstFileInput" name="file" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="srcCanvasInput" class="small"></canvas>
+        </td>
+        <td>
+            <canvas id="dstCanvasInput" class="small"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput" class="small"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">srcCanvasInput <input type="file" id="srcFileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">dstCanvasInput <input type="file" id="dstFileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_histogram_begins_calcHist.html b/doc/js_tutorials/js_assets/js_histogram_begins_calcHist.html
index e1b3a28df5..49b04950a0 100644
--- a/doc/js_tutorials/js_assets/js_histogram_begins_calcHist.html
+++ b/doc/js_tutorials/js_assets/js_histogram_begins_calcHist.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_histogram_equalization_createCLAHE.html b/doc/js_tutorials/js_assets/js_histogram_equalization_createCLAHE.html
index 017326d505..cd70b19512 100644
--- a/doc/js_tutorials/js_assets/js_histogram_equalization_createCLAHE.html
+++ b/doc/js_tutorials/js_assets/js_histogram_equalization_createCLAHE.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_histogram_equalization_equalizeHist.html b/doc/js_tutorials/js_assets/js_histogram_equalization_equalizeHist.html
index e8db41d53f..873d2f4c2d 100644
--- a/doc/js_tutorials/js_assets/js_histogram_equalization_equalizeHist.html
+++ b/doc/js_tutorials/js_assets/js_histogram_equalization_equalizeHist.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_houghcircles_HoughCirclesP.html b/doc/js_tutorials/js_assets/js_houghcircles_HoughCirclesP.html
index 2af7829f6a..f707adb514 100644
--- a/doc/js_tutorials/js_assets/js_houghcircles_HoughCirclesP.html
+++ b/doc/js_tutorials/js_assets/js_houghcircles_HoughCirclesP.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_houghlines_HoughLines.html b/doc/js_tutorials/js_assets/js_houghlines_HoughLines.html
index 2153881426..2edbe39658 100644
--- a/doc/js_tutorials/js_assets/js_houghlines_HoughLines.html
+++ b/doc/js_tutorials/js_assets/js_houghlines_HoughLines.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_houghlines_HoughLinesP.html b/doc/js_tutorials/js_assets/js_houghlines_HoughLinesP.html
index 64fd1e7231..e69bf541e9 100644
--- a/doc/js_tutorials/js_assets/js_houghlines_HoughLinesP.html
+++ b/doc/js_tutorials/js_assets/js_houghlines_HoughLinesP.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_image_arithmetics_bitwise.html b/doc/js_tutorials/js_assets/js_image_arithmetics_bitwise.html
index e35e3573d2..05c0ffd730 100644
--- a/doc/js_tutorials/js_assets/js_image_arithmetics_bitwise.html
+++ b/doc/js_tutorials/js_assets/js_image_arithmetics_bitwise.html
@@ -19,18 +19,38 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="imageCanvasInput"></canvas>
-        <div class="caption">imageCanvasInput <input type="file" id="imageFileInput" name="file" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="logoCanvasInput"></canvas>
-        <div class="caption">logoCanvasInput <input type="file" id="logoFileInput" name="file" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="imageCanvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">imageCanvasInput <input type="file" id="imageFileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <canvas id="logoCanvasInput"></canvas>
+        </td>
+        <td>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">logoCanvasInput <input type="file" id="logoFileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_image_display.html b/doc/js_tutorials/js_assets/js_image_display.html
index 83b5c148f5..0e4ff185a0 100644
--- a/doc/js_tutorials/js_assets/js_image_display.html
+++ b/doc/js_tutorials/js_assets/js_image_display.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_blackHat.html b/doc/js_tutorials/js_assets/js_morphological_ops_blackHat.html
index 20235fbe30..052520adb5 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_blackHat.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_blackHat.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_closing.html b/doc/js_tutorials/js_assets/js_morphological_ops_closing.html
index d77bb9128f..9b364b1262 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_closing.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_closing.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_dilate.html b/doc/js_tutorials/js_assets/js_morphological_ops_dilate.html
index ef08404fbc..ca95b022c8 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_dilate.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_dilate.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_erode.html b/doc/js_tutorials/js_assets/js_morphological_ops_erode.html
index 19677db772..52081552c5 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_erode.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_erode.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_getStructuringElement.html b/doc/js_tutorials/js_assets/js_morphological_ops_getStructuringElement.html
index edcb9ce7d7..348eefc36d 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_getStructuringElement.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_getStructuringElement.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_gradient.html b/doc/js_tutorials/js_assets/js_morphological_ops_gradient.html
index 3851c438ed..060d5d44e3 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_gradient.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_gradient.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_opening.html b/doc/js_tutorials/js_assets/js_morphological_ops_opening.html
index 582e86f8b9..0e1a961c6a 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_opening.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_opening.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_topHat.html b/doc/js_tutorials/js_assets/js_morphological_ops_topHat.html
index 0c07151358..26e6959bb2 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_topHat.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_topHat.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_pyramids_pyrDown.html b/doc/js_tutorials/js_assets/js_pyramids_pyrDown.html
index e80beba724..6db4c0209c 100644
--- a/doc/js_tutorials/js_assets/js_pyramids_pyrDown.html
+++ b/doc/js_tutorials/js_assets/js_pyramids_pyrDown.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_pyramids_pyrUp.html b/doc/js_tutorials/js_assets/js_pyramids_pyrUp.html
index e7e9572edb..4f69903246 100644
--- a/doc/js_tutorials/js_assets/js_pyramids_pyrUp.html
+++ b/doc/js_tutorials/js_assets/js_pyramids_pyrUp.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_setup_usage.html b/doc/js_tutorials/js_assets/js_setup_usage.html
index 6d4a6aadf5..4f00dc3bd9 100644
--- a/doc/js_tutorials/js_assets/js_setup_usage.html
+++ b/doc/js_tutorials/js_assets/js_setup_usage.html
@@ -9,14 +9,24 @@
 <h2>Hello OpenCV.js</h2>
 <p id="status">OpenCV.js is loading...</p>
 <div>
-    <div class="inputoutput">
-        <img id="imageSrc" alt="No Image" />
-        <div class="caption">imageSrc <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput" ></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <img id="imageSrc" alt="No Image" class="small" />
+        </td>
+        <td>
+            <canvas id="canvasOutput" class="small" height="300px"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">imageSrc <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script type="text/javascript">
diff --git a/doc/js_tutorials/js_assets/js_template_matching_matchTemplate.html b/doc/js_tutorials/js_assets/js_template_matching_matchTemplate.html
index 0d218d452f..ad2bb54c48 100644
--- a/doc/js_tutorials/js_assets/js_template_matching_matchTemplate.html
+++ b/doc/js_tutorials/js_assets/js_template_matching_matchTemplate.html
@@ -20,18 +20,38 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="imageCanvasInput"></canvas>
-        <div class="caption">imageCanvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="templateCanvasInput"></canvas>
-        <div class="caption">templateCanvasInput <input type="file" id="templateFileInput" name="file" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="imageCanvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">imageCanvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <canvas id="templateCanvasInput"></canvas>
+        </td>
+        <td>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">templateCanvasInput <input type="file" id="templateFileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_thresholding_adaptiveThreshold.html b/doc/js_tutorials/js_assets/js_thresholding_adaptiveThreshold.html
index 2ce8854015..0ac1efb06c 100644
--- a/doc/js_tutorials/js_assets/js_thresholding_adaptiveThreshold.html
+++ b/doc/js_tutorials/js_assets/js_thresholding_adaptiveThreshold.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_thresholding_threshold.html b/doc/js_tutorials/js_assets/js_thresholding_threshold.html
index b36d5987f2..67d74b05f4 100644
--- a/doc/js_tutorials/js_assets/js_thresholding_threshold.html
+++ b/doc/js_tutorials/js_assets/js_thresholding_threshold.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_trackbar.html b/doc/js_tutorials/js_assets/js_trackbar.html
index ff9818f3b3..84e21b9b2d 100644
--- a/doc/js_tutorials/js_assets/js_trackbar.html
+++ b/doc/js_tutorials/js_assets/js_trackbar.html
@@ -21,47 +21,31 @@
     <b>trackbar</b>
     <input type="range" id="trackbar" disabled value="50" min="0" max="100" step="1">
     <label id="weightValue" ></label>
-    <div class="inputoutput">
-        <div>
-            <table cellpadding="0" cellspacing="0" width="0" border="0">
-            <tr>
-                <td>
-                    <canvas id="canvasInput1"></canvas>
-                </td>
-                <td>
-                    <canvas id="canvasInput2"></canvas>
-                </td>
-                <td></td>
-                <td></td>
-            </tr>
-            <tr>
-                <td>
-                    <p class="caption">canvasInput1</p>
-                </td>
-                <td>
-                    <p class="caption">canvasInput2</p>
-                </td>
-                <td></td>
-                <td></td>
-            </tr>
-            <tr>
-                <td>
-                    <canvas id="canvasOutput"></canvas>
-                </td>
-                <td></td>
-                <td></td>
-                <td></td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="caption">canvasOutput</div>
-                </td>
-                <td></td>
-                <td></td>
-                <td></td>
-            </tr>
-            </table>
-        </div>
+    <div>
+        <table cellpadding="0" cellspacing="0" width="0" border="0">
+        <tr>
+            <td>
+                <canvas id="canvasInput1" class="small"></canvas>
+            </td>
+            <td>
+                <canvas id="canvasInput2" class="small"></canvas>
+            </td>
+            <td>
+                <canvas id="canvasOutput" class="small"></canvas>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <div class="caption">canvasInput1</div>
+            </td>
+            <td>
+                <div class="caption">canvasInput2</div>
+            </td>
+            <td>
+                <div class="caption">canvasOutput</div>
+            </td>
+        </tr>
+        </table>
     </div>
 </div>
 <script src="utils.js" type="text/javascript"></script>
diff --git a/doc/js_tutorials/js_assets/js_watershed_background.html b/doc/js_tutorials/js_assets/js_watershed_background.html
index fb6a679732..aa99016b38 100644
--- a/doc/js_tutorials/js_assets/js_watershed_background.html
+++ b/doc/js_tutorials/js_assets/js_watershed_background.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_watershed_distanceTransform.html b/doc/js_tutorials/js_assets/js_watershed_distanceTransform.html
index 6f8056de5b..7204706b2b 100644
--- a/doc/js_tutorials/js_assets/js_watershed_distanceTransform.html
+++ b/doc/js_tutorials/js_assets/js_watershed_distanceTransform.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_watershed_foreground.html b/doc/js_tutorials/js_assets/js_watershed_foreground.html
index 75e41ed424..e9a3418caf 100644
--- a/doc/js_tutorials/js_assets/js_watershed_foreground.html
+++ b/doc/js_tutorials/js_assets/js_watershed_foreground.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_watershed_threshold.html b/doc/js_tutorials/js_assets/js_watershed_threshold.html
index 5280c9541e..ed212a059f 100644
--- a/doc/js_tutorials/js_assets/js_watershed_threshold.html
+++ b/doc/js_tutorials/js_assets/js_watershed_threshold.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">
diff --git a/doc/js_tutorials/js_assets/js_watershed_watershed.html b/doc/js_tutorials/js_assets/js_watershed_watershed.html
index 1094af2348..f68c0fc01b 100644
--- a/doc/js_tutorials/js_assets/js_watershed_watershed.html
+++ b/doc/js_tutorials/js_assets/js_watershed_watershed.html
@@ -19,14 +19,24 @@
 <p class="err" id="errorMessage"></p>
 </div>
 <div>
-    <div class="inputoutput">
-        <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
-    </div>
-    <div class="inputoutput">
-        <canvas id="canvasOutput"></canvas>
-        <div class="caption">canvasOutput</div>
-    </div>
+    <table cellpadding="0" cellspacing="0" width="0" border="0">
+    <tr>
+        <td>
+            <canvas id="canvasInput"></canvas>
+        </td>
+        <td>
+            <canvas id="canvasOutput"></canvas>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
+        </td>
+        <td>
+            <div class="caption">canvasOutput</div>
+        </td>
+    </tr>
+    </table>
 </div>
 <script src="utils.js" type="text/javascript"></script>
 <script id="codeSnippet" type="text/code-snippet">