diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml
index 127cd61715..b77606f148 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml
@@ -10,17 +10,30 @@
     </abp-style-bundle>
 }
 
+@section scripts {
+    <abp-script-bundle>
+        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
+            <abp-script src="/Pages/Components/highlightCode.js" />*@
+    </abp-script-bundle>
+}
+
+<link rel="stylesheet"
+      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
+<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
+
+
 <h2>Tables</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/content/Tables/" target="_blank"> Bootstrap Tables</a>.</p>
 
-<h4># Tables Examples</h4>
+<h4>Examples</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <abp-table striped-rows="true" hoverable-rows="true" responsive-sm="true">
-            <thead theme="Dark">
+        <abp-table hoverable-rows="true" responsive-sm="true">
+            <thead>
                 <tr>
                     <th scope="Column">#</th>
                     <th scope="Column">First</th>
@@ -33,9 +46,9 @@
                     <th scope="Row">1</th>
                     <td>Mark</td>
                     <td>Otto</td>
-                    <td abp-table-style="Danger">mdo</td>
+                    <td table-style="Danger">mdo</td>
                 </tr>
-                <tr abp-table-style="Warning">
+                <tr table-style="Warning">
                     <th scope="Row">2</th>
                     <td>Jacob</td>
                     <td>Thornton</td>
@@ -43,46 +56,413 @@
                 </tr>
                 <tr>
                     <th scope="Row">3</th>
-                    <td abp-table-style="Success">Larry</td>
+                    <td table-style="Success">Larry</td>
                     <td>the Bird</td>
                     <td>twitter</td>
                 </tr>
             </tbody>
         </abp-table>
-
     </div>
     <div class="code-area">
-        <pre>
-        &lt;abp-table striped-rows=&quot;true&quot; small=&quot;true&quot; hoverable-rows=&quot;true&quot; responsive-sm=&quot;true&quot;&gt;
-            &lt;thead theme=&quot;Dark&quot;&gt;
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-table hoverable-rows=&quot;true&quot; responsive-sm=&quot;true&quot;&gt;
+    &lt;thead&gt;
+    &lt;tr&gt;
+        &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
+        &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
+        &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
+        &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+    &lt;tr&gt;
+        &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
+        &lt;td&gt;Mark&lt;/td&gt;
+        &lt;td&gt;Otto&lt;/td&gt;
+        &lt;td table-style=&quot;Danger&quot;&gt;mdo&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr table-style=&quot;Warning&quot;&gt;
+        &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
+        &lt;td&gt;Jacob&lt;/td&gt;
+        &lt;td&gt;Thornton&lt;/td&gt;
+        &lt;td&gt;fat&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
+        &lt;td table-style=&quot;Success&quot;&gt;Larry&lt;/td&gt;
+        &lt;td&gt;the Bird&lt;/td&gt;
+        &lt;td&gt;twitter&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/abp-table&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;table-responsive-sm&quot;&gt;
+       &lt;table class=&quot;table table-hover&quot;&gt;
+            &lt;thead&gt;
             &lt;tr&gt;
-                &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
-                &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
-                &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
-                &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
+                &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
+                &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
+                &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
+                &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
             &lt;/tr&gt;
             &lt;/thead&gt;
             &lt;tbody&gt;
             &lt;tr&gt;
-                &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
+                &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
                 &lt;td&gt;Mark&lt;/td&gt;
                 &lt;td&gt;Otto&lt;/td&gt;
-                &lt;td  abp-table-style=&quot;Danger&quot;&gt;mdo&lt;/td&gt;
+                &lt;td class=&quot;table-danger&quot;&gt;mdo&lt;/td&gt;
             &lt;/tr&gt;
-            &lt;tr abp-table-style=&quot;Warning&quot;&gt;
-                &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
+            &lt;tr class=&quot;table-warning&quot;&gt;
+                &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
                 &lt;td&gt;Jacob&lt;/td&gt;
                 &lt;td&gt;Thornton&lt;/td&gt;
                 &lt;td&gt;fat&lt;/td&gt;
             &lt;/tr&gt;
             &lt;tr&gt;
-                &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
-                &lt;td abp-table-style=&quot;Success&quot;&gt;Larry&lt;/td&gt;
+                &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
+                &lt;td class=&quot;table-success&quot;&gt;Larry&lt;/td&gt;
                 &lt;td&gt;the Bird&lt;/td&gt;
                 &lt;td&gt;twitter&lt;/td&gt;
             &lt;/tr&gt;
             &lt;/tbody&gt;
-        &lt;/abp-table&gt;
-</pre>
+       &lt;/table&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-table small="true" striped-rows="true" border-style="Bordered">
+            <thead Theme="Dark">
+                <tr>
+                    <th scope="Column">#</th>
+                    <th scope="Column">First</th>
+                    <th scope="Column">Last</th>
+                    <th scope="Column">Handle</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="Row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>mdo</td>
+                </tr>
+                <tr>
+                    <th scope="Row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>fat</td>
+                </tr>
+                <tr>
+                    <th scope="Row">3</th>
+                    <td>Larry</td>
+                    <td>the Bird</td>
+                    <td>twitter</td>
+                </tr>
+            </tbody>
+        </abp-table>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-table small=&quot;true&quot; striped-rows=&quot;true&quot; border-style=&quot;Bordered&quot;&gt;
+    &lt;thead Theme=&quot;Dark&quot;&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/abp-table&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;table class=&quot;table table-sm table-striped table-bordered&quot;&gt;
+    &lt;thead class=&quot;thead-dark&quot;&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-table striped-rows="true" dark-theme="true">
+            <caption>List of users</caption>
+            <thead>
+                <tr>
+                    <th scope="Column">#</th>
+                    <th scope="Column">First</th>
+                    <th scope="Column">Last</th>
+                    <th scope="Column">Handle</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="Row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>mdo</td>
+                </tr>
+                <tr>
+                    <th scope="Row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>fat</td>
+                </tr>
+                <tr>
+                    <th scope="Row">3</th>
+                    <td>Larry</td>
+                    <td>the Bird</td>
+                    <td>twitter</td>
+                </tr>
+            </tbody>
+        </abp-table>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-table striped-rows=&quot;true&quot; dark-theme=&quot;true&quot;&gt;
+    &lt;caption&gt;List of users&lt;/caption&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/abp-table&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;table class=&quot;table table-dark table-striped&quot;&gt;
+    &lt;caption&gt;List of users&lt;/caption&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-table border-style="Borderless">
+            <thead>
+                <tr>
+                    <th scope="Column">#</th>
+                    <th scope="Column">First</th>
+                    <th scope="Column">Last</th>
+                    <th scope="Column">Handle</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="Row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>mdo</td>
+                </tr>
+                <tr>
+                    <th scope="Row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>fat</td>
+                </tr>
+                <tr>
+                    <th scope="Row">3</th>
+                    <td>Larry</td>
+                    <td>the Bird</td>
+                    <td>twitter</td>
+                </tr>
+            </tbody>
+        </abp-table>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-table border-style=&quot;Borderless&quot;&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/abp-table&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;table class=&quot;table table-borderless&quot;&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
+            &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
+            &lt;td&gt;Mark&lt;/td&gt;
+            &lt;td&gt;Otto&lt;/td&gt;
+            &lt;td&gt;mdo&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
+            &lt;td&gt;Jacob&lt;/td&gt;
+            &lt;td&gt;Thornton&lt;/td&gt;
+            &lt;td&gt;fat&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
+            &lt;td&gt;Larry&lt;/td&gt;
+            &lt;td&gt;the Bird&lt;/td&gt;
+            &lt;td&gt;twitter&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>