Create _tag_table.html.jinja

src/jinja/tags/_tag_table.html.jinja

@@ -0,0 +1,60 @@
+{# 
+    Copyright 2024 Scape Agency BV
+#}
+
+{# 
+    Table (<table>)
+    ===========================================================================
+    Defines a table.
+
+    Variables:
+    - `table_id`: The id attribute for the <table> element. Defaults to "default-table-id".
+    - `table_class`: The class attribute for the <table> element. Defaults to "default-table-class".
+    - `table_headers`: A list of headers for the table, each represented as a string. Defaults to ["Header 1", "Header 2", "Header 3"].
+    - `table_rows`: A list of rows for the table, each row represented as a list of cells. Defaults to [["Row 1 Cell 1", "Row 1 Cell 2", "Row 1 Cell 3"], ["Row 2 Cell 1", "Row 2 Cell 2", "Row 2 Cell 3"]].
+
+    Notes:
+    - The `| e` filter is used to escape any special characters in the variables to prevent XSS attacks.
+    - The <table> element is used to create tables in an HTML document.
+
+    Links:
+    - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+    - https://www.w3schools.com/tags/tag_table.asp
+
+#}
+
+<table id="{{ table_id | default('default-table-id') | e }}" class="{{ table_class | default('default-table-class') | e }}">
+    <thead>
+        <tr>
+            {% for header in table_headers | default(['Header 1', 'Header 2', 'Header 3']) %}
+                <th>{{ header | e }}</th>
+            {% endfor %}
+        </tr>
+    </thead>
+    <tbody>
+        {% for row in table_rows | default([['Row 1 Cell 1', 'Row 1 Cell 2', 'Row 1 Cell 3'], ['Row 2 Cell 1', 'Row 2 Cell 2', 'Row 2 Cell 3']]) %}
+            <tr>
+                {% for cell in row %}
+                    <td>{{ cell | e }}</td>
+                {% endfor %}
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
+
+
+<!-- Tables -->
+<table>
+    <tr>
+        {% for header in table_headers %}
+        <th>{{ header }}</th>
+        {% endfor %}
+    </tr>
+    {% for row in table_rows %}
+        <tr>
+        {% for cell in row %}
+            <td>{{ cell }}</td>
+        {% endfor %}
+        </tr>
+    {% endfor %}
+</table>