MOre web bs

templates/clients/index.html

@@ -1,31 +1,38 @@
 {% extends "base.html" %}
+
 {% block headers %}
+<link rel="stylesheet" href="/static/css/clients/index.css">
+
 {% endblock %}
 
 {% block content %}
-<table>
-    <tr>
-        <td>First Name</td>
-        <td>Last Name</td>
-        <td>Address</td>
-        <td>Number</td>
-        <td>Email</td>
-    </tr>
-    {% for client in clients %}
-    <tr>
-        <td>{{ client.first_name }}</td>
-        <td>{{ client.last_name }}</td>
-        <td>
-            {{ client.country}}
-            {{ client.city}}
-            {{ client.state}}
-            {{ client.address_line}}
-            {{ client.house_number}}
-            {{ client.postal_code}}
-        </td>
-        <td>{{ client.phone_number }}</td>
-        <td>{{ client.email }}</td>
-    </tr>
-    {% endfor %}
+<table class="table">
+    <thead class="table-header">
+        <tr class="table-row">
+            <td class="table-header-item">First Name</td>
+            <td class="table-header-item">Last Name</td>
+            <td class="table-header-item">Address</td>
+            <td class="table-header-item">Number</td>
+            <td class="table-header-item">Email</td>
+        </tr>
+    </thead>
+    <tbody class="table-body">
+        {% for client in clients %}
+        <tr class="table-row">
+            <td class="table-cell">{{ client.first_name }}</td>
+            <td class="table-cell">{{ client.last_name }}</td>
+            <td class="table-cell">
+                {{ client.country}}
+                {{ client.city}}
+                {{ client.state}}
+                {{ client.address_line}}
+                {{ client.house_number}}
+                {{ client.postal_code}}
+            </td>
+            <td class="table-cell">{{ client.phone_number }}</td>
+            <td class="table-cell">{{ client.email }}</td>
+        </tr>
+        {% endfor %}
+    </tbody>
 </table>
 {% endblock %}