{"id":200788,"date":"2026-01-28T12:33:11","date_gmt":"2026-01-28T11:33:11","guid":{"rendered":"https:\/\/liora.io\/de\/?p=200788"},"modified":"2026-02-06T04:42:42","modified_gmt":"2026-02-06T03:42:42","slug":"html-tabellen-was-ist-das","status":"publish","type":"post","link":"https:\/\/liora.io\/de\/html-tabellen-was-ist-das","title":{"rendered":"Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung"},"content":{"rendered":"<p><strong><b>HTML-Tabellen dienen dazu, Daten im Internet zu strukturieren und darzustellen. Ihre CSS-\u00c4quivalente (wie Grids oder Flexbox) werden oft bevorzugt, weil sie moderner sind, aber HTML-Tabellen bleiben ideal, um Informationen in Tabellenform zu organisieren.<\/b><\/strong><\/p><p>Sie erm\u00f6glichen es, Daten strukturiert darzustellen, indem sie in Zeilen und Spalten organisiert werden. Dies erleichtert die Darstellung komplexer Daten und erm\u00f6glicht es dem Benutzer, die bereitgestellten Informationen besser zu verstehen. Sie werden oft f\u00fcr Vergleichstabellen, Finanzberichte oder einfach zur Darstellung gut geordneter Informationen verwendet.<\/p>\t\t\n\t\t\t\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex is-content-justification-center\"><div class=\"wp-block-button \"><a class=\"wp-block-button__link wp-element-button \" href=\"https:\/\/liora.io\/de\/html5-was-ist-das-vollstaendiger-leitfaden\">Schon mal was von HTML5 geh\u00f6rt?<\/a><\/div><\/div>\n\n\t\t\t\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]&gt;a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<h2 class=\"wp-block-heading\" id=\"h-struktur-einer-html-tabelle\">Struktur einer HTML-Tabelle<\/h2>\t\t\n\t\t<p>HTML-Tabellen werden mithilfe verschachtelter Tags erstellt, die die verschiedenen Ebenen der Struktur definieren. Hier sind die wichtigsten Elemente, die du verwenden kannst, um eine Tabelle zu erstellen.<\/p>\t\t\n\t\t\t<h4><font size=\"4\">1. : Der Hauptcontainer<p>Dieses Tag ist der Hauptcontainer jeder HTML-Tabelle. Es enth\u00e4lt alle Elemente der Tabelle, einschlie\u00dflich Zeilen, Spalten und Zellen. Standardm\u00e4\u00dfig hat eine Tabelle keine sichtbare Umrandung. Um ihr eine hinzuzuf\u00fcgen, kann das Attribut <i>border<\/i> verwendet werden.<\/p><h4><font size=\"4\">2. <\/font><\/h4><font size=\"4\">, <\/font><font size=\"4\"> et <\/font><font size=\"4\">: Organisation der Tabelle<\/font><ul><li>&lt;thead&gt; : &nbsp;Enth\u00e4lt die Spalten\u00fcberschriften. Die Verwendung dieses Tags erm\u00f6glicht es, die Elemente zu gruppieren, die als Kopfzeile der Tabelle dienen. Die Tags in &lt;thead&gt; sind oft &lt;th&gt; (Tabellenkopfzeilen).<\/li><li>&lt;tbody&gt; : &nbsp;Enth\u00e4lt den Hauptk\u00f6rper der Tabelle, hier werden die Daten normalerweise platziert. Die Datenzeilen werden mit dem &lt;tr&gt;-Tag erstellt.<\/li><li>&lt;tfoot&gt; : Wird verwendet, um die Informationen zu gruppieren, die am unteren Ende der Tabelle stehen, wie eine Zusammenfassung oder Gesamtergebnisse.<\/li><\/ul><p>Hier ist ein Beispiel f\u00fcr eine Tabelle:<\/p><pre style=\"padding-left: 40px\">&lt;table border=\"1\"&gt;<br> &nbsp;&lt;thead&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Variable&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Typ&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Beschreibung&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/thead&gt;<br> &nbsp;&lt;tbody&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alter&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Ganzzahl&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Repr\u00e4sentiert das Alter einer Person in Jahren&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Einkommen&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Flie\u00dfkomma&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Repr\u00e4sentiert das Jahreseinkommen in Euro&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/tbody&gt;<br> &nbsp;&lt;tfoot&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td colspan=\"2\"&gt;Gesamtzahl der Variablen&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;2&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/tfoot&gt;<br>&lt;\/table&gt;<\/pre><p>Hier erstellen &lt;tr&gt;, &lt;th&gt; und &lt;td&gt; jeweils Zeilen, Kopfzellen (oft standardm\u00e4\u00dfig fett formatiert) und Datenzellen.<\/p><p>Hier ist diese einfache Tabelle konkret dargestellt:<\/p><table>\t\t\n\t\t\t\t\n\t\t\t<thead><\/thead><tbody><\/tbody><tfoot>\t\t\n\t\t\t\t\n\t\t\t<\/tfoot><\/table><table border=\"1\">\n  <thead>\n    <tr>\n      <th>Variable<\/th>\n      <th>Typ<\/th>\n      <th>Beschreibung<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>Alter<\/td>\n      <td>Ganzzahl<\/td>\n      <td>Repr\u00e4sentiert das Alter einer Person in Jahren<\/td>\n    <\/tr>\n    <tr>\n      <td>Einkommen<\/td>\n      <td>Flie\u00dfkomma<\/td>\n      <td>Repr\u00e4sentiert das Jahreseinkommen in Euro<\/td>\n    <\/tr>\n  <\/tbody>\n  <tfoot>\n    <tr>\n      <td colspan=\"2\">Gesamtzahl der Variablen<\/td>\n      <td>2<\/td>\n    <\/tr>\n  <\/tfoot>\n<\/table>\n\t\t\t<a href=\"https:\/\/liora.io\/de\/dtype-python-erstelle-strukturierte-tabellen\">\n\t\t\t\t\t\tErstelle strukturierte Tabellen\n\t\t\t\t\t<\/a>\n\t\t\t<h2 class=\"wp-block-heading\" id=\"h-komplexe-tabellen\">Komplexe Tabellen<\/h2>\t\t\n\t\t<p>HTML-Tabellen k\u00f6nnen recht komplex werden, wenn sie gro\u00dfe Datenmengen oder detailliertere Beziehungen zwischen den verschiedenen Spalten und Zeilen darstellen m\u00fcssen. Hier ist ein Beispiel f\u00fcr eine komplexe Tabelle, die fusionierte Spalten und Zeilen verwendet:<\/p><pre style=\"padding-left: 40px\">&lt;table id=\"maTable\" border=\"1\"&gt;<br> &nbsp;&lt;thead&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th rowspan=\"2\"&gt;Name&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th colspan=\"2\"&gt;Berufsinformationen&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th rowspan=\"2\"&gt;Gehalt (\u20ac)&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Beruf&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Stufe&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/thead&gt;<br> &nbsp;&lt;tbody&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Bob Sponge&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Analyst&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Junior&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;45 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alice Wonderland&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Scientist&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Senior&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;60 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Bart Simpson&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Engineer&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Mittelstufe&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;55 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Rick Sanchez&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Architecte Big Data&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Experte&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;75 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Morty Smith&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Machine Learning Engineer&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Junior&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;70 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/tbody&gt;<br>&lt;\/table&gt;<\/pre><ul><li style=\"font-weight: 400\"><b>Spaltenzusammenf\u00fchrung<\/b>colspan: Im &lt;thead&gt;-Kopfbereich deckt die Zelle \u201eBerufsinformationen\u201c zwei Spalten (\u201eBeruf\u201c und \u201eStufe\u201c) ab. Dies wird durch das Attribut colspan=&#8220;2&#8243; erreicht.<\/li><li style=\"font-weight: 400\"><b>Zeilenzusammenf\u00fchrung<\/b> rowspan: Die Zelle \u201eName\u201c ist \u00fcber zwei Kopfzeilen zusammengef\u00fchrt, dank rowspan=&#8220;2&#8243;, um anzuzeigen, dass der Name jeder Person unabh\u00e4ngig von den Unterkategorien (Beruf und Stufe) ist.<\/li><li style=\"font-weight: 400\"><b>Komplexere Struktur<\/b>: Diese Art von Tabelle ist besonders n\u00fctzlich, um Daten mit Unterkategorien darzustellen, wie z.B. Kompetenzstufen oder zus\u00e4tzliche Details zu jedem Eintrag.<\/li><li style=\"font-weight: 400\">Durch die Verwendung fortgeschrittener Techniken wie colspan und rowspan kannst Du Tabellen erstellen, die nicht nur Deine Daten klar strukturieren, sondern auch ein komplexeres Informationsniveau bieten, w\u00e4hrend sie f\u00fcr Benutzer leicht lesbar bleiben.<\/li><\/ul><p>Das Ergebnis ist wie folgt:<\/p>\t\t\n\t\t\t<table id=\"meineTabelle\" border=\"1\">\n  <thead>\n    <tr>\n      <th rowspan=\"2\">Name<\/th>\n      <th colspan=\"2\">Berufsinformationen<\/th>\n      <th rowspan=\"2\">Gehalt (\u20ac)<\/th>\n    <\/tr>\n    <tr>\n      <th>Beruf<\/th>\n      <th>Stufe<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>Bob Sponge<\/td>\n      <td>Data Analyst<\/td>\n      <td>Junior<\/td>\n      <td>45 000<\/td>\n    <\/tr>\n    <tr>\n      <td>Alice Wonderland<\/td>\n      <td>Data Scientist<\/td>\n      <td>Senior<\/td>\n      <td>60 000<\/td>\n    <\/tr>\n    <tr>\n      <td>Bart Simpson<\/td>\n      <td>Data Engineer<\/td>\n      <td>Mittelstufe<\/td>\n      <td>55 000<\/td>\n    <\/tr>\n    <tr>\n      <td>Rick Sanchez<\/td>\n      <td>Big Data Architekt<\/td>\n      <td>Experte<\/td>\n      <td>75 000<\/td>\n    <\/tr>\n    <tr>\n      <td>Morty Smith<\/td>\n      <td>Machine Learning Engineer<\/td>\n      <td>Junior<\/td>\n      <td>70 000<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table>\n\t\t\t<a href=\"https:\/\/liora.io\/de\/seaborn-alles-ueber-das-python-tool-zur-datenvisualisierung\">\n\t\t\t\t\t\tErfahre mehr \u00fcber Datenvisualisierung\n\t\t\t\t\t<\/a>\n\t\t\t<h2 class=\"wp-block-heading\" id=\"h-html-tabellen-stilisieren\">HTML-Tabellen stilisieren<\/h2>\t\t\n\t\t<p>Obwohl einige Eigenschaften es erm\u00f6glichen k\u00f6nnen, eine HTML-Tabelle zu personalisieren, ist die bevorzugte Methode oft CSS.<\/p><p>Das folgende Beispiel zeigt eine relativ einfache Anpassung einer HTML-Tabelle:<\/p><pre style=\"padding-left: 40px\">&lt;style&gt;<br> &nbsp;table {<br> &nbsp;&nbsp;&nbsp;width: 100%;<br> &nbsp;&nbsp;&nbsp;border-collapse: collapse;<br> &nbsp;}<br> &nbsp;th, td {<br> &nbsp;&nbsp;&nbsp;border: 1px solid <b>schwarz<\/b>;<br> &nbsp;&nbsp;&nbsp;padding: 10px;<br> &nbsp;&nbsp;&nbsp;text-align: left;<br> &nbsp;}<br> &nbsp;th {<br> &nbsp;&nbsp;&nbsp;background-color: #f2f2f2;<br> &nbsp;}<br>&lt;\/style&gt;<br>&lt;table&gt;<br> &nbsp;&lt;thead&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Name&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Beruf&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Gehalt (\u20ac)&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/thead&gt;<br> &nbsp;&lt;tbody&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Bob Sponge&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Analyst&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;45 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alice Wonderland&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Scientist&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;60 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Bart Simpson&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Engineer&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;55 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Rick Sanchez&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Architecte Big Data&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;75 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Morty Smith&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Machine Learning Engineer&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;70 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/tbody&gt;<br>&lt;\/table&gt;<\/pre><p>Das Ergebnis wirkt bereits weniger n\u00fcchtern:<\/p>\t\t\n\t\t\t\n  table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n  th, td {\n    border: 1px solid schwarz;\n    padding: 10px;\n    text-align: left;\n  }\n  th {\n    background-color: #f2f2f2;\n  }\n\n<table>\n  <thead>\n    <tr>\n      <th>Name<\/th>\n      <th>Beruf<\/th>\n      <th>Gehalt (\u20ac)<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>Bob Sponge<\/td>\n      <td>Data Analyst<\/td>\n      <td>45 000<\/td>\n    <\/tr>\n    <tr>\n      <td>Alice Wonderland<\/td>\n      <td>Data Scientist<\/td>\n      <td>60 000<\/td>\n    <\/tr>\n    <tr>\n      <td>Bart Simpson<\/td>\n      <td>Data Engineer<\/td>\n      <td>55 000<\/td>\n    <\/tr>\n    <tr>\n      <td>Rick Sanchez<\/td>\n      <td>Big Data Architekt<\/td>\n      <td>75 000<\/td>\n    <\/tr>\n    <tr>\n      <td>Morty Smith<\/td>\n      <td>Machine Learning Engineer<\/td>\n      <td>70 000<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table>\n\t\t<p>Durch die feine Nutzung von CSS in Kombination mit den Tabellen wird es m\u00f6glich, visuell sehr ansprechende Ergebnisse zu erzielen, bestimmte Elemente hervorzuheben und vieles mehr.<\/p>\t\t\n\t\t\t<a href=\"https:\/\/liora.io\/de\/weiterbildung-data-analyst\">\n\t\t\t\t\t\tNutze HTML als Data Analyst\n\t\t\t\t\t<\/a>\n\t\t\t<h2 class=\"wp-block-heading\" id=\"h-zuganglichkeit-und-bewahrte-praktiken\">Zug\u00e4nglichkeit und bew\u00e4hrte Praktiken<\/h2>\t\t\n\t\t<p>Tabellen k\u00f6nnen Zug\u00e4nglichkeitsprobleme verursachen, wenn sie nicht gut strukturiert sind. Dies kann je nach Browser umso problematischer sein, vor allem jedoch f\u00fcr Benutzer von Bildschirmleseger\u00e4ten. Dabei handelt es sich um Software, die es sehbehinderten Personen erm\u00f6glicht, im Internet zu navigieren. Diese Software konvertiert das, was sich auf dem Bildschirm befindet, in Audio- oder Braille-Ausgaben.<\/p><p>Hier sind einige bew\u00e4hrte Praktiken, um deine Tabellen zug\u00e4nglich zu machen:<\/p><ul><li style=\"font-weight: 400\"><b>Verwende klare \u00dcberschriften<\/b>: Die &lt;th&gt;-Tags helfen Bildschirmleseger\u00e4ten, die Spalten\u00fcberschriften zu verstehen. Jede \u00dcberschrift sollte den Inhalt der jeweiligen Spalte oder Zeile genau beschreiben, damit Benutzer leicht in der Tabelle navigieren k\u00f6nnen.<\/li><li><b>F\u00fcge Scope-Attribute hinzu<\/b>: Verwende scope=&#8220;col&#8220; oder scope=&#8220;row&#8220;, um anzugeben, zu welcher Spalte oder Zeile eine \u00dcberschrift geh\u00f6rt. Dies hilft Bildschirmleseger\u00e4ten, jede Datenzelle mit ihrer entsprechenden \u00dcberschrift zu verkn\u00fcpfen. Zum Beispiel:<\/li><\/ul><pre style=\"padding-left: 40px\">&lt;table border=\"1\"&gt;<br> &nbsp;&lt;thead&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Name&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Beruf&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Gehalt (\u20ac)&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/thead&gt;<br> &nbsp;&lt;tbody&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alice Wonderland&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Scientist&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;60 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/tbody&gt;<br>&lt;\/table&gt;<\/pre><p><b>F\u00fcge eine <\/b>&lt;caption&gt; hinzu: Dieses Tag kann verwendet werden, um der Tabelle einen beschreibenden Titel zu geben. Dadurch k\u00f6nnen Benutzer, einschlie\u00dflich derer, die Bildschirmleseger\u00e4te verwenden, schnell den Zweck der Tabelle verstehen. Zum Beispiel:<\/p><pre style=\"padding-left: 40px\">&lt;table border=\"1\"&gt;<br> &nbsp;&lt;caption&gt;Lohn-Tabelle der Mitarbeiter des Data-Teams&lt;\/caption&gt;<br> &nbsp;&lt;thead&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Name&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Beruf&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope=\"col\"&gt;Gehalt (\u20ac)&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/thead&gt;<br> &nbsp;&lt;tbody&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alice Wonderland&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Scientist&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;60 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/tbody&gt;<br>&lt;\/table&gt;<\/pre><ul><li style=\"font-weight: 400\"><b>Bevorzuge CSS f\u00fcr die Personalisierung<\/b>: Halte das HTML einfach und verwende CSS f\u00fcr die Personalisierung. Dies verbessert die Wartbarkeit und macht den Code zug\u00e4nglicher. Zum Beispiel kannst Du mit CSS Deine Tabellen stilisieren, um sie attraktiver zu gestalten, ohne das HTML zu \u00fcberlasten.<\/li><li><b>Komplexe Tabellen und Zuordnung von \u00dcberschriften zu Zellen:<\/b> Bei der Arbeit mit komplexen Tabellen, in denen Daten auf mehreren Ebenen organisiert sind, ist es hilfreich, jede Datenzelle mit ihrer entsprechenden \u00dcberschrift mithilfe der Attribute <i>headers <\/i>und <i>id<\/i> zu verkn\u00fcpfen. Dadurch wird eine bessere Navigation f\u00fcr Nutzer von Screenreadern gew\u00e4hrleistet. Zum Beispiel:<\/li><\/ul><pre style=\"padding-left: 40px\">&lt;table border=\"1\"&gt;<br> &nbsp;&lt;thead&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th id=\"name\"&gt;Name&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th id=\"beruf\"&gt;Beruf&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th id=\"gehalt\"&gt;Durchschnittsgehalt (\u20ac)&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/thead&gt;<br> &nbsp;&lt;tbody&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td headers=\"name\"&gt;Alice Wonderland&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td headers=\"beruf\"&gt;Data Scientist&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td headers=\"gehalt\"&gt;45 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/tbody&gt;<br>&lt;\/table&gt;<\/pre>\t\t\n\t\t\t<a href=\"https:\/\/liora.io\/de\/low-code-eine-einfache-programmiersprache-fuer-jedermann\">\n\t\t\t\t\t\tSchon mal was von Low Code geh\u00f6rt?\n\t\t\t\t\t<\/a>\n\t\t\t<h2 class=\"wp-block-heading\" id=\"h-tabellen-und-dynamische-daten\">Tabellen und dynamische Daten<\/h2>\t\t\n\t\t<p>Es kann hilfreich sein, Tabellen eine dynamische Funktionalit\u00e4t hinzuzuf\u00fcgen. Mit JavaScript kannst Du Zeilen dynamisch hinzuf\u00fcgen oder entfernen, wodurch die Benutzeroberfl\u00e4chen interaktiver werden.<\/p><p>Hier ein einfaches Beispiel f\u00fcr ein Skript, das eine Zeile zu einer Tabelle hinzuf\u00fcgt:<\/p><pre style=\"padding-left: 40px\">&lt;button onclick=\"zeileHinzuf\u00fcgen()\"&gt;Zeile hinzuf\u00fcgen&lt;\/button&gt;\n&lt;style&gt;\n &nbsp;table {\n &nbsp;&nbsp;&nbsp;width: 100%;\n &nbsp;&nbsp;&nbsp;border-collapse: collapse;\n &nbsp;}\n &nbsp;th, td {\n &nbsp;&nbsp;&nbsp;border: 1px solid <strong>schwarz<\/strong>;\n &nbsp;&nbsp;&nbsp;padding: 10px;\n &nbsp;&nbsp;&nbsp;text-align: left;\n &nbsp;}\n &nbsp;th {\n &nbsp;&nbsp;&nbsp;background-color: #f2f2f2;\n &nbsp;}\n&lt;\/style&gt;<\/pre><p style=\"padding-left: 40px\">&lt;table id=&#8220;meineTabelle&#8220; border=&#8220;1&#8243;&gt;<br> &nbsp;&lt;thead&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Name&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Beruf&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Gehalt (\u20ac)&lt;\/th&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/thead&gt;<br> &nbsp;&lt;tbody&gt;<br> &nbsp;&nbsp;&nbsp;&lt;tr&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alice Wonderland&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data Scientist&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;60 000&lt;\/td&gt;<br> &nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br> &nbsp;&lt;\/tbody&gt;<br>&lt;\/table&gt;<\/p><p style=\"padding-left: 40px\">&lt;script&gt;<br> &nbsp;<b>function<\/b> zeileHinzuf\u00fcgen() {<br> &nbsp;&nbsp;&nbsp;<b>var<\/b> table <b>=<\/b> document.getElementById(&#8222;maTable&#8220;).getElementsByTagName(&#8218;tbody&#8216;)[0];<br> &nbsp;&nbsp;&nbsp;<b>var<\/b> neueZeile&nbsp;<b>=<\/b> table.insertRow();<br> &nbsp;&nbsp;&nbsp;<b>var<\/b> zelle1 <b>=<\/b> nouvelleLigne.insertCell(0);<br> &nbsp;&nbsp;&nbsp;<b>var<\/b> zelle2 <b>=<\/b> nouvelleLigne.insertCell(1);<br> &nbsp;&nbsp;&nbsp;<b>var<\/b> zelle3 <b>=<\/b> nouvelleLigne.insertCell(2);<br> &nbsp;&nbsp; zelle1.innerHTML <b>=<\/b> &#8222;Vorname Nachname&#8220;;<br> &nbsp;&nbsp; zelle2.innerHTML <b>=<\/b> &#8222;Data Engineer&#8220;;<br> &nbsp;&nbsp; zelle3.innerHTML <b>=<\/b> &#8222;55 000&#8220;;<br> &nbsp;}<br>&lt;\/script&gt;<\/p><p>Die Schaltfl\u00e4che wird also eine neue Zeile hinzuf\u00fcgen, in diesem Beispiel mit Standardwerten.<\/p>\t\t\n\t\t\t<button>Zeile hinzuf\u00fcgen<\/button>\n\n  table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n  th, td {\n    border: 1px solid black;\n    padding: 10px;\n    text-align: left;\n  }\n  th {\n    background-color: #f2f2f2;\n  }\n\n<table id=\"meineTabelle\" border=\"1\">\n <thead>\n   <tr>\n     <th>Name<\/th>\n     <th>Beruf<\/th>\n     <th>Gehalt (\u20ac)<\/th>\n   <\/tr>\n <\/thead>\n <tbody>\n   <tr>\n     <td>Alice Wunderland<\/td>\n     <td>Data Scientist<\/td>\n     <td>60 000<\/td>\n   <\/tr>\n <\/tbody>\n<\/table>\n\t\t\t<h2 class=\"wp-block-heading\" id=\"h-fazit\">Fazit<\/h2>\t\t\n\t\t<p>HTML-Tabellen sind leistungsstark, um Daten in strukturierter Form darzustellen, was die Lesbarkeit und das Verst\u00e4ndnis der Informationen erleichtert. Wenn Du die grundlegenden Elemente wie &lt;table&gt;, &lt;thead&gt;, &lt;tbody&gt;, &lt;tr&gt;, &lt;th&gt; und &lt;td&gt; sowie fortgeschrittenere Konzepte wie `colspan` und `rowspan` kennst, kannst Du anspruchsvolle und zug\u00e4ngliche Tabellen erstellen. In Kombination mit <a href=\"https:\/\/liora.io\/de\/css3-im-detail-alles-wissenswerte\">CSS<\/a> f\u00fcr grafische Anpassungen und <a href=\"https:\/\/liora.io\/de\/javascript-es6-funktionen-vorteile-und-kompatibilitaet\">JavaScript<\/a> f\u00fcr interaktive Funktionen wird Deine Tabelle noch vielseitiger. Durch die Einhaltung bew\u00e4hrter Praktiken, insbesondere im Hinblick auf Barrierefreiheit, stellst Du sicher, dass Deine Tabellen von einer breiten Nutzergruppe verwendet werden k\u00f6nnen und auf vielen Browsern funktionieren.<\/p>\t\t\n\t\t\t<a href=\"https:\/\/liora.io\/de\/unsere-aus-und-weiterbildungen\">\n\t\t\t\t\t\tWerde HTML Experte\n\t\t\t\t\t<\/a><\/font><\/h4>","protected":false},"excerpt":{"rendered":"<p>HTML-Tabellen dienen dazu, Daten im Internet zu strukturieren und darzustellen. Ihre CSS-\u00c4quivalente (wie Grids oder Flexbox) werden oft bevorzugt, weil sie moderner sind, aber HTML-Tabellen bleiben ideal, um Informationen in Tabellenform zu organisieren.<\/p>\n","protected":false},"author":85,"featured_media":200790,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"_acf_changed":false,"editor_notices":[],"footnotes":""},"categories":[2476],"class_list":["post-200788","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud-dev"],"acf":[],"_links":{"self":[{"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/posts\/200788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/comments?post=200788"}],"version-history":[{"count":5,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/posts\/200788\/revisions"}],"predecessor-version":[{"id":216594,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/posts\/200788\/revisions\/216594"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/media\/200790"}],"wp:attachment":[{"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/media?parent=200788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/categories?post=200788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}