{"id":200788,"date":"2024-11-22T06:30:00","date_gmt":"2024-11-22T05:30:00","guid":{"rendered":"https:\/\/datascientest.com\/de\/?p=200788"},"modified":"2024-11-20T09:05:25","modified_gmt":"2024-11-20T08:05:25","slug":"html-tabellen-was-ist-das","status":"publish","type":"post","link":"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das","title":{"rendered":"Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"200788\" class=\"elementor elementor-200788\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d0cc0f9 e-flex e-con-boxed e-con\" data-id=\"d0cc0f9\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f70278e elementor-widget elementor-widget-text-editor\" data-id=\"f70278e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><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><\/p><p><span style=\"font-weight: 400;\">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.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1270c16 elementor-align-center button-principal elementor-widget elementor-widget-button\" data-id=\"1270c16\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/datascientest.com\/de\/html5-was-ist-das-vollstaendiger-leitfaden\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Schon mal was von HTML5 geh\u00f6rt?<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-67633c2 e-flex e-con-boxed e-con\" data-id=\"67633c2\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bccce7 elementor-widget elementor-widget-heading\" data-id=\"1bccce7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>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}<\/style><h3 class=\"elementor-heading-title elementor-size-default\">Struktur einer HTML-Tabelle<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0d6b04 elementor-widget elementor-widget-text-editor\" data-id=\"d0d6b04\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc3f960 elementor-widget elementor-widget-heading\" data-id=\"fc3f960\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\"><font size=\"4\">1. <<span style=\"color: #008000;\">table<\/span> >: Der Hauptcontainer<\/font><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2bb8d7a elementor-widget elementor-widget-text-editor\" data-id=\"2bb8d7a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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 <\/span><i><span style=\"font-weight: 400;\">border<\/span><\/i><span style=\"font-weight: 400;\"> verwendet werden.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe257b0 elementor-widget elementor-widget-heading\" data-id=\"fe257b0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\"><font size=\"4\">2. <<span style=\"color: #008000;\">thead<\/span> >, <<span style=\"color: #008000;\">tbody<\/span> > et <<span style=\"color: #008000;\">tfoot<\/span> >: Organisation der Tabelle<\/font><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83f5650 elementor-widget elementor-widget-text-editor\" data-id=\"83f5650\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> : \u00a0Enth\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;<span style=\"color: #008000;\">thead<\/span>&gt; sind oft &lt;<span style=\"color: #008000;\">th<\/span>&gt; (Tabellenkopfzeilen).<\/span><\/li><li><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> : \u00a0Enth\u00e4lt den Hauptk\u00f6rper der Tabelle, hier werden die Daten normalerweise platziert. Die Datenzeilen werden mit dem &lt;<span style=\"color: #008000;\">tr<\/span>&gt;-Tag erstellt.<\/span><\/li><li><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> : Wird verwendet, um die Informationen zu gruppieren, die am unteren Ende der Tabelle stehen, wie eine Zusammenfassung oder Gesamtergebnisse.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-526f0d2 elementor-widget elementor-widget-text-editor\" data-id=\"526f0d2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Hier ist ein Beispiel f\u00fcr eine Tabelle:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbb9840 elementor-widget elementor-widget-text-editor\" data-id=\"dbb9840\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Variable&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Typ&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Beschreibung&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alter&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Ganzzahl&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Repr\u00e4sentiert das Alter einer Person in Jahren&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Einkommen&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Flie\u00dfkomma&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Repr\u00e4sentiert das Jahreseinkommen in Euro&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">colspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Gesamtzahl der Variablen&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;2&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tfoot<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42eb137 elementor-widget elementor-widget-text-editor\" data-id=\"42eb137\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Hier erstellen &lt;<span style=\"color: #008000;\">tr<\/span>&gt;, &lt;<span style=\"color: #008000;\">th<\/span>&gt; und &lt;<span style=\"color: #008000;\">td<\/span>&gt; jeweils Zeilen, Kopfzellen (oft standardm\u00e4\u00dfig fett formatiert) und Datenzellen.<\/span><\/p><p><span style=\"font-weight: 400;\">Hier ist diese einfache Tabelle konkret dargestellt:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-799d0f7 elementor-widget elementor-widget-html\" data-id=\"799d0f7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<table border=\"1\">\r\n  <thead>\r\n    <tr>\r\n      <th>Variable<\/th>\r\n      <th>Typ<\/th>\r\n      <th>Beschreibung<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Alter<\/td>\r\n      <td>Ganzzahl<\/td>\r\n      <td>Repr\u00e4sentiert das Alter einer Person in Jahren<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Einkommen<\/td>\r\n      <td>Flie\u00dfkomma<\/td>\r\n      <td>Repr\u00e4sentiert das Jahreseinkommen in Euro<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n  <tfoot>\r\n    <tr>\r\n      <td colspan=\"2\">Gesamtzahl der Variablen<\/td>\r\n      <td>2<\/td>\r\n    <\/tr>\r\n  <\/tfoot>\r\n<\/table>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f779c6d elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"f779c6d\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/de\/dtype-python-erstelle-strukturierte-tabellen\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Erstelle strukturierte Tabellen<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6828dff e-flex e-con-boxed e-con\" data-id=\"6828dff\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-032774a elementor-widget elementor-widget-heading\" data-id=\"032774a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Komplexe Tabellen<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76a7e89 elementor-widget elementor-widget-text-editor\" data-id=\"76a7e89\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9341fe4 elementor-widget elementor-widget-text-editor\" data-id=\"9341fe4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"maTable\"<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span> <span style=\"font-weight: 400; color: #0000ff;\">rowspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">colspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Berufsinformationen&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">rowspan<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"2\"<\/span><span style=\"font-weight: 400;\">&gt;Gehalt (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Beruf&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Stufe&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bob Sponge&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Analyst&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Junior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Senior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bart Simpson&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Mittelstufe&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;55 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Rick Sanchez&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Architecte Big Data&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Experte&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;75 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Morty Smith&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Machine Learning Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Junior&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;70 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f0359b elementor-widget elementor-widget-text-editor\" data-id=\"2f0359b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Spaltenzusammenf\u00fchrung<\/b><span style=\"font-weight: 400;\"><span style=\"color: #0000ff;\">colspan<\/span>: Im &lt;<span style=\"color: #008000;\">thead<\/span>&gt;-Kopfbereich deckt die Zelle \u201eBerufsinformationen\u201c zwei Spalten (\u201eBeruf\u201c und \u201eStufe\u201c) ab. Dies wird durch das Attribut <span style=\"color: #0000ff;\">colspan<\/span>=<span style=\"color: #ff0000;\">&#8222;2&#8220;<\/span> erreicht.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Zeilenzusammenf\u00fchrung<\/b><span style=\"font-weight: 400;\"><span style=\"color: #0000ff;\"> rowspan<\/span>: Die Zelle \u201eName\u201c ist \u00fcber zwei Kopfzeilen zusammengef\u00fchrt, dank <span style=\"color: #0000ff;\">rowspan<\/span>=<span style=\"color: #ff0000;\">&#8222;2&#8220;<\/span>, um anzuzeigen, dass der Name jeder Person unabh\u00e4ngig von den Unterkategorien (Beruf und Stufe) ist.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Komplexere Struktur<\/b><span style=\"font-weight: 400;\">: Diese Art von Tabelle ist besonders n\u00fctzlich, um Daten mit Unterkategorien darzustellen, wie z.B. Kompetenzstufen oder zus\u00e4tzliche Details zu jedem Eintrag.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Durch die Verwendung fortgeschrittener Techniken wie <span style=\"color: #0000ff;\">colspan<\/span> und <span style=\"color: #0000ff;\">rowspan<\/span> 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.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7965c3b elementor-widget elementor-widget-text-editor\" data-id=\"7965c3b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Das Ergebnis ist wie folgt:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-026547f elementor-widget elementor-widget-html\" data-id=\"026547f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<table id=\"meineTabelle\" border=\"1\">\r\n  <thead>\r\n    <tr>\r\n      <th rowspan=\"2\">Name<\/th>\r\n      <th colspan=\"2\">Berufsinformationen<\/th>\r\n      <th rowspan=\"2\">Gehalt (\u20ac)<\/th>\r\n    <\/tr>\r\n    <tr>\r\n      <th>Beruf<\/th>\r\n      <th>Stufe<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Bob Sponge<\/td>\r\n      <td>Data Analyst<\/td>\r\n      <td>Junior<\/td>\r\n      <td>45 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Alice Wonderland<\/td>\r\n      <td>Data Scientist<\/td>\r\n      <td>Senior<\/td>\r\n      <td>60 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Bart Simpson<\/td>\r\n      <td>Data Engineer<\/td>\r\n      <td>Mittelstufe<\/td>\r\n      <td>55 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Rick Sanchez<\/td>\r\n      <td>Big Data Architekt<\/td>\r\n      <td>Experte<\/td>\r\n      <td>75 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Morty Smith<\/td>\r\n      <td>Machine Learning Engineer<\/td>\r\n      <td>Junior<\/td>\r\n      <td>70 000<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7e2c95 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"f7e2c95\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/de\/seaborn-alles-ueber-das-python-tool-zur-datenvisualisierung\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Erfahre mehr \u00fcber Datenvisualisierung<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4410f4b e-flex e-con-boxed e-con\" data-id=\"4410f4b\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-533ce2d elementor-widget elementor-widget-heading\" data-id=\"533ce2d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">HTML-Tabellen stilisieren<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81ad7a6 elementor-widget elementor-widget-text-editor\" data-id=\"81ad7a6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Obwohl einige Eigenschaften es erm\u00f6glichen k\u00f6nnen, eine HTML-Tabelle zu personalisieren, ist die bevorzugte Methode oft CSS.<\/span><\/p><p><span style=\"font-weight: 400;\">Das folgende Beispiel zeigt eine relativ einfache Anpassung einer HTML-Tabelle:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16c56e7 elementor-widget elementor-widget-text-editor\" data-id=\"16c56e7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">width<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">100%<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border-collapse<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">collapse<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">1px<\/span> <span style=\"font-weight: 400; color: #0000ff;\">solid <\/span><span style=\"color: #800080;\"><b>schwarz<\/b><\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">padding<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">10px<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">text-align<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">left<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\"> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">background-color<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">#f2f2f2<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Beruf&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Gehalt (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bob Sponge&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Analyst&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Bart Simpson&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;55 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Rick Sanchez&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Architecte Big Data&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;75 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Morty Smith&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Machine Learning Engineer&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;70 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d55a658 elementor-widget elementor-widget-text-editor\" data-id=\"d55a658\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Das Ergebnis wirkt bereits weniger n\u00fcchtern:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac35c5b elementor-widget elementor-widget-html\" data-id=\"ac35c5b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n  th, td {\r\n    border: 1px solid schwarz;\r\n    padding: 10px;\r\n    text-align: left;\r\n  }\r\n  th {\r\n    background-color: #f2f2f2;\r\n  }\r\n<\/style>\r\n<table>\r\n  <thead>\r\n    <tr>\r\n      <th>Name<\/th>\r\n      <th>Beruf<\/th>\r\n      <th>Gehalt (\u20ac)<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Bob Sponge<\/td>\r\n      <td>Data Analyst<\/td>\r\n      <td>45 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Alice Wonderland<\/td>\r\n      <td>Data Scientist<\/td>\r\n      <td>60 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Bart Simpson<\/td>\r\n      <td>Data Engineer<\/td>\r\n      <td>55 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Rick Sanchez<\/td>\r\n      <td>Big Data Architekt<\/td>\r\n      <td>75 000<\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td>Morty Smith<\/td>\r\n      <td>Machine Learning Engineer<\/td>\r\n      <td>70 000<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2157a6 elementor-widget elementor-widget-text-editor\" data-id=\"d2157a6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e208b7 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"5e208b7\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/de\/weiterbildung-data-analyst\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Nutze HTML als Data Analyst<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-86e1e0e e-flex e-con-boxed e-con\" data-id=\"86e1e0e\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e8fb08 elementor-widget elementor-widget-heading\" data-id=\"2e8fb08\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Zug\u00e4nglichkeit und bew\u00e4hrte Praktiken<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-924e6c8 elementor-widget elementor-widget-text-editor\" data-id=\"924e6c8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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.<\/span><\/p><p><span style=\"font-weight: 400;\">Hier sind einige bew\u00e4hrte Praktiken, um deine Tabellen zug\u00e4nglich zu machen:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verwende klare \u00dcberschriften<\/b><span style=\"font-weight: 400;\">: Die &lt;<span style=\"color: #008000;\">th<\/span>&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.<\/span><\/li><li><b>F\u00fcge Scope-Attribute hinzu<\/b><span style=\"font-weight: 400;\">: Verwende <span style=\"color: #0000ff;\">scope<\/span>=<span style=\"color: #ff0000;\">&#8222;col&#8220;<\/span> oder <span style=\"color: #0000ff;\">scope<\/span>=<span style=\"color: #ff0000;\">&#8222;row&#8220;<\/span>, 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:<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b36b96 elementor-widget elementor-widget-text-editor\" data-id=\"4b36b96\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Beruf&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Gehalt (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9473e64 elementor-widget elementor-widget-text-editor\" data-id=\"9473e64\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><b>F\u00fcge eine <\/b><span style=\"font-weight: 400;\">&lt;<span style=\"color: #008000;\">caption<\/span>&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:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-669d570 elementor-widget elementor-widget-text-editor\" data-id=\"669d570\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">caption<\/span><span style=\"font-weight: 400;\">&gt;Lohn-Tabelle der Mitarbeiter des Data-Teams&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">caption<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Beruf&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">scope<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"col\"<\/span><span style=\"font-weight: 400;\">&gt;Gehalt (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dfba2d8 elementor-widget elementor-widget-text-editor\" data-id=\"dfba2d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Bevorzuge CSS f\u00fcr die Personalisierung<\/b><span style=\"font-weight: 400;\">: 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.<\/span><\/li><li><b>Komplexe Tabellen und Zuordnung von \u00dcberschriften zu Zellen:<\/b><span style=\"font-weight: 400;\"> 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 <\/span><i><span style=\"font-weight: 400;\">headers <\/span><\/i><span style=\"font-weight: 400;\">und <\/span><i><span style=\"font-weight: 400;\">id<\/span><\/i><span style=\"font-weight: 400;\"> zu verkn\u00fcpfen. Dadurch wird eine bessere Navigation f\u00fcr Nutzer von Screenreadern gew\u00e4hrleistet. Zum Beispiel:<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46e9a9b elementor-widget elementor-widget-text-editor\" data-id=\"46e9a9b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"name\"<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"beruf\"<\/span><span style=\"font-weight: 400;\">&gt;Beruf&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"gehalt\"<\/span><span style=\"font-weight: 400;\">&gt;Durchschnittsgehalt (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"name\"<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td <\/span><span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"beruf\"<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span> <span style=\"font-weight: 400; color: #0000ff;\">headers<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"gehalt\"<\/span><span style=\"font-weight: 400;\">&gt;45 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-275b831 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"275b831\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/de\/low-code-eine-einfache-programmiersprache-fuer-jedermann\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Schon mal was von Low Code geh\u00f6rt?<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-454f4b5 e-flex e-con-boxed e-con\" data-id=\"454f4b5\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-87d6f37 elementor-widget elementor-widget-heading\" data-id=\"87d6f37\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Tabellen und dynamische Daten<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23a8f8b elementor-widget elementor-widget-text-editor\" data-id=\"23a8f8b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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.<\/span><\/p><p><span style=\"font-weight: 400;\">Hier ein einfaches Beispiel f\u00fcr ein Skript, das eine Zeile zu einer Tabelle hinzuf\u00fcgt:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85ec592 elementor-widget elementor-widget-text-editor\" data-id=\"85ec592\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">button <\/span><span style=\"font-weight: 400; color: #0000ff;\">onclick<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">\"zeileHinzuf\u00fcgen()\"<\/span><span style=\"font-weight: 400;\">&gt;Zeile hinzuf\u00fcgen&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">button<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\"> {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">width<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">100%<\/span><span style=\"font-weight: 400;\">;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border-collapse<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">collapse<\/span><span style=\"font-weight: 400;\">;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\n<span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\"> {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">border<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">1px<\/span> <span style=\"font-weight: 400;\">solid<\/span> <strong>schwarz<\/strong><span style=\"font-weight: 400;\">;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">padding<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #008000;\">10px<\/span><span style=\"font-weight: 400;\">;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">text-align<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"color: #0000ff;\"><span style=\"font-weight: 400;\">left<\/span><span style=\"font-weight: 400;\">;<\/span><\/span>\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\n<span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\"> {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400; color: #ff0000;\">background-color<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400; color: #0000ff;\">#f2f2f2<\/span><span style=\"font-weight: 400;\">;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">style<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre><p style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">table <\/span><span style=\"font-weight: 400; color: #0000ff;\">id<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8222;<span style=\"font-weight: 400;\">meineTabelle<\/span>&#8222;<\/span> <span style=\"font-weight: 400; color: #0000ff;\">border<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8222;1&#8220;<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Name&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Beruf&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;Gehalt (\u20ac)&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">th<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">thead<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Alice Wonderland&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;Data Scientist&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;60 000&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">td<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tr<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">tbody<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">table<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p><p style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400; color: #008000;\">script<\/span><span style=\"font-weight: 400;\">&gt;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0<\/span><span style=\"color: #800080;\"><b>function<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\"><span style=\"font-weight: 400;\">zeileHinzuf\u00fcgen<\/span><\/span><span style=\"font-weight: 400;\"><span style=\"color: #0000ff;\">()<\/span> {<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b> <\/span><span style=\"font-weight: 400; color: #0000ff;\">table<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #33cccc;\">document<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">getElementById<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8222;maTable&#8220;<\/span><span style=\"font-weight: 400;\">)<span style=\"color: #993300;\">.<\/span><\/span><span style=\"font-weight: 400; color: #993300;\">getElementsByTagName<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8218;tbody&#8216;<\/span><span style=\"font-weight: 400;\">)[<\/span><span style=\"font-weight: 400; color: #008000;\">0<\/span><span style=\"font-weight: 400;\">];<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\"><span style=\"font-weight: 400;\">neueZeile<\/span>\u00a0<\/span><span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">table<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertRow<\/span><\/span><span style=\"font-weight: 400;\">();<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\"><span style=\"font-weight: 400;\">zelle<\/span>1<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">nouvelleLigne<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">0<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\"><span style=\"font-weight: 400;\">zelle<\/span>2<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">nouvelleLigne<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">1<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span><span style=\"color: #800080;\"><b>var<\/b><\/span> <span style=\"font-weight: 400; color: #0000ff;\"><span style=\"font-weight: 400;\">zelle<\/span>3<\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #333399;\">nouvelleLigne<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">insertCell<\/span><\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400; color: #008000;\">2<\/span><span style=\"font-weight: 400;\">);<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0 <\/span><span style=\"font-weight: 400; color: #333399;\"><span style=\"font-weight: 400;\">zelle<\/span>1<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #ff0000;\">&#8222;<span style=\"font-weight: 400;\">Vorname Nachname<\/span>&#8222;<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0 <\/span><span style=\"font-weight: 400; color: #333399;\"><span style=\"font-weight: 400;\">zelle<\/span>2<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b> <\/span><span style=\"font-weight: 400; color: #ff0000;\">&#8222;Data Engineer&#8220;<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0\u00a0 <\/span><span style=\"font-weight: 400; color: #333399;\"><span style=\"font-weight: 400;\">zelle<\/span>3<\/span><span style=\"color: #993300;\"><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">innerHTML<\/span><\/span> <span style=\"color: #ff00ff;\"><b>=<\/b><\/span> <span style=\"font-weight: 400; color: #ff0000;\">&#8222;55 000&#8220;<\/span><span style=\"font-weight: 400;\">;<\/span><br \/><span style=\"font-weight: 400;\"> \u00a0}<\/span><br \/><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400; color: #008000;\">script<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14c38ce elementor-widget elementor-widget-text-editor\" data-id=\"14c38ce\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Die Schaltfl\u00e4che wird also eine neue Zeile hinzuf\u00fcgen, in diesem Beispiel mit Standardwerten.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81bf401 elementor-widget elementor-widget-html\" data-id=\"81bf401\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<button onclick=\"zeileHinzuf\u00fcgen()\">Zeile hinzuf\u00fcgen<\/button>\r\n<style>\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n  }\r\n  th, td {\r\n    border: 1px solid black;\r\n    padding: 10px;\r\n    text-align: left;\r\n  }\r\n  th {\r\n    background-color: #f2f2f2;\r\n  }\r\n<\/style>\r\n\r\n<table id=\"meineTabelle\" border=\"1\">\r\n <thead>\r\n   <tr>\r\n     <th>Name<\/th>\r\n     <th>Beruf<\/th>\r\n     <th>Gehalt (\u20ac)<\/th>\r\n   <\/tr>\r\n <\/thead>\r\n <tbody>\r\n   <tr>\r\n     <td>Alice Wunderland<\/td>\r\n     <td>Data Scientist<\/td>\r\n     <td>60 000<\/td>\r\n   <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n\r\n<script>\r\n function zeileHinzuf\u00fcgen() {\r\n   var table = document.getElementById(\"meineTabelle\").getElementsByTagName('tbody')[0];\r\n   var neueZeile = table.insertRow();\r\n   var zelle1 = neueZeile.insertCell(0);\r\n   var zelle2 = neueZeile.insertCell(1);\r\n   var zelle3 = neueZeile.insertCell(2);\r\n   zelle1.innerHTML = \"Vorname Nachname\";\r\n   zelle2.innerHTML = \"Dateningenieur\";\r\n   zelle3.innerHTML = \"55 000\";\r\n }\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1a555de e-flex e-con-boxed e-con\" data-id=\"1a555de\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aeb4691 elementor-widget elementor-widget-heading\" data-id=\"aeb4691\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Fazit<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7eadb83 elementor-widget elementor-widget-text-editor\" data-id=\"7eadb83\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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;<span style=\"color: #008000;\">table<\/span>&gt;, &lt;<span style=\"color: #008000;\">thead<\/span>&gt;, &lt;<span style=\"color: #008000;\">tbody<\/span>&gt;, &lt;<span style=\"color: #008000;\">tr<\/span>&gt;, &lt;<span style=\"color: #008000;\">th<\/span>&gt; und &lt;<span style=\"color: #008000;\">td<\/span>&gt; sowie fortgeschrittenere Konzepte wie `colspan` und `rowspan` kennst, kannst Du anspruchsvolle und zug\u00e4ngliche Tabellen erstellen. In Kombination mit <a href=\"https:\/\/datascientest.com\/de\/css3-im-detail-alles-wissenswerte\">CSS<\/a> f\u00fcr grafische Anpassungen und <a href=\"https:\/\/datascientest.com\/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.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85b8820 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"85b8820\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/de\/unsere-aus-und-weiterbildungen\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Werde HTML Experte<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-33003aa e-flex e-con-boxed e-con\" data-id=\"33003aa\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63ee184 elementor-widget elementor-widget-html\" data-id=\"63ee184\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"FAQPage\",\r\n  \"mainEntity\": [\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"Was ist eine Tabelle in HTML?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Eine Tabelle in HTML ist eine Struktur, die verwendet wird, um Daten in Tabellenform zu organisieren. Sie besteht aus Zeilen (<tr>-Tags), Datenzellen (<td>-Tags) und Kopfzellen (<th>-Tags), um Informationen klar und lesbar zu strukturieren.\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"Wie erstellt man eine einfache Tabelle in HTML?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Um eine einfache Tabelle in HTML zu erstellen, verwenden Sie das <table>-Tag, um die Tabelle zu definieren, <tr> f\u00fcr eine Zeile, <td> f\u00fcr eine Datenzelle und <th> f\u00fcr eine Kopfzelle. Zum Beispiel:\\n```html\\n<table>\\n  <tr>\\n    <th>Name<\/th>\\n    <th>Alter<\/th>\\n  <\/tr>\\n  <tr>\\n    <td>John<\/td>\\n    <td>30<\/td>\\n  <\/tr>\\n<\/table>\\n```\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"Was sind die besten Praktiken f\u00fcr die Strukturierung einer HTML-Tabelle?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Zu den besten Praktiken geh\u00f6rt die Verwendung von <thead>, <tbody> und <tfoot>, um die Tabelle klar zu strukturieren. Verwenden Sie <thead> f\u00fcr die Kopfzeilen, <tbody> f\u00fcr die Daten und <tfoot> f\u00fcr Fu\u00dfzeileninformationen wie Summen. Dies verbessert die Zug\u00e4nglichkeit und Lesbarkeit des Codes.\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"Wie kann man eine HTML-Tabelle mit CSS stylen?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Um eine HTML-Tabelle zu stylen, k\u00f6nnen Sie CSS-Eigenschaften wie `border` verwenden, um Rahmen hinzuzuf\u00fcgen, `padding`, um den Inhalt der Zellen zu polstern, und `text-align`, um den Text auszurichten. Zum Beispiel:\\n```css\\ntable {\\n  border-collapse: collapse;\\n}\\nth, td {\\n  border: 1px solid black;\\n  padding: 8px;\\n  text-align: left;\\n}\\n```\"\r\n      }\r\n    }\r\n  ]\r\n}\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","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. Sie erm\u00f6glichen es, Daten strukturiert darzustellen, indem sie in Zeilen und Spalten organisiert werden. Dies erleichtert die Darstellung komplexer Daten und erm\u00f6glicht [&hellip;]<\/p>\n","protected":false},"author":45,"featured_media":200790,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"content-type":"","inline_featured_image":false},"categories":[2460],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v21.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung<\/title>\n<meta name=\"description\" content=\"Entdecke, wie Du HTML-Tabellen erstellen und gestalten kannst, um Deine Daten effektiv zu organisieren. Lerne Tipps und Techniken, um die Zug\u00e4nglichkeit und das Design Deiner Tabellen zu verbessern.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung\" \/>\n<meta property=\"og:description\" content=\"HTML-Tabellen dienen dazu, Daten im Internet zu strukturieren und darzustellen. Ihre CSS-\u00c4quivalente (wie Grids oder Flexbox) werden oft bevorzugt, weil\" \/>\n<meta property=\"og:url\" content=\"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das\" \/>\n<meta property=\"og:site_name\" content=\"Weiterbildung Data Science | DataScientest.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataScientestEN\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-22T05:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-20T08:05:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/datascientest.com\/de\/files\/2024\/11\/html-table-datascientest.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Daniel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataScientest__\" \/>\n<meta name=\"twitter:site\" content=\"@DataScientest__\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das#article\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das\"},\"author\":{\"name\":\"Daniel\",\"@id\":\"https:\/\/datascientest.com\/de\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0\"},\"headline\":\"Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung\",\"datePublished\":\"2024-11-22T05:30:00+00:00\",\"dateModified\":\"2024-11-20T08:05:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das\"},\"wordCount\":1213,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/datascientest.com\/de\/#organization\"},\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/datascientest.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das\",\"url\":\"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das\",\"name\":\"Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/de\/#website\"},\"datePublished\":\"2024-11-22T05:30:00+00:00\",\"dateModified\":\"2024-11-20T08:05:25+00:00\",\"description\":\"Entdecke, wie Du HTML-Tabellen erstellen und gestalten kannst, um Deine Daten effektiv zu organisieren. Lerne Tipps und Techniken, um die Zug\u00e4nglichkeit und das Design Deiner Tabellen zu verbessern.\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/datascientest.com\/de\/#website\",\"url\":\"https:\/\/datascientest.com\/de\/\",\"name\":\"Weiterbildung Data Science | DataScientest.com\",\"description\":\"F\u00fchrender Anbieter von Schulungen im Bereich Data Science\",\"publisher\":{\"@id\":\"https:\/\/datascientest.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/datascientest.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/datascientest.com\/de\/#organization\",\"name\":\"DataScientest\",\"url\":\"https:\/\/datascientest.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/datascientest.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/datascientest.com\/de\/wp-content\/blogs.dir\/8\/files\/2024\/02\/DataScientest_icon_blue-2.png\",\"contentUrl\":\"https:\/\/datascientest.com\/de\/wp-content\/blogs.dir\/8\/files\/2024\/02\/DataScientest_icon_blue-2.png\",\"width\":301,\"height\":301,\"caption\":\"DataScientest\"},\"image\":{\"@id\":\"https:\/\/datascientest.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/DataScientestEN\",\"https:\/\/twitter.com\/DataScientest__\",\"https:\/\/www.linkedin.com\/company\/datascientest-germany\/\",\"https:\/\/www.tiktok.com\/@datascientest\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/datascientest.com\/de\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0\",\"name\":\"Daniel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/datascientest.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g\",\"caption\":\"Daniel\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/school\/datascientest\/\",\"user\"],\"jobTitle\":\"ing\u00e9nieur logiciel\",\"worksFor\":\"DataScientest\",\"url\":\"https:\/\/datascientest.com\/de\/author\/team-redac\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung","description":"Entdecke, wie Du HTML-Tabellen erstellen und gestalten kannst, um Deine Daten effektiv zu organisieren. Lerne Tipps und Techniken, um die Zug\u00e4nglichkeit und das Design Deiner Tabellen zu verbessern.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das","og_locale":"de_DE","og_type":"article","og_title":"Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung","og_description":"HTML-Tabellen dienen dazu, Daten im Internet zu strukturieren und darzustellen. Ihre CSS-\u00c4quivalente (wie Grids oder Flexbox) werden oft bevorzugt, weil","og_url":"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das","og_site_name":"Weiterbildung Data Science | DataScientest.com","article_publisher":"https:\/\/www.facebook.com\/DataScientestEN","article_published_time":"2024-11-22T05:30:00+00:00","article_modified_time":"2024-11-20T08:05:25+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/datascientest.com\/de\/files\/2024\/11\/html-table-datascientest.webp","type":"image\/webp"}],"author":"Daniel","twitter_card":"summary_large_image","twitter_creator":"@DataScientest__","twitter_site":"@DataScientest__","twitter_misc":{"Verfasst von":"Daniel","Gesch\u00e4tzte Lesezeit":"7 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das#article","isPartOf":{"@id":"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das"},"author":{"name":"Daniel","@id":"https:\/\/datascientest.com\/de\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0"},"headline":"Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung","datePublished":"2024-11-22T05:30:00+00:00","dateModified":"2024-11-20T08:05:25+00:00","mainEntityOfPage":{"@id":"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das"},"wordCount":1213,"commentCount":0,"publisher":{"@id":"https:\/\/datascientest.com\/de\/#organization"},"articleSection":["Dev"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/datascientest.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das","url":"https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das","name":"Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung","isPartOf":{"@id":"https:\/\/datascientest.com\/de\/#website"},"datePublished":"2024-11-22T05:30:00+00:00","dateModified":"2024-11-20T08:05:25+00:00","description":"Entdecke, wie Du HTML-Tabellen erstellen und gestalten kannst, um Deine Daten effektiv zu organisieren. Lerne Tipps und Techniken, um die Zug\u00e4nglichkeit und das Design Deiner Tabellen zu verbessern.","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/datascientest.com\/de\/html-tabellen-was-ist-das"]}]},{"@type":"WebSite","@id":"https:\/\/datascientest.com\/de\/#website","url":"https:\/\/datascientest.com\/de\/","name":"Weiterbildung Data Science | DataScientest.com","description":"F\u00fchrender Anbieter von Schulungen im Bereich Data Science","publisher":{"@id":"https:\/\/datascientest.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/datascientest.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/datascientest.com\/de\/#organization","name":"DataScientest","url":"https:\/\/datascientest.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/datascientest.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/datascientest.com\/de\/wp-content\/blogs.dir\/8\/files\/2024\/02\/DataScientest_icon_blue-2.png","contentUrl":"https:\/\/datascientest.com\/de\/wp-content\/blogs.dir\/8\/files\/2024\/02\/DataScientest_icon_blue-2.png","width":301,"height":301,"caption":"DataScientest"},"image":{"@id":"https:\/\/datascientest.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataScientestEN","https:\/\/twitter.com\/DataScientest__","https:\/\/www.linkedin.com\/company\/datascientest-germany\/","https:\/\/www.tiktok.com\/@datascientest"]},{"@type":"Person","@id":"https:\/\/datascientest.com\/de\/#\/schema\/person\/5a86e30c5090234fb43dd8baa83c44b0","name":"Daniel","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/datascientest.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/837acad4f2dc47e85d81cce837261670?s=96&d=mm&r=g","caption":"Daniel"},"sameAs":["https:\/\/www.linkedin.com\/school\/datascientest\/","user"],"jobTitle":"ing\u00e9nieur logiciel","worksFor":"DataScientest","url":"https:\/\/datascientest.com\/de\/author\/team-redac"}]}},"_links":{"self":[{"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/posts\/200788"}],"collection":[{"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/comments?post=200788"}],"version-history":[{"count":43,"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/posts\/200788\/revisions"}],"predecessor-version":[{"id":201123,"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/posts\/200788\/revisions\/201123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/media\/200790"}],"wp:attachment":[{"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/media?parent=200788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/categories?post=200788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datascientest.com\/de\/wp-json\/wp\/v2\/tags?post=200788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}