diff --git a/src/components/slides/html-tables/advanced.astro b/src/components/slides/html-tables/advanced.astro
new file mode 100644
index 0000000..7f6a689
--- /dev/null
+++ b/src/components/slides/html-tables/advanced.astro
@@ -0,0 +1,11 @@
+<section>
+  <section>
+    <h2>Die Tabelle etwas besser strukturieren</h2>
+  </section>
+
+  <section>
+    <p>
+      Neben <code>table,tr</code> und <code>td</code>, gibt es auch Tags um eine Tabelle etwas besser zu strukturieren
+    </p>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/html-tables/basics.astro b/src/components/slides/html-tables/basics.astro
new file mode 100644
index 0000000..25e8574
--- /dev/null
+++ b/src/components/slides/html-tables/basics.astro
@@ -0,0 +1,136 @@
+<section>
+  <section>
+    <h2>Einführung</h2>
+  </section>
+
+  <section>
+    <p>Wir verwenden Tabellen um große Datenmengen strukturiert anzuzeigen.</p>
+    <p>Wir verwenden Tabellen NICHT um eine HTML-Seite zu strukturieren (das wurde damals gern gemacht)</p>
+  </section>
+
+  <section>
+    <h3>Eine Tabelle definieren</h3>
+  </section>
+
+  <section>
+    <pre class="html"><code data-trim data-line-numbers="1,5|2,4|3">
+      &lt;table&gt; &lt;!-- Tabellendefinition --&gt;
+        &lt;tr&gt; &lt;!-- Tabellenzeile (Table-Row) --&gt;
+          &lt;td&gt;Mein Inhalt&lt;/td&gt; &lt;!-- Tablenzelle (Table-Data) --&gt;
+        &lt;/tr&gt;
+      &lt;/table&gt;
+    </code></pre>
+  </section>
+
+  <section>
+    <pre class="html"><code data-trim data-line-numbers>
+      &lt;table&gt;
+        &lt;tr&gt;
+          &lt;td&gt;Mein Inhalt 1&lt;/td&gt;
+          &lt;td&gt;Mein Inhalt 2&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;td&gt;Mein Inhalt 3&lt;/td&gt;
+          &lt;td&gt;Mein Inhalt 4&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/table&gt;
+    </code></pre>
+  </section>
+
+  <section>
+    <table>
+      <tr>
+        <td>Mein Inhalt 1</td>
+        <td>Mein Inhalt 2</td>
+      </tr>
+      <tr>
+        <td>Mein Inhalt 3</td>
+        <td>Mein Inhalt 4</td>
+      </tr>
+    </table>
+  </section>
+
+  <section>
+    <p>Recht langweilig oder?</p>
+    <h3>Wie wärs mit Kopfzeilen?</h3>
+  </section>
+
+  <section>
+    <pre class="html"><code data-trim data-line-numbers>
+        &lt;table&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Kopf 1&lt;/th&gt;
+          &lt;th&gt;Kopf 2&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;td&gt;Mein Inhalt 1&lt;/td&gt;
+          &lt;td&gt;Mein Inhalt 2&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;td&gt;Mein Inhalt 3&lt;/td&gt;
+          &lt;td&gt;Mein Inhalt 4&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/table&gt;
+    </code></pre>
+  </section>
+
+  <section>
+    <table>
+      <tr>
+        <th>Kopf 1</th>
+        <th>Kopf 2</th>
+      </td>
+      <tr>
+        <td>Mein Inhalt 1</td>
+        <td>Mein Inhalt 2</td>
+      </tr>
+      <tr>
+        <td>Mein Inhalt 3</td>
+        <td>Mein Inhalt 4</td>
+      </tr>
+    </table>
+  </section>
+
+  <section>
+    <h3>Man kann auch Zellen zusammenfassen</h3>
+    <p>Mithilfe des <code>colspan</code>-Attributes kann man festlegen, wie viele Spalten die Zelle einnehmen soll</p>
+  </section>
+
+  <section>
+    <pre class="html"><code data-trim data-line-numbers>
+        &lt;table&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Kopf 1&lt;/th&gt;
+          &lt;th&gt;Kopf 2&lt;/th&gt;
+          &lt;th&gt;Kopf 3&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;td colspan="2"&gt;Mein Inhalt 1&lt;/td&gt;
+          &lt;td&gt;Ich bin in Spalte 3&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;td&gt;Mein Inhalt 3&lt;/td&gt;
+          &lt;td&gt;Mein Inhalt 4&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/table&gt;
+    </code></pre>
+  </section>
+
+  <section>
+    <table>
+      <tr>
+        <th>Kopf 1</th>
+        <th>Kopf 2</th>
+        <th>Kopf 3</th>
+      </td>
+      <tr>
+        <td colspan="2">Mein Inhalt 1 (länger zur Demonstration)</td>
+        <td>Ich bin in Spalte 3</td>
+      </tr>
+      <tr>
+        <td>Mein Inhalt 3</td>
+        <td>Mein Inhalt 4</td>
+      </tr>
+    </table>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/html-tables/index.astro b/src/components/slides/html-tables/index.astro
new file mode 100644
index 0000000..cba8722
--- /dev/null
+++ b/src/components/slides/html-tables/index.astro
@@ -0,0 +1,11 @@
+---
+import TitleSlide from './title.astro'
+import Basics from './basics.astro'
+import Advanced from './advanced.astro'
+---
+
+<div class="slides">
+  <TitleSlide />
+  <Basics />
+  <Advanced />
+</div>
\ No newline at end of file
diff --git a/src/components/slides/html-tables/title.astro b/src/components/slides/html-tables/title.astro
new file mode 100644
index 0000000..15b59d7
--- /dev/null
+++ b/src/components/slides/html-tables/title.astro
@@ -0,0 +1,3 @@
+<section>
+  <h1>Tabellen in HTML</h1>
+</section>
\ No newline at end of file
diff --git a/src/pages/slides/tables.astro b/src/pages/slides/tables.astro
new file mode 100644
index 0000000..707d23a
--- /dev/null
+++ b/src/pages/slides/tables.astro
@@ -0,0 +1,8 @@
+---
+import Reveal from '../../layouts/Reveal.astro';
+import Table from '../../components/slides/html-tables/index.astro'
+---
+
+<Reveal title='Tabellen in HTML'>
+  <Table />
+</Reveal>
\ No newline at end of file