Update app.py

app.py

@@ -45,12 +45,46 @@ def getColorMap(kernel, gamma):
 
 #XOR_TABLE markdown text
 XOR_TABLE = """
-| A | B | A XOR B |
-|:-:|:-:|:-------:|
-| 0 | 0 |    0    |
-| 0 | 1 |    1    |
-| 1 | 0 |    1    |
-| 1 | 1 |    0    |
+<style type="text/css">
+.tg  {border-collapse:collapse;border-spacing:0;}
+.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
+  overflow:hidden;padding:10px 5px;word-break:normal;}
+.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
+  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
+.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
+table {margin:auto;}
+</style>
+<table class="tg">
+<thead>
+  <tr>
+    <th class="tg-c3ow">A</th>
+    <th class="tg-c3ow">B</th>
+    <th class="tg-c3ow">A XOR B</th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td class="tg-c3ow">0</td>
+    <td class="tg-c3ow">0</td>
+    <td class="tg-c3ow">0</td>
+  </tr>
+  <tr>
+    <td class="tg-c3ow">0</td>
+    <td class="tg-c3ow">1</td>
+    <td class="tg-c3ow">1</td>
+  </tr>
+  <tr>
+    <td class="tg-c3ow">1</td>
+    <td class="tg-c3ow">0</td>
+    <td class="tg-c3ow">1</td>
+  </tr>
+  <tr>
+    <td class="tg-c3ow">1</td>
+    <td class="tg-c3ow">1</td>
+    <td class="tg-c3ow">0</td>
+  </tr>
+</tbody>
+</table>
 """
 
 
@@ -81,7 +115,7 @@ with gr.Blocks() as demo:
     # xor_image = Image.open("xor.png")
     with gr.Column().style(text-align=center):
         gr.Markdown("## Table explaining the 'XOR' operator")
-        gr.Markdown(XOR_TABLE)
+        gr.HTML(XOR_TABLE)
     # gr.Image(xor_image, label="Table explaining the 'XOR' operator")