diff --git a/template/components/content_tabledetail.go b/template/components/content_tabledetail.go
new file mode 100644
index 0000000..61848b8
--- /dev/null
+++ b/template/components/content_tabledetail.go
@@ -0,0 +1,16 @@
+package components
+
+type ContentTabledetail struct {
+	ID         string
+	TableClass string //   table-primary, table-secondary,.. table-striped table-bordered
+	HeadClass  string // table-dark table-light
+	Title      string
+	AllTD      []ContentTabledetailTD
+}
+
+type ContentTabledetailTD struct {
+	ID        string
+	Caption   string
+	ValueType string      // ->  default string, href, badge
+	Value     interface{} // string or component struct according ValueType
+}
diff --git a/template/components/content_tabledetail.html b/template/components/content_tabledetail.html
new file mode 100644
index 0000000..636191c
--- /dev/null
+++ b/template/components/content_tabledetail.html
@@ -0,0 +1,29 @@
+{{define "content_tabledetail"}}
+<table class="table table-hover" {{ if .ID }}id="{{.ID}}"{{end}}>
+  {{$stylecell := "table-success"}}
+  {{if .HeadClass }}{{$stylecell = .HeadClass}}{{end}}
+  {{if .Title }}
+  <thead class="{{.HeadClass}}">
+    <tr>
+      <th colspan="2" class="{{$stylecell}}">{{ .Title }}</th>
+    </tr>
+  </thead>
+  {{end}}
+  <tbody>
+  {{range $item := .AllTD}}
+  <tr scope="row" {{ if $item.ID }}id="{{$item.ID}}"{{end}}>
+    <td class="{{$stylecell}}">{{ $item.Caption }}</td>
+    <td>
+      {{ if eq $item.ValueType "href"}}
+        {{template "content_href" $item.Value}}
+      {{ else if eq $item.ValueType "badge"}}
+        {{template "content_badge" $item.Value}}
+      {{ else }}
+        {{ $item.Value }}
+      {{end}}
+    </td>  
+  </tr>
+  {{end}}
+  </tbody>
+</table>
+{{end}}