Styled table and fix markup

about.md

@@ -66,157 +66,155 @@ This may be due to the sensitivity of the model in learning specific frequencies
 
 ## Samples
 * Female samples 
-
-<table style="font-size:16px">
-  <col width="205">
-  <col width="205">
-  <td>Valencian</td>
-  <td>Occidental</td>
-  <td>Balear</td>
-<tbody
-<table>
-  <tbody>
-    <tr>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk1/0.wav" type="audio/wav">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk1/0.wav" type="audio/wav"">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk1/0.wav" type="audio/wav">
-        </audio>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk1/1.wav" type="audio/wav">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk1/1.wav" type="audio/wav">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk1/1.wav" type="audio/wav">
-        </audio>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk1/2.wav" type="audio/wav">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk1/2.wav" type="audio/wav">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk1/2.wav" type="audio/wav">
-        </audio>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div class="table-wrapper">
+  <table class="tg">
+    <thead>
+      <tr>
+        <th class="tg-0pky">Valencian</td>
+        <th class="tg-0pky">Occidental</td>
+        <th class="tg-0pky">Balear</td>
+      <tr>
+    <thead>
+    <tbody>
+      <tr>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk1/0.wav" type="audio/wav">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk1/0.wav" type="audio/wav"">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk1/0.wav" type="audio/wav">
+          </audio>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk1/1.wav" type="audio/wav">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk1/1.wav" type="audio/wav">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk1/1.wav" type="audio/wav">
+          </audio>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk1/2.wav" type="audio/wav">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk1/2.wav" type="audio/wav">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk1/2.wav" type="audio/wav">
+          </audio>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
 * Male samples:
 
-<table style="font-size:16px">
-  <col width="205">
-  <col width="205">
-<thead>
-<tr>
-  <td>Valencian</td>
-  <td>Occidental</td>
-  <td>Balear</td>
-</tr>
-</thead>
-<tbody
-<table>
-  <tbody>
-    <tr>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk0/0.wav" type="audio/wav">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk0/0.wav" type="audio/wav"">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk0/0.wav" type="audio/wav">
-        </audio>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk0/1.wav" type="audio/wav">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk0/1.wav" type="audio/wav">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk0/1.wav" type="audio/wav">
-        </audio>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk0/2.wav" type="audio/wav">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk0/2.wav" type="audio/wav">
-        </audio>
-      </td>
-      <td>
-        <audio controls="" preload="none" style="width: 200px">
-          audio not supported
-          <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk0/2.wav" type="audio/wav">
-        </audio>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
+<div class="table-wrapper">
+  <table class="tg">
+    <thead>
+      <tr>
+        <th class="tg-0pky">Valencian</td>
+        <th class="tg-0pky">Occidental</td>
+        <th class="tg-0pky">Balear</td>
+      <tr>
+    <thead>
+    <tbody>
+      <tr>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk0/0.wav" type="audio/wav">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk0/0.wav" type="audio/wav"">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk0/0.wav" type="audio/wav">
+          </audio>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk0/1.wav" type="audio/wav">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk0/1.wav" type="audio/wav">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk0/1.wav" type="audio/wav">
+          </audio>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/valencia/spk0/2.wav" type="audio/wav">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/occidental/spk0/2.wav" type="audio/wav">
+          </audio>
+        </td>
+        <td>
+          <audio controls="" preload="none" style="width: 200px">
+            audio not supported
+            <source src="https://github.com/mllopartbsc/assets/raw/c6a393237e712851dd7cc7d10c70dde29d3412ac/matcha_tts_catalan/balear/spk0/2.wav" type="audio/wav">
+          </audio>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
 ## Citation
 

styles.css

@@ -0,0 +1,59 @@
+.table-wrapper {
+    overflow-x: auto; 
+    position: relative; 
+  }
+  
+  .tg {
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin: 0 auto;
+    width: 80%;
+  }
+  
+  .tg .tg-0pky {
+    border-color: inherit;
+    text-align: center;
+    vertical-align: top;
+    padding: 0.5rem;
+  }
+  
+  
+  .tg td {
+    background-color:#ffffff; ;
+    border-color:  #b5b7ba;
+    text-align: center;
+    padding: 0.6rem 2rem;
+  }
+  
+  .tg th {
+    background-color: #3085cf;
+    color: #fff;
+    font-weight: bold;
+    overflow: hidden;
+    padding: 0px 20px;
+    word-break: normal;
+    font-weight: bold;
+    vertical-align: middle;
+    text-align: center;
+    white-space: nowrap;
+    margin: auto;
+  }
+  
+  .tg th a {
+    background-color: #3085cf;;
+    color: #fff;
+    text-decoration: none;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    overflow: hidden;
+    padding: 0px 20px;
+    word-break: normal;
+    font-weight: bold;
+    vertical-align: middle;
+    text-align: center;
+    white-space: nowrap;
+    margin: auto;
+  }
+  
+