diff --git a/docs/components/lists-tables-trees/html-table.md b/docs/components/lists-tables-trees/html-table.md
index 9516b198cd..e0829d178e 100644
--- a/docs/components/lists-tables-trees/html-table.md
+++ b/docs/components/lists-tables-trees/html-table.md
@@ -23,8 +23,79 @@ it comes with some inherent limitations.
 
 ## Code ---
 
-For simple HTML tables the general [Bootstrap Tables](https://getbootstrap.com/docs/5.1/content/tables/)
-documentation applies. Add the CSS class `table-hover` for row hover effect. The theme comes with the
-following styling for `table`:
+Element styles native HTML tables with CSS classes. Apply the `.table` class to a `<table>` element.
 
-<si-docs-component example="datatable/bootstrap" height="500"></si-docs-component>
+<si-docs-component example="datatable/html-table" height="500"></si-docs-component>
+
+### Usage
+
+Use semantic table markup with a caption, table headers, and table body. Add `scope="col"` to column headers and `scope="row"` to row headers so assistive technologies can associate headers with their cells.
+
+```html
+<table class="table">
+  <caption>Device status</caption>
+  <thead>
+    <tr>
+      <th scope="col">Device</th>
+      <th scope="col">Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Cooling unit</th>
+      <td>Operational</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+<si-docs-component example="datatable/html-table-basic" height="330"></si-docs-component>
+
+### Variants
+
+Add `.table-sm` to use condensed rows. Add `.table-striped` to distinguish alternating body rows, and `.table-hover` to provide hover feedback for body rows.
+
+Apply `.table-active` to a row or cell to highlight it. Use `.table-success`, `.table-info`, `.table-warning`, or `.table-danger` on a row or cell to communicate its status.
+
+```html
+<table class="table table-sm table-striped table-hover">
+  <!-- Table content -->
+</table>
+
+<tr class="table-active">
+  <!-- Table cells -->
+</tr>
+
+<tr class="table-warning">
+  <!-- Table cells -->
+</tr>
+```
+
+<si-docs-component example="datatable/html-table-variants" height="330"></si-docs-component>
+
+### Captions
+
+Captions are displayed below the table by default. Add `.caption-top` to the `<table>` element to display the caption above it.
+
+```html
+<table class="table caption-top">
+  <caption>Device status</caption>
+  <!-- Table content -->
+</table>
+```
+
+<si-docs-component example="datatable/html-table-caption" height="330"></si-docs-component>
+
+### Responsive tables
+
+Wrap a wide table in `.table-responsive` to allow horizontal scrolling. Use a breakpoint variant such as `.table-responsive-md` to enable scrolling only below that breakpoint.
+
+```html
+<div class="table-responsive">
+  <table class="table">
+    <!-- Table content -->
+  </table>
+</div>
+```
+
+<si-docs-component example="datatable/html-table-responsive" height="330"></si-docs-component>
diff --git a/playwright/e2e/element-examples/static.spec.ts b/playwright/e2e/element-examples/static.spec.ts
index c287a411c7..425157fc02 100644
--- a/playwright/e2e/element-examples/static.spec.ts
+++ b/playwright/e2e/element-examples/static.spec.ts
@@ -13,7 +13,11 @@ test('colors/color-utils', ({ si }) => si.static());
 test('custom-form-elements/checkbox', ({ si }) => si.static());
 test('custom-form-elements/radio', ({ si }) => si.static());
 test('custom-form-elements/select', ({ si }) => si.static());
-test('datatable/bootstrap', ({ si }) => si.static());
+test('datatable/html-table', ({ si }) => si.static());
+test('datatable/html-table-basic', ({ si }) => si.static());
+test('datatable/html-table-caption', ({ si }) => si.static());
+test('datatable/html-table-responsive', ({ si }) => si.static());
+test('datatable/html-table-variants', ({ si }) => si.static());
 test('datatable/datatable-footer', async ({ si }) => {
   test.setTimeout(60000);
   await si.static({ disabledA11yRules: ['scrollable-region-focusable'] });
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-light-linux.png
deleted file mode 100644
index 5b4f84dd37..0000000000
--- a/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-light-linux.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:148956d13a6f431e6ed87aa185d3cf97f16f79b03e505a1a8273cac70f9189b5
-size 29242
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-dark-linux.png
new file mode 100644
index 0000000000..bf02c3d241
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:004b10df103bfebe3be45343b69e8fafd80cfaef5644f1218495729df9f45e4d
+size 13080
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-light-linux.png
new file mode 100644
index 0000000000..70997df7a7
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:84e6db0a901932bbbc147d17d64c35d9b8676f98d04f67d5efdea016602a7a77
+size 12170
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic.yaml b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic.yaml
new file mode 100644
index 0000000000..79bfd7ea9b
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic.yaml
@@ -0,0 +1,15 @@
+- table:
+  - rowgroup:
+    - row "Device Status Last updated":
+      - columnheader "Device"
+      - columnheader "Status"
+      - columnheader "Last updated"
+  - rowgroup:
+    - row /Cooling unit Operational \d+:\d+/:
+      - rowheader "Cooling unit"
+      - cell "Operational"
+      - cell /\d+:\d+/
+    - row /Ventilation unit Operational \d+:\d+/:
+      - rowheader "Ventilation unit"
+      - cell "Operational"
+      - cell /\d+:\d+/
\ No newline at end of file
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-dark-linux.png
new file mode 100644
index 0000000000..e19080d068
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bf04b9aa248b3211cd5abe599af83f15fbed4765a4495c14d993540597d41309
+size 9637
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-light-linux.png
new file mode 100644
index 0000000000..2a2f21e814
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e52a7146d0200390bc193bff2032a0d89ec0cf46a7e28854b4a35b4298c0cdc1
+size 9234
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption.yaml b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption.yaml
new file mode 100644
index 0000000000..6f3d1d46f8
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption.yaml
@@ -0,0 +1,10 @@
+- table "Device status":
+  - caption: Device status
+  - rowgroup:
+    - row "Device Status":
+      - columnheader "Device"
+      - columnheader "Status"
+  - rowgroup:
+    - row "Cooling unit Operational":
+      - rowheader "Cooling unit"
+      - cell "Operational"
\ No newline at end of file
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-dark-linux.png
similarity index 100%
rename from playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-dark-linux.png
rename to playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-dark-linux.png
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-light-linux.png
new file mode 100644
index 0000000000..f1e34b2752
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:60d5c8e4d03c48ecdb0fb24372d8857da6d5c23bbbb23061ce7ad11405619ec7
+size 29248
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-dark-linux.png
new file mode 100644
index 0000000000..46c7cd59d8
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f64a7dfcbd015e660700eafb88c9f0cb7562c68ca9906464d4d8f96198cfc639
+size 16601
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-light-linux.png
new file mode 100644
index 0000000000..a1991b095a
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0568e48491ebad6d1e61ccab68e7680a66ab833908f2a95f5f6177c6d89a5a53
+size 15309
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive.yaml b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive.yaml
new file mode 100644
index 0000000000..a6047e2a33
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive.yaml
@@ -0,0 +1,21 @@
+- table:
+  - rowgroup:
+    - row "Device Status Last updated Location Operator":
+      - columnheader "Device"
+      - columnheader "Status"
+      - columnheader "Last updated"
+      - columnheader "Location"
+      - columnheader "Operator"
+  - rowgroup:
+    - row /Cooling unit Operational \d+:\d+ Building A Alex Smith/:
+      - rowheader "Cooling unit"
+      - cell "Operational"
+      - cell /\d+:\d+/
+      - cell "Building A"
+      - cell "Alex Smith"
+    - row /Ventilation unit Operational \d+:\d+ Building B Jordan Lee/:
+      - rowheader "Ventilation unit"
+      - cell "Operational"
+      - cell /\d+:\d+/
+      - cell "Building B"
+      - cell "Jordan Lee"
\ No newline at end of file
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-dark-linux.png
new file mode 100644
index 0000000000..46c19c2774
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7c1cea9bb10da761821116070ca0f8367ef1cb4fb87a02ab408e01710ce7994e
+size 16393
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-light-linux.png
new file mode 100644
index 0000000000..4091609854
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4954923c89e76809bf4cf921006a939ca7e764d64fd0badaa683bf97ac6c30f2
+size 15618
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants.yaml b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants.yaml
new file mode 100644
index 0000000000..8e1dfa4620
--- /dev/null
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants.yaml
@@ -0,0 +1,19 @@
+- table:
+  - rowgroup:
+    - row "Device Status Last updated":
+      - columnheader "Device"
+      - columnheader "Status"
+      - columnheader "Last updated"
+  - rowgroup:
+    - row /Cooling unit Operational \d+:\d+/:
+      - rowheader "Cooling unit"
+      - cell "Operational"
+      - cell /\d+:\d+/
+    - row /Ventilation unit Selected \d+:\d+/:
+      - rowheader "Ventilation unit"
+      - cell "Selected"
+      - cell /\d+:\d+/
+    - row /Heating unit Maintenance required \d+:\d+/:
+      - rowheader "Heating unit"
+      - cell "Maintenance required"
+      - cell /\d+:\d+/
\ No newline at end of file
diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap.yaml b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table.yaml
similarity index 87%
rename from playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap.yaml
rename to playwright/snapshots/static.spec.ts-snapshots/datatable--html-table.yaml
index 4eec2e17fa..3bc1ab1e11 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table.yaml
@@ -16,19 +16,19 @@
       - cell "selected":
         - checkbox "selected"
       - cell "open dropdown":
-        - button "open dropdown"
+        - button "open dropdown": 
       - cell
       - cell "Cooling coil device mode B1'Flr_1'RSegm1'HVAC"
       - cell
       - cell
       - cell
       - cell /\d+%/:
-        - textbox "value" [disabled]
+        - textbox "value" [disabled]: /\d+%/
     - row "selected open dropdown Cooling coil cooling request Control Mode":
       - cell "selected":
         - checkbox "selected"
       - cell "open dropdown":
-        - button "open dropdown"
+        - button "open dropdown": 
       - cell
       - cell "Cooling coil cooling request"
       - cell
@@ -41,26 +41,26 @@
       - cell "selected":
         - checkbox "selected"
       - cell "open dropdown":
-        - button "open dropdown"
+        - button "open dropdown": 
       - cell
       - cell "Cooling coil dehumidification request"
       - cell
       - cell
       - cell
       - cell /\d+%/:
-        - textbox "value" [disabled]
+        - textbox "value" [disabled]: /\d+%/
     - row /selected open dropdown Cooling coil available for cooling \d+%/:
       - cell "selected":
         - checkbox "selected"
       - cell "open dropdown":
-        - button "open dropdown"
+        - button "open dropdown": 
       - cell
       - cell "Cooling coil available for cooling"
       - cell
       - cell
       - cell
       - cell /\d+%/:
-        - textbox "value" [disabled]
+        - textbox "value" [disabled]: /\d+%/
 - text: Settings Condensed rows
 - checkbox "Check to apply the table-sm class for condensed row height."
 - text: Check to apply the table-sm class for condensed row height. Hoverable rows
diff --git a/projects/element-theme/src/styles/bootstrap/_variables.scss b/projects/element-theme/src/styles/bootstrap/_variables.scss
index d6822aaeae..55e847cea8 100644
--- a/projects/element-theme/src/styles/bootstrap/_variables.scss
+++ b/projects/element-theme/src/styles/bootstrap/_variables.scss
@@ -273,7 +273,7 @@ $table-striped-order: odd !default;
 
 $table-group-separator-color: currentColor !default;
 
-$table-caption-color: $text-muted !default;
+$table-caption-color: semantic-tokens.$element-text-secondary !default;
 
 $table-variants: (
   'success': semantic-tokens.$element-base-success,
diff --git a/src/app/examples/datatable/html-table-basic.html b/src/app/examples/datatable/html-table-basic.html
new file mode 100644
index 0000000000..eff73685f0
--- /dev/null
+++ b/src/app/examples/datatable/html-table-basic.html
@@ -0,0 +1,21 @@
+<table class="table">
+  <thead>
+    <tr>
+      <th scope="col">Device</th>
+      <th scope="col">Status</th>
+      <th scope="col">Last updated</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Cooling unit</th>
+      <td>Operational</td>
+      <td>10:30</td>
+    </tr>
+    <tr>
+      <th scope="row">Ventilation unit</th>
+      <td>Operational</td>
+      <td>10:28</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/src/app/examples/datatable/html-table-basic.ts b/src/app/examples/datatable/html-table-basic.ts
new file mode 100644
index 0000000000..652d4a8dc4
--- /dev/null
+++ b/src/app/examples/datatable/html-table-basic.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sample',
+  templateUrl: './html-table-basic.html',
+  host: { class: 'p-5' }
+})
+export class SampleComponent {}
diff --git a/src/app/examples/datatable/html-table-caption.html b/src/app/examples/datatable/html-table-caption.html
new file mode 100644
index 0000000000..2168f70b5d
--- /dev/null
+++ b/src/app/examples/datatable/html-table-caption.html
@@ -0,0 +1,15 @@
+<table class="table caption-top">
+  <caption>Device status</caption>
+  <thead>
+    <tr>
+      <th scope="col">Device</th>
+      <th scope="col">Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Cooling unit</th>
+      <td>Operational</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/src/app/examples/datatable/html-table-caption.ts b/src/app/examples/datatable/html-table-caption.ts
new file mode 100644
index 0000000000..3810e077a4
--- /dev/null
+++ b/src/app/examples/datatable/html-table-caption.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sample',
+  templateUrl: './html-table-caption.html',
+  host: { class: 'p-5' }
+})
+export class SampleComponent {}
diff --git a/src/app/examples/datatable/html-table-responsive.html b/src/app/examples/datatable/html-table-responsive.html
new file mode 100644
index 0000000000..58427b2a38
--- /dev/null
+++ b/src/app/examples/datatable/html-table-responsive.html
@@ -0,0 +1,29 @@
+<div class="table-responsive" tabindex="0" aria-label="Scrollable device status table">
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">Device</th>
+        <th scope="col">Status</th>
+        <th scope="col">Last updated</th>
+        <th scope="col">Location</th>
+        <th scope="col">Operator</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">Cooling unit</th>
+        <td>Operational</td>
+        <td>10:30</td>
+        <td>Building A</td>
+        <td>Alex Smith</td>
+      </tr>
+      <tr>
+        <th scope="row">Ventilation unit</th>
+        <td>Operational</td>
+        <td>10:28</td>
+        <td>Building B</td>
+        <td>Jordan Lee</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/app/examples/datatable/html-table-responsive.ts b/src/app/examples/datatable/html-table-responsive.ts
new file mode 100644
index 0000000000..723864dae5
--- /dev/null
+++ b/src/app/examples/datatable/html-table-responsive.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sample',
+  templateUrl: './html-table-responsive.html',
+  host: { class: 'p-5' }
+})
+export class SampleComponent {}
diff --git a/src/app/examples/datatable/html-table-variants.html b/src/app/examples/datatable/html-table-variants.html
new file mode 100644
index 0000000000..bc9ae3e71b
--- /dev/null
+++ b/src/app/examples/datatable/html-table-variants.html
@@ -0,0 +1,26 @@
+<table class="table table-sm table-striped table-hover">
+  <thead>
+    <tr>
+      <th scope="col">Device</th>
+      <th scope="col">Status</th>
+      <th scope="col">Last updated</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Cooling unit</th>
+      <td>Operational</td>
+      <td>10:30</td>
+    </tr>
+    <tr class="table-active">
+      <th scope="row">Ventilation unit</th>
+      <td>Selected</td>
+      <td>10:28</td>
+    </tr>
+    <tr class="table-warning">
+      <th scope="row">Heating unit</th>
+      <td>Maintenance required</td>
+      <td>10:20</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/src/app/examples/datatable/html-table-variants.ts b/src/app/examples/datatable/html-table-variants.ts
new file mode 100644
index 0000000000..3805412c9a
--- /dev/null
+++ b/src/app/examples/datatable/html-table-variants.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sample',
+  templateUrl: './html-table-variants.html',
+  host: { class: 'p-5' }
+})
+export class SampleComponent {}
diff --git a/src/app/examples/datatable/bootstrap.html b/src/app/examples/datatable/html-table.html
similarity index 100%
rename from src/app/examples/datatable/bootstrap.html
rename to src/app/examples/datatable/html-table.html
diff --git a/src/app/examples/datatable/bootstrap.ts b/src/app/examples/datatable/html-table.ts
similarity index 93%
rename from src/app/examples/datatable/bootstrap.ts
rename to src/app/examples/datatable/html-table.ts
index c9b1e7d369..106b953333 100644
--- a/src/app/examples/datatable/bootstrap.ts
+++ b/src/app/examples/datatable/html-table.ts
@@ -10,7 +10,7 @@ import { SiIconComponent } from '@siemens/element-ng/icon';
 @Component({
   selector: 'app-sample',
   imports: [FormsModule, SiFormItemComponent, SiIconComponent],
-  templateUrl: './bootstrap.html',
+  templateUrl: './html-table.html',
   host: { class: 'p-5' }
 })
 export class SampleComponent {