docs: improve HTML table description and examples

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>

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'] });

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+/

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"

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"

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+/

playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap.yaml → 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

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,

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>

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 {}

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>

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 {}

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>

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 {}