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

feat(slides): adjust + extend slides, make task

Browse source
This commit is contained in:
Denis Ergin 2024-10-05 19:55:13 +02:00
parent f3f3efbaab
commit 6aa0128a13
4 changed files with 178 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,4 +8,125 @@
Neben <code>table,tr</code> und <code>td</code>, gibt es auch Tags um eine Tabelle etwas besser zu strukturieren Neben <code>table,tr</code> und <code>td</code>, gibt es auch Tags um eine Tabelle etwas besser zu strukturieren
</p> </p>
</section> </section>
<section>
<ul>
<li><code>thead</code> für die Kopfzeilen</li>
<li><code>tbody</code> für den eigentlichen Inhalt</li>
<li><code>tfoot</code> für Fußzeilen</li>
</ul>
</section>
<section>
<table>
<thead>
<tr>
<th>Artikel</th>
<th>Preis</th>
<th>Menge</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Summe</td>
<td>7,97€</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Honig</td>
<td>1,99€</td>
<td>2</td>
</tr>
<tr>
<td>Butter</td>
<td>3,99€</td>
<td>1</td>
</tr>
</tbody>
</table>
</section>
<section>
<pre class="html"><code data-trim data-line-number>
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Artikel&lt;/th&gt;
&lt;th&gt;Preis&lt;/th&gt;
&lt;th&gt;Menge&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;td colspan="2"&gt;Summe&lt;/td&gt;
&lt;td&gt;7,97€&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Honig&lt;/td&gt;
&lt;td&gt;1,99€&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Butter&lt;/td&gt;
&lt;td&gt;3,99€&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
</section>
<section>
<h3>Zeilen-Header</h3>
<p>Natürlich ist es auch möglich, eine bestimmte Zelle als "Header" zu deklarieren</p>
<p>In solchen Situationen empfiehlt es sich, auch das attribut <code>scope</code> auf <code>"row"</code> zu setzen.</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;table&gt;
&lt;tr&gt;
&lt;th&gt;Film&lt;/th&gt;
&lt;th&gt;Bewertung&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope="row"&gt;Matrix&lt;/th&gt;
&lt;td&gt;★★★★★&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope="row"&gt;Matrix Revolution&lt;/th&gt;
&lt;td&gt;★★★&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>
</section>
<section>
<table>
<tr>
<th>Film</th>
<th>Bewertung</th>
</tr>
<tr>
<th scope="row">Matrix</th>
<td>★★★★★</td>
</tr>
<tr>
<th scope="row">Matrix Revolution</th>
<td>★★★</td>
</tr>
</table>
</section>
<section>
<p>Das <code>scope</code> Attribut hilft Screenreadern.</p>
</section>
<section>
<p>Zu guter letzt:</p>
<p>Es können Tabellen in Tabellen geschachtelt werden</p>
</section>
</section> </section>

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

@ -94,6 +94,7 @@
<section> <section>
<h3>Man kann auch Zellen zusammenfassen</h3> <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> <p>Mithilfe des <code>colspan</code>-Attributes kann man festlegen, wie viele Spalten die Zelle einnehmen soll</p>
<p>Der gleiche Effekt kann für Zeilen mittels <code>rowspan</code> erreicht werden.</p>
</section> </section>
<section> <section>

0
src/pages/tasks/html-4/index.astro Normal file
View file

56
src/pages/tasks/html-4/solution/index.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eine Liste von Spielen mit Metacritic-Bewertung</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Hersteller</th>
<th>Name</th>
<th>Bewertung</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="4" scope="row">Bandai Namco</th>
<td>Dark Souls</td>
<td>89</td>
</tr>
<tr>
<td>Dark Souls 2</td>
<td>91</td>
</tr>
<tr>
<td>Dark Souls 3</td>
<td>89</td>
</tr>
<tr>
<td>Elden Ring</td>
<td>96</td>
</tr>
<tr>
<th scope="row">Larian Games</th>
<td>Baldur's Gate 3</td>
<td>96</td>
</tr>
<tr>
<th rowspan="3" scope="row">Electronic Arts</th>
<td>Dark Space (Remake)</td>
<td>89</td>
</tr>
<tr>
<td>Dead Space 2</td>
<td>90</td>
</tr>
<tr>
<td>Dead Space 3</td>
<td>78</td>
</tr>
</tbody>
</table>
</body>
</html>