mirrors/denis.ergin
1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-07 19:08:49 +00:00
Code Activity

feat(slides): HTML-Tables

Browse source
This commit is contained in:
Denis Ergin 2024-10-04 15:37:46 +02:00
parent 572a39b7a6
commit f3f3efbaab
5 changed files with 169 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/slides/html-tables/advanced.astro Normal file
View file

@ -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>

136
src/components/slides/html-tables/basics.astro Normal file
View file

@ -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>

11
src/components/slides/html-tables/index.astro Normal file
View file

@ -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>

3
src/components/slides/html-tables/title.astro Normal file
View file

@ -0,0 +1,3 @@
<section>
<h1>Tabellen in HTML</h1>
</section>

8
src/pages/slides/tables.astro Normal file
View file

@ -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>