Make player a table of some sort

frontend/src/pages/player.astro

@@ -6,14 +6,34 @@ const data: APIResponse<Player[]> = await res.json();
 console.log(data);
 ---
 
-<div>
+<div class="overflow-x-auto p-5">
 	{
-		data.success &&
-			data.data.map((player) => (
-				<div>
-					<a href={`/player/${player.name}`}>{player.name}</a>
-				</div>
-			))
+		data.success && (
+			<table class="min-w-full bg-white border border-gray-300">
+				<thead>
+					<tr class="bg-gray-100">
+						<th class="p-4 border border-gray-300 text-left">Name</th>
+						<th class="p-4 border border-gray-300 text-left">Guild</th>
+						<th class="p-4 border border-gray-300 text-left">#Notes</th>
+						<th class="p-4 border border-gray-300 text-left">#Associations</th>
+					</tr>
+				</thead>
+				<tbody>
+					{data.data.map((player) => (
+						<tr key={player.name} class="hover:bg-gray-50">
+							<td class="p-4 border border-gray-300">
+								<a href={`/player/${player.name}`} class="text-blue-600 hover:underline">
+									{player.name}
+								</a>
+							</td>
+							<td class="p-4 border border-gray-300">{player.guild.name}</td>
+							<td class="p-4 border border-gray-300">{player.notes}</td>
+							<td class="p-4 border border-gray-300">{player.associations}</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		)
 	}
 	{!data.success && <div>{data.message}</div>}
 </div>