More changes to club page. Cards and Headers are now mostly split

ProjectSourceCode/src/resources/css/club-pages/club-information-card.css

@@ -1,4 +1,7 @@
-#club-history-container {
+#club-information-container {
-    width: 20%;
     height: fit-content;
+    width: 20%;
+
+    display: flex;
+    flex-direction: column;
 }

ProjectSourceCode/src/resources/css/club-pages/club-page.css

@@ -10,7 +10,7 @@
 =================================
 */
 
-#club-information-container {
+#club-header-container {
     height: 100px;
     width: fit-content;
     margin: 20px;
@@ -76,7 +76,7 @@
 }
 
 /* Styling for Standings and Top Scorers Cards */
-#club-history-container, #club-stats-and-players-container 
+#club-information-table-container, #club-competitions-table-container, #club-stats-and-players-container 
 {
     /* --- POSITION CONTAINER --- */
     margin: 0 10px;

ProjectSourceCode/src/resources/css/club-pages/club-players-and-stats-card.css

@@ -3,7 +3,32 @@
     width: 80%;
 }
 
+/*
+=================================
+      PLAYER TABLE CONTAINER
+=================================
+*/
+
 /* Table containing player information */
 #club-players-table {
     width: 100%;
+    padding: 15px;
+
+    /* Table Header Styling */
+    th 
+    {
+        border-bottom: 3px solid red; /* Add red bottom border */
+    }
+
+    /* Data in Row Style */
+    td
+    {
+        padding: 5px;
+    }
+
+    /* Every Odd Row in Table Style */
+    tbody tr:nth-child(odd) 
+    {
+        background-color: #d2d2d2; /* Light gray for odd rows */
+    }
 }

ProjectSourceCode/src/resources/css/league-pages/league-table.css

@@ -1,6 +1,6 @@
 /*
 =================================
-    TABLE ADN HEADER CONTAINER
+    TABLE AND HEADER CONTAINER
 =================================
 */
 
@@ -22,12 +22,6 @@
 =================================
 */
 
-/* Container for Table */
-#league-table-stats-container 
-{
-   width: 100%;    
-}
-
 /* Table that holds all the standing information */
 #league-standings-table 
 {

ProjectSourceCode/src/views/pages/clubs-page.hbs

@@ -1,7 +1,7 @@
 <div id="club-page-body" class="page-container">
 
     <!-- Container on Top containing Club Information -->
-    <div id="club-information-container" class="information-container">
+    <div id="club-header-container" class="information-container">
         <img id="club-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
         <h1 id="club-title">{{club.name}}</h2>
         <img id="club-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
@@ -9,18 +9,20 @@
 
     <div id="club-page-contents-container" class="information-container">
 
-        <!-- Container on Left Side containing Club History -->
+        <!-- Container on Left Side containing Club Information -->
+        <div id="club-information-container" class="information-container">
+
+            <!-- Container for Club History Information -->
             <div id="club-history-container" class="information-container">
 
-            <!-- Container for Club Information -->
+                <div id="club-information-table-header">
-            <div id="club-Attributes-container" class="information-container">
-
                     <h2>Information</h2>
+                </div>
 
                 <!-- Club Information -->
+                <div id="club-information-table-container" class="information-container">
                     <table id="club-information-table">
                         <tbody>
-
                             <!-- Club Address Container -->
                             <tr>
                                 <td>
@@ -48,18 +50,20 @@
                                     <span>contract end: {{club.coach.contract.until}}</span><br>
                                 </td>
                             </tr>
-
                         </tbody>
                     </table>
-
+                </div> <!-- End of Club History Table Container -->
             </div> <!-- End of Club History Container -->
 
             <!-- Container to Display Club's Current Competitions -->
             <div id="club-current-competitions-container">
 
+                <div id="club-players-table-header">
                     <h2>Competitions</h2>
+                </div>
 
-                <table id="players-table">
+                <div id="club-competitions-table-container">
+                    <table id="club-competitions-table">
                         <thead>
                             <tr>
                                 <th>Name</th>
@@ -73,10 +77,10 @@
                             {{/each}}
                         </tbody>
                     </table>
-
+                </div> <!-- End of Club Competitions Table Container -->
             </div> <!-- End of Club Competitions Container -->
         
-        </div>
+        </div> <!-- End of Club Information Container (Left 20%) -->
 
         <!-- Container on Right Side containing Club Stats -->
         <div id="club-stats-and-players-container" class="stats-container">