Lista de canciones en tabla

LyricsPy/static/style.css

@@ -117,3 +117,35 @@ pre {
 .tabcontent.active {
     display: block;
 }
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+}
+
+table, th, td {
+    border: 1px solid #ddd;
+}
+
+th, td {
+    padding: 10px;
+    text-align: left;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+a {
+    color: #007BFF;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}

LyricsPy/templates/index.html

@@ -8,13 +8,28 @@
 
 <div id="Songs" class="tabcontent">
     <h2>Song List</h2>
-    <ul>
-        {% for song in songs %}
-        <li>
-            <a href="{{ url_for('song', song_id=song.id) }}">{{ song.title }} by {{ song.author }}</a>
-        </li>
-        {% endfor %}
-    </ul>
+    {% if songs %}
+    <table>
+        <thead>
+            <tr>
+                <th>Title</th>
+                <th>Author</th>
+                <th>Album</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for song in songs %}
+            <tr>
+                <td><a href="{{ url_for('song', song_id=song.id) }}">{{ song.title }}</a></td>
+                <td>{{ song.author }}</td>
+                <td><a href="{{ url_for('album', album_id=song.album.id) }}">{{ song.album.name }}</a></td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    {% else %}
+        <p>No songs found.</p>
+    {% endif %}
 </div>
 
 <div id="Albums" class="tabcontent">

LyricsPy/templates/search.html

@@ -4,13 +4,24 @@
 <h2>Search Results for "{{ query }}"</h2>
 
 {% if songs %}
-    <ul>
-        {% for song in songs %}
-        <li>
-            <a href="{{ url_for('song', song_id=song.id) }}">{{ song.title }} by {{ song.author }}</a>
-        </li>
-        {% endfor %}
-    </ul>
+    <table>
+        <thead>
+            <tr>
+                <th>Title</th>
+                <th>Author</th>
+                <th>Album</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for song in songs %}
+            <tr>
+                <td><a href="{{ url_for('song', song_id=song.id) }}">{{ song.title }}</a></td>
+                <td>{{ song.author }}</td>
+                <td><a href="{{ url_for('album', album_id=song.album.id) }}">{{ song.album.name }}</a></td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
 {% else %}
     <p>No songs found matching your query.</p>
 {% endif %}