Creating an espacially ugly table, but a working one

.~lock.world_data_v1.csv#

@@ -0,0 +1 @@
+,hodasemi,michael.home,22.10.2018 10:19,file:///home/hodasemi/.config/libreoffice/4;

css/main.css

@@ -26,6 +26,21 @@
     color: white;
 }
 
-.table {
-    
+table#t01 {
+    width: 100%;
+    background-color: #f1f1c1;
+    border-spacing: 5px;
+    text-align: center;
+}
+
+table#t01 tr:nth-child(even) {
+    background-color: #eee;
+}
+table#t01 tr:nth-child(odd) {
+    background-color: #fff;
+}
+table#t01 th {
+    color: white;
+    background-color: black;
+    padding: 15px;
 }

index.html

@@ -24,7 +24,7 @@
     <!--
         <input type="file" id="csvFileInput" onchange="handleFiles(this.files)" accept=".csv" />
     -->
-    <table id="table_bla"></table>
+    <table id="t01"></table>
 
     <script>
         handleFile()

main.js

@@ -20,18 +20,34 @@ function handleFile() {
 }
 
 function processData(csv) {
-    var table = "<table class='table'>";
+    var table = "<table style='width:100%'>";
+
+    // split rows
     var allTextLines = csv.split(/\r\n|\n/);
 
-    for (var i = 0; i < allTextLines.length; i++) {
-        var data = allTextLines[i].split(';');
+    // create table header
+    table += "<tr>";
+
+    var data = allTextLines[0].split(",");
+
+    for (var j = 0; j < data.length; j++) {
+        table += "<th>";
+        table += data[j];
+        table += "</th>";
+    }
+
+    table += "</tr>";
+
+    // create table content
+    for (var i = 1; i < allTextLines.length; i++) {
+        var data = allTextLines[i].split(',');
 
         table += "<tr>";
 
         for (var j = 0; j < data.length; j++) {
             table += "<td>";
             table += data[j];
-            table += "</th>";
+            table += "</td>";
         }
 
         table += "</tr>";
@@ -39,5 +55,5 @@ function processData(csv) {
 
     table += "</table>";
 
-    document.getElementById('table_bla').innerHTML = table;
+    document.getElementById('t01').innerHTML = table;
 }