so wir befassen uns nun mit dem Teil D den Bereich der len ulol haben wir als Video jetzt gerade nicht parat es geht hier im Wesentlichen darum sich Tabellen anzusehen weil Tabellen also jeder weiß was eine Tabelle ist aber eine Tabelle in HTML umzusetzen erfordert so ein bisschen Arbeit im Oberstübchen warum das so ist wird hoffentlich in diesem Video deutlich und dann gibt es darüber hinaus noch ein zweites Video und zwar soll da einmal alles das was an Informationen in diesem Video rüber gekommen ist angewendet werden in einer etwas größeren Aufgabe sprich ihr könnt mir dann dabei zusehen wie ich eben diese Aufgaben löse okay Listen und Tabellen wir scrollen mal runter worum es geht hier sind wir schon wenn wir über Tabellen reden dann haben wir in HTML das Problem dass wir wenn wir den Quellcode Schreiben vor unserem Auge gar nicht sehen wie sieht eigentlich die Tabellenstruktur aus das wird in dieser Tabelle ganz gut deutlich das was hier angelegt ist ist das was wir hier neben sehen und wenn man sich das hier anschaut dann sieht man direkt okay moment mal das hat ja überhaupt gar keine Tabellenform das einzige was wir sehen zumindest wenn man sich diese Verschachtelungstiefe ansieht ist dass wir verschiedene Einrückungen haben und die entsprechenden Tags um eine Tabelle anzulegen die sind eigentlich ganz einfach zu verstehen und zwar brauchen wir ganz grundlegend ein Table Tag indem wir den Browser erklären alles was innerhalb eines table Tags steht gehört zu einer Tabelle die wir anlegen wollen dann gibt es den TR Tag mit Hilfe des TR Tags lege ich eine Zeile an und dann gibt's noch TD Text und mit Hilfe von TD Tag lege ich innerhalb dieser Zeile deswegen ist das eingerückt wir sehen dass die TDS innerhalb eines TR stehen lege ich jetzt fest wie viele einzelne Zellen sollen in dieser Zeile drin sein na und wenn ich das dann alles Passform untereinander hinschreibe dann ist es unweigerlich so dass am Ende dabei eine Tabelle rauskommt etwas übersichtlicher stellt sich das Ganze da wenn man sich diesen Bereich hier ansieht wir haben also eine Tabelle das ist dieser blaue Bereich und dieser blaue Bereich mit diesen ganzen einzelnen Zellen bettet sich ein in den table Tag und wir sehen dass ja eine Tabelle immer aufgebaut ist aus einzelnen Zellen das sind diese Spalten die einzelnen TDS TD steht für table data eine einzelne Zelle eingebettet sind in TR Tags TR steht für table row was nicht anderes bedeutet als wir hier als dass wir hier eine Zeile von den haben und und die ganzen Zeilen Zeile 1 Zeile 2 und Zeile 3 sind jetzt eingebettet eben in diesen übergeordneten table Tag und ja wenn man wenn man sich das schon merken kann dann ist das schon die große Kunst der Tabellen was natürlich wie immer so ein bisschen die schwierigere Variante ist ist eben das was wir jetzt hier lernen anzuwenden in irgendwelchen Aufgaben ich will aber jetzt auch gar nicht so weit in Script hin und her scrollen und euch da irgendwie theoretisch was erklären ich denke am besten ist es wenn wir uns ein Beispiel ansehen und ich habe hier schon mal Visual Studio Code geöffnet ich habe sogar schon Beispiel für Tabellen aber schließe ich mal ganz schnell denn wir wollen von Null auf eine Tabelle erstellen ach ich fange mal ganz von vorne an ich öffne also Visual Studio Code dann öffne ich den Ordner indem ich meine Tabelle erstellen möchte man kann es ja glaube ich nicht genug sagen ich mache das ganze nicht in dem Ordner rohaten sondern ich gehe in den Bereich wo ich euch dann später auch die Datei die ich jetzt hier schreibe bereitstellen kann das wäre bei mir der Ordner infodateien ich wähle den Ordner aus und erstelle innerhalb dieses Ordners jetzt eine neue Datei und diese Datei die nenne ich was he mir gerade überlegt genau ich habe mir überlegt Sportarten ne das ist etwas was man tabellarisch ganz gut auflen kann also Sportarten wichtig. HTML ansonsten kann der Editor uns nicht dabei helfen Text zu vervollständigen etc pp wenn ich HTML also pun HTML als dateienderung dazu schreibe dann habe ich eben die Vorteil des Editors dass ich z.B automatische Vervollständigung des Tags habe so ich fange an für meinen grundbereich den kennen wir Headbereich unter im Head Bereich haben wir den Body Bereich W das richtig schreiben würde wä es auch besser so dann lege ich ganz fix fest was im Headbereich wichtig ist wir haben Titel die Webseite soll Sportarten heißen und natürlich lege ich fest dass ich mein Zeichensatz auf UTF B8 festlege damit ich auch mit und üs und S und so weiter vernünftig umgehen kann okay bodybereich fange ich logischerweise an mit einem Header dort lege ich in einer Überschrift erste Ebene fest Sportarten ja also es wird vielleicht merkt schon nicht die aussageräftigste Webseite wir machen h mal eine HR hinein und danach fangen wir an mit dem Bereich der für uns wichtig ist wir öffnen ein Artiel genau und innerhalb dieses Artikels wollen wir jetzt anfangen mal eine Tabelle zu definieren wir fangen mal an indem wir dem Ganzen eine Überschrift geben und zwar wollen wir einfach einige Sportarten auflisten na und jetzt kann man sich überlegen okay wie klassifiziere ich denn jetzt irgendwelche Sportarten wir machen das mal ganz einfach jede Sportart hat einen Namen und zu den Sportarten können wir dann noch festlegen ob das Mannschaftssportart ist oder oder eben nicht also wir machen das einfach mal ganz einfach wenn wir sagen wollen in HTML dass wir eine Tabelle anlegen möchten dann fangen wir ganz einfach an mit table das ist für den Browser eben der Befehl der wichtig ist der Browser weiß jetzt okay alles das was innerhalb diesem dieses öffnenden tbl Tags und dieses geschlossenen tableetag steht interpretiere ich jetzt als Tabelle ne das ist das was beim Browser ankommt und deswegen müssen wir alles was wir zur Tabelle zugehörig haben wollen eben innerhalb dieser beiden Tags drin stehen haben ne wir können mal einmal abspeichern und uns dann parallel auch immer schon mal das Ergebnis ansehen das empfehle ich sowieso das zu machen ansonsten verliert man ganz schnell den Faden jetzt muss ich mich natürlich durch meine Ordnerstruktur klicken so Listen und Tabellen infodateien genau dort haben wir Sportarten angelegt wir öffnen das mal und das was uns der Browser zeigt ist dass die Webseite so aussieht wir haben HTML seitig eine Tabelle angelegt also öffnender table Tag geschlossener table Tag aber wir haben weder eine Zeile angelegt noch eine Spalte deswegen sehen wir hier gar nichts ja also das erste was wir machen ist jetzt eine Zeile anlegen und da hatte ich gerade schon mal erwähnt dafür nutzen wir den Tag table row ich schreib mal schnell Kommentar erste und dann schreiben wir rein TR und auch hier schließt sich automatisch mein table roadag ich ma dann mal gerne so ein paar Umbrüche denn auch wenn ich eine Zeile angelegt habe die der Browser durchaus interpretieren kann und ich schau mir mal kurz die Lösung an dann sehe ich dass ich trotzdem nichts tut warum weil ich muss über den TD Tag jetzt innerhalb meiner Zeile die so einzelne Zellen Anliegen also ich schneide quasi die Zeile verschiedben große Teile ja und wenn wir Tabelle anlegen wollen dann ist es ja in der Regel so dass die erste Spalte haben dass wir dort häufig Überschriften finden für die Werte die danach kommen und wir hatten jetzt gerade gesagt wir wollen festlegen Sportart hat einen Namen ja was hat Sportart noch bisschen überfordert Sportarten Typ genau W gesagt Mannschaftsportart oder alleine oder so gegebenenfalls ah nee das lass wir erstmal also ich denke hiermit können wir schon mal eine kleine Auflistung anstellen können und ja genau das ist jetzt schon meine erste Zeile weil ich will ja nur die beiden Spalten Namen und Typ haben mit den ich jetzt nach und nach der informationzus schreibe wenn ich mir das jetzt nämlich ansehe dann erkenne ich dass das schon mal nebeneinander steht ne was ich nicht sehe das ist der offensichtliche Punkt ist dass es sich hier um eine Tabelle handelt ich könnte auch mal quellkod Name lehrzeichentyp dahineschrieben haben aber wenn wir jetzt anfangen da einzelne Werte zuzuschreiben in einzelnen tdtext dann ist das halt ein bisschen sauberer angeordnet also nam Typ und jetzt fange ich eben an das schreib mal das Kommentar hier rein zeilenweise Informationen eingeben so na und bei Tabellen eignet es sich tatsächlich ganz viel mit Copy and Paste zu machen ich mache also eine neue Zeile und innerhalb dieser Zeile gibt es jetzt immer zwei verschiedene Werte warum zwei verschiedene Werte weil ich habe gesagt Wert Nummer ein ist immer der Name der Sportart Wert Nummer 2 ist immer der Typ ob jetzt Mannschaftssportart ist oder oder eben nicht deswegen können wir jetzt innerhalb dieses TRS schon mal zwei table data aparellos einfügen und jetzt kommt das was ich meine mit Copy und Paste das wiederholt sich jetzt und zwar so häufig wie ich Daten in meine Tabelle eingeben möchte deswegen kopiere ich mir das Steuerung C fange jetzt an was da reinzuschreiben wir können also z.B sagen Sportart Name Fußball und das ist vom Typ [Musik] Mannschaftsportart ne damit habe ich jetzt und das kann man sich dann ansehen meine ersten Datensätze da so ne also ist jetzt vielleicht nicht so Mindfuck wie man das erwartet hätte das ist halt nicht die komplexeste Tabelle aber das ist eben der Grundaufbau wie man den HTML damit umgehen muss und ich kann jetzt hier nach und nach verschiedene Datensätze einfügen sagen mal wir bleiben mal dabei dann schreibe ich jetzt hier rein Tennis ich würde das jetzt mal als Einzelsportart dahin schreiben dann haben wir Golf ist auch eine Einzelsportart na ich will jetzt hier kein Sportler auf die Füße treten also bitte seht mir das nach glof aber ich glaube Golf da ist man alleine auf dem Golfplatz unterwegs mit seinen schicken Stoffhosen und sein Caddy ich w das nicht als mannschaftsportar schreiben okay was haben wir noch für Sportarten es gibt Volleyball das ist logischerweise eine Mannschaftssportart und dann haben wir noch mit F gibt noch Handball Handball ist auch eine Mannschafts so WN ich das jetzt abspeicher und mir das ansehe dann habe ich eine wunderschöne Tabelle angelegt die man jetzt auf seiner Webseite präsentieren kann und wichtig ist e dass man die Struktur kennt immer im TR TDS so viele wie man reinpacken möchte aber wenn man jetzt anfängt hier versehentlich wieder einen geschlossenen Tag zu vergessen das sind dann immer so klassische Fehler dann schauen wir uns mal das Ergebnis an guck mal der ignoriert diesen Fehler schon wieder gekonnt sind so Sachen die wollte ich im Video gar nicht zeigen ne ja sagen wir es mal so ich persönlich wenn ich sehe dass ihr vergesst an TR Tag zu schließen dann habe ich euch das Ohren deswegen schreiben wir den ganz schnell wieder hier na wir wollen ja möglichst fehlerfrei arbeiten und wichtig ist natürlich auch dass wir wissen dass wir die Tabellen auch noch durchaus komplexer ja darstellen können so was natürlich ein bisschen störend ist an dieser ganzen Sache ist das sieht ja immer noch nicht so richtig aus wie eine Tabelle weil bei Tabellen ist es so dass wir in der Regel zumindest einen Rahmen für diese Tabelle erwahen ne damit ich auch sehe das ist eine Tabelle es ist in HTML so und das steht auch im Skript noch eingänglicher beschrieben auch in dem letzten Kapitel dass alles was Formatierung betrifft nicht mit HTML Code gemacht wird und wenn ich sage dass eine Tabelle ein Rahmen haben soll dann ist das nur eine optische Geschichte warum das was ich hier sehe ist ja eine Tabelle wenn ich mir das markiere sieht man das auch wenn ich jetzt all Rahmen da rein haben will dann ist nur rein Optik und das realisiert man nicht mit HTML we hTML ist nur dafür da Struktur der Webseite festzulegen man kann es nicht oft genug wiederholen und seit HTML5 sind auch gar keine Attribute mehr für Tabellen zugelassen die eben die Formatierung beeinflussen mit Ausnahme von einem Attribut und das bezieht sich nämlich genau auf den Rahmen und dieses Attribut wird angewendet in dem übergeordneten Tag den es er gibt das ist der table Tag und wir schreiben da mal als Kommentar zu Rahmen wird angelegt so table das Attribut um welches es hier geht nennt sich border border ist ein englisches englischer Begriff kann man sicherlich zuordnen und steht für Rahmen und was ich machen muss ich muss diesem Attribut einen Wert zuweisen und was wir hier nehmen ist der Wert 1 das heißt also wir weisen der Tabelle einen Rahmen vom Typ 1 zu in diesem Attributwert sind dann verschiedene Formateigenschaften abgelegt die eben dafür sorgen dass der Rahmen gleich aussieht wie er aussieht wir Speicher das ab und nun schauen wir mal was bei der Tabelle passiert Achtung magic ja was ich jetzt hier habe ist eben mein Rahmen und das was eben in dem Typ 1 da abgelegt ist ist dann wohl die Tatsache dass das hier ja ein grauer Rahmen ist das hat ja so ein leichten 3D Effekt seium Formatierung schauen wir uns später an nicht jetzt aber wenn wir mit Tabellen arbeiten wollen und man möchte sich das Ergebnis dann vielleicht auch irgendwie ein bisschen strukturierter ansehen dann macht es durchaus Sinn sich diese Rahmen einmal anzeigen zu lassen wir wissen wie man sie einfügt also wissen wir auch wie man sie wieder raus macht wenn es drauf ankommt an späterer Stelle können wir diesen Rahmen dann eben noch Benutzer orientiert anpassen ob das jetzt gestrichelte Linien sein sollen ob die komplett schwarz sind etc etc etc na alles das legt man über das Attribut border fest und dann eben den Wert 1 ja das ist dann so schon der einfache Teil bezüglich Tabellen und wer jetzt an dieser Stelle meint J mit Tabellen komme ich jetzt ganz gut klar der kann kann dann auch das Video schon aufhören zu gucken denn das was jetzt folgt geht wieder so ein bisschen in die Richtung semantische Struktur einer Tabelle und deswegen mache ich hier mal Umbrüche rein BR und ich öffne einen neuen Artikel und zwar soll es hier um Semantik von Tabellen geh Semantik von Tabellen genau okay Semantik von Tabellen meint also ich strukturiere mir meine Tabelle denn das was ich hier habe ist klar ich habe eine Tabelle angelegt aber für den Browser sind das immer nur einzelne zähen ne und ich kann jetzt eben festlegen dass der Tabelle wieder eine etwas genauere semantische Struktur zugute kommt heißt z.B dass ich den Browser mitteile das Spalten Überschriften eben auch Überschriften darstellen für den Browser sind das einfach nur alles Werte wir legen dazu mal eine neue Tabelle an table wir wollen ein Border haben und zwar vom Typ UNO und jetzt machen wir vielleicht mal eine etwas griffigere Tabelle und zwar wollen wir irgendwie Adressdaten oder Wohnorte festhalten wir machen TR und notieren uns persönliche Daten das ist Name schon groß schreiben Name Vorname und Wohnort schreiben wir mal dahin TD Vorname TD könen wir noch irgendwas lustiges dazu schreiben TD Lieblingsgetränk und dann machen wir noch TD auszieren na also so können wir uns etwas komplexere Tabelle entwickeln ich baue die Tabelle jetzt mal auf und lass das Video jetzt aber laufen dann habe ich gleich keine Arbeit mit ih wie was zusammenschneiden ihr könnt aber diesen Bereich dann einmal überspringen oder ihr hört mir da beiu wie ich philosophiere wie man eine Tabelle aufbaut zweite Zeile TD das muss mal kurz gucken wir haben eine Zelle Z 3 15 das heißt dies TD kopiere ich dann auch direkt f 3 4 5 und diesen ganzen Apparat kopiere ich jetzt weil ich will ja gleich verschiedene Datensätze so okay Name Müller Vorname Heinrich was kann man nach Wohnort Lieblingsgetränk cocaa sero und als Haustier hat er ein Goldfisch so wir machen ein weiteren Datensatz in einer neuen Reihe da wir Schmid ildegartord Oldenburg und die trinkt jenel ein leckeres Bier und als Haustier hat die einen Köter so ein weiterer Datensatz äh hab noch Meer Hz aus Kloppenburg was noch was noch was noch libes Getränk Wasser nitrathaltig möglichst und er hat eine Katze safe wir schauen uns an was passiert ist und jetzt soll drunter eine weitere Tabelle Stein zack da haben wir jetzt genau unsere Leute ich mache noch mal eben eine Trennlinie da rein damit wir beide Tabellen mal voneinander differenzieren könnt so schauen wir uns das Elend mal an so das sieht schon besser aus also es geht hier unten um diese Tabelle und es geht jetzt darum dieser Tabelle etwas mehr Semantik zuzuweisen Nummer ein die erste Zeile in dieser Tabelle beinhaltet Spaltenüberschriften für alles das was danach kommt ja und das kann man neben dem Browser deutlich machen insbesondere später dann auch Suchmaschinen oder aber wir haten darüber diskutiert wenn wir ein Screen Reader oder unsere Webseite Screen Reader tauglich gestalten wollen dann müssen wir in den Browser mitteilen dass die erste Zeile eben kein konkreter Name kein konkreter Vorname ist sondern einfach nur die Spaltenüberschrift für alles das was dannchkomt ja wie kann man das machen wir haben zwei Möglichkeiten bei der ersten Möglichkeit haben wir sogar den Vorteil dass sogar erste formatierungsrichtlinien genommen werden und zwar ersetzen wir diesen TD Tag durch einen sogenannten TH Tag TH meint dass es hier nicht mehr nur nicht nur um TD hat wir gesagt steht für table data wenn ich dort TH hinschreibe heißt das table Header oder table head das heißt der Browser interpretiert alles das was da steht als hervorgehobene Zelle wenn wir oben hinschreiben dann hat das für uns ja meist auch die Bedeutung dass es die Überschrift für die gesamte Tabelle ist für die spaltechuldigung wir setzen also alle TDS durch THS das ist natürlich wenn man das nachträglich macht ein bisschen Fummelarbeit gebe ich offen zu deswegen wenn wir Tabellen anlegen wollen dann müssen wir im Vorfeld uns im Kopf irgendwie ausmalen wie soll die Tabelle Aussehen deswegen auch hier gilt Übung macht den Meister ja was habe ich habe ich jetzt hiermit erreicht ich habe also jeder einzelnen Zelle hier und das stellt im Ende ja nichts anderes da ist die Zellen in der ersten Spalte und damit eben auch die Spaltenüberschriften ich habe gesagt das ist jetzt vom Typ TH und nicht mehr von TD heißt es ist quasi die Überschrift über die gesamte speite das ist die der semantische Hintergrund hinter der Hausnummer wenn ich mir das ansehe hat das jetzt noch einen optischen Hintergrund und zwar alles was innerhalb eines thtags steht ist jetzt fett gedruckt und darüber hinaus auch noch zentriert ne wenn ein das später nicht gefällt kann man das abändern an späterer Stelle wieer CSS für uns hat das aber jetzt erstmal irgendwie ein schnellen optischen Eindruck dass wir jetzt hier eben Spalten überschritten haben okay dann gibt es einen weiteren Bereich wie man die Tabelle noch weiter strukturieren kann und zwar können wir innerhalb unserer Tabelle festlegen dass wir einen Headbereich haben dass wir einen bodybereich haben und dass wir einen fbereich haben das wird natürlich jetzt ein bisschen wirrer das hier einzubauen wir müssen z.B wenn wir sagen das hier ist mein Headbereich meiner Tabelle dann schreiben wir rein t head t ist übergeordnet heißt innerhalb eines headbereichs brauche ich jetzt wiederum row und datas also t ist quasi nur ein zusätzlicher Tag jetzt muss ich das mal eben nach komm so und dann nehmen wir das hier mal raus ähm wir sehen TAD ist also ein zusätzlicher Tag und innerhalb eines TAD Tags muss ich jetzt noch genauso wie eben auch TR und TH ne das kann man sich so ein bisschen vorstellen wie das was wir in dem bodytag in der letzten Einheit gemacht haben wir haben ja dort auch unsere Internetseite strukturieren und haben den optischen Eindruck genauso wie vorher auch gehabt wir haben jetzt nur die Semantik soweit hinzugefügt als dass der Browser erkennt okay es handelt sich um diesen ersten Teil offensichtlich um den Header oder später um den foter oder um die nafleiste und das was wir jetzt hier machen ist eigentlich nichts anderes wir machen den Browser verständlich dass dieser Tabellenbereich und wir wissen dass eine Tabelle aus einer Table row und verschieden table datas oder eben dieses TH besteht dass dieser Bereich hier jetzt zugehörig ist zu diesem table head Bereich ja wenn wir jetzt ein Table head Bereich haben D haben wir auch ein Table body Bereich und das wäre an dieser Stelle jetzt alles das was hier drunter kommt ich kopiere mir das mal fix bzw kopier Musik ich kann das Ausschneiden und füg das logischerweise hier ein das ist mein table body oh muss t vor ne sonst hätte ich mein bodybereich geschlossen das natürlich Käse so t body Kopfbereich t head body Bereich t body heißt also das ist so der Bereich innerhalb meiner Tabelle die ja inhaltlich relevant ist ja und da gibt's auch bei der Tabelle einen Fußbereich würde man abkürzen mit TF schlägt das hier schon vor und dann kann ich dort eben irgendwelche Randbemerkung festlegen fällt natürlich jetzt auch nicht so richtig welche das sein sollten aber ja manchmal gibt es eben Tabellen wo wir insbesondere wo wir dann ein Fußbereich haben ich schreibe ja einfach mal rein Fuß 1 Fuß 2 Fuß 3 damit wir wissen was gemeint ist denn gleich wollen wir uns noch einmal ansehen ja was man da noch so lustiges mit machen kann so plus Z ich brauche fünf Stück wenn mich nicht alles täusch TD Fuß 3 TD Fuß 4 und TD Fu so das ist jetzt unserer Fußbereich der Tabelle so wir schauen uns mal an was sich jetzt hier optisch getan hat und wir sehen da es hat sich gar nichts getan mit Ausnahme eben dass wir hier Fuß 5 dazu geschrieben haben aber ne jetzt können wieder den Bogen spannen zu der semantischen seitenstrukturierung aus Inhaltsbereich C für den Browser ist es jetzt begreiflich was aus dieser Tabelle der eigentliche Inhalt ist nämlich das hier a im tbody steht die anderen beiden Bereiche also head ist natürlich dann mit Überschriften behaftet und das was hier unten steht sind Fußnoten okay jetzt habe ich gerade gesagt der Browser ja der arbeitet noch mehr damit und das ist hier jetzt nicht so ganz offensichtlich aber wenn man jetzt mal genau guckt was ich hier veranstalte ich nehme mal diesen TF Bereich raus hier unten der ist markiert ausschneiden genau und den füge ich mal hier oben ein nach meinem Headbereich das heißt ich würde jetzt für die Tabelle erstwie alle meine meine randsachen festlegen und dann dan nach und nach eben meine Datensätze einfügen heißt TAD TF tbody so und wenn ich mir das Ergebnis jetzt einmal anschaue im Browser dann jetzt müsst ihr mal ganz genau hingucken was ich ändert ja ich klicke die ganze Zeit auf aktualisieren und es ändert sich gar nichts und ja das ist das was der Browser eben aus dem head dem Food und dem Body Bereich noch rausliest den Foodbereich egal wo er in der Tabelle steht der wird automatisch ganz nach unten gepackt na es ist auch ganz egal wie lang meine Tabelle ist wenn jetzt über 200 Seiten geht dann kann ich den food durchaus am Anfang schnell festlegen und der wird automatisch unter die Tabelle gepackt wir können das ganze auch mal umgekehrt machen und packen den Headbereich den schneide ich jetzt hier oben aus und das ist etwas das habe ich selber noch gar nicht getestet den packe ich jetzt mal unter den bodybereich heißt ich habe jetzt meine Tabelle im Grunde komplett umgedreht zumindest Quellcode technisch und ich schaue mir erstm das Ergebnis an und si da es ändert sich auch gar nichts warum weil der Browser interpretiert den Headbereich immer über der Tabelle egal wo ihr im Quellcode steht und die Fußbereich immer unter der Tabelle ne das kann berücksichtigen erlaubt es halt hier so ein bisschen mit Rum zu spielen genau so und jetzt kommen wir noch zu einem dritten Bereich der für Tabellen interessant ist und das ist der Bereich der D meist auch zu Problem führt und zwar geht es dort um das überspannen von Zellen Zeilen oder von Spalten was genau meine ich jetzt damit wir können uns diese Tabelle ja einmal ansehen und so Tabellen haben wir manchmal so Überschriften die dann eben für alle einzelnen Spalten gelten was meine ich damit jetzt ich will quasi hier oben rüber jetzt noch eine weitere Zeile einfügen und diese Zeile soll eine Überschrift enthalten für die Tabelle gut wie Kön ich das jetzt machen erste Idee die mir jetzt so den Kopf schießt jetzt habe ich i natürlich durcheinander drin ich ma mal eben den Headbereich wieder nach oben so derereich kommt wieder hierhin und der fbereich den packe ich mal wieder nach unten we fbereich kann auch auslöschen den brauchen wir jetzt eh nicht ob da Fuß 1 2 3 oder 4 drin vollkommen Lachs so also ich möchte eine Überschrift hinzufügen Möglichkeit ein ich mache hier dann irgendwie so ein TH rein und schreibe hin ähm persönliche Kundendaten so das wä ja Ansatz Nummer ein aber ich denke bei euch zu Hause soll es jetzt auch schon klingeln das funktioniert nicht denn jetzt fügt er hier vor eine Zeile zu dann übernimmt der alles was da drunter in der ersten Spalte drin stand immer zu den Werten welches hier zur ersten Spaltenüberschrift dazu gehört spricht das was als erstes in der TD kommt steht automatisch unter dem ersten Element der darübergehenden Tabelle heißt also die letzte ist leer warum das hier würde jetzt eine sechste Spaltenüberschrift sein wir haben überall aber immer nur fün TDS deswegen kann das schon mal nicht Sinn der Übung sein deswegen zweiter Lösungsansatz ich füge hier drüber eine weitere Reihe ein und sage dann persönliche kund ne das müsste ja dann eine Reihe über alle drüber sein wir speichern den Apparat und schauen uns das an und sehen hier das ist auch nicht im Sinne des Erfinders was hat er gemacht ja er hat eine neue Zeile eingefügt das kann man hieran erkennen aber wir haben jetzt diese Überschrift als einzelne Zelle quasi als erste Spalte der anderen Zelle und danach kommen wir immer fünf Zellen in einer Zeile heißt also der packt genau hier die Grenze und jetzt kommen wir zu dem was ich überspannen nennt was ich bei so einer Überschrift ja eigentlich möchte ist dass diese Überschrift hier komplett über alle Spalten drüber geht sprich ich muss es irgendwie realisieren dass wir ja den Browser begreiflich machen dass diese einzelne Zelle hier egal wie viele Spalten da in den nachfolgenden Zellen kommen dass diese unberücksichtig bleiben und dazu gibt ist ein Attribut und da verweise ich dann auch noch mal auf Script zum Nachlesen dieses Attribut nennt sich roseban bzw coal span Co steht für colum sogenannt eine Spalte ist und row das kenn ich aus TR steht für eine Zeile na und was möchte ich hier machen wenn ich den colpan anwende als Attribut dann überspanne ich Spalten deswegen Copan und wenn ich row span anwende dann überspanne ich ich Zeilen gut wir gehen zurück zu unser praktischen Beispiel ich möchte also dass ich hier verschiedene Spalten überspanne ich nutze also mein colpan und der Attribut Wert den ich dort jetzt zuordnen muss ist die Anzahl der Spalten die ich überspannen möchte gut wir zählen also durch wir haben hier unsere Überschrift schon drin und überspannen will will möchte ich jetzt ein Spalte zwei Spalten dre Spalten vier Spalten fünf Spalten heißt eine Zelle soll fünf Spalten überspannen attributwerert ist also F easy going ab in den Quellcode wir schreiben also bei TH hin Copan in anführprichchen F warum fünf Spalten 1 2 3 4 5 und speichern das ab wenn ich den colspan anwende überspanne ich das was in der nächsten Zeile drin ist wenn ich jetzt auf Speichern gehe dann sollte das Ergebnis dabei rauskommen welches ich eben erwart ja so viel zum Thema überspannen von Spalten ne man muss das natürlich hier und das ist das was ich gerade eben sagte jetzt wird Hal ein bisschen komplizierter muss halt hier so ein bisschen im Kopf sich zurecht konstruieren wie soll die Tabelle amänd aussehen damit die jetzt so aussieht wie sie aussieht ähm ja und das gleiche funktioniert natürlich auch indem ich einzelne Zeilen überspanne und das ist in meinen Augen die etwas kompliziertere Variante weil man dort irgendwie darauf achten muss was passiert jetzt danach ähm wir machen dazu mal folgendes wir fügen eine neue ähm ja wie eine neue Spalte ein so das ich sagen ne und ähm nenn das ganze mal Kundengruppe gut wir können ansehen wir haben das jetzt hier so veranstaltet was ich jetzt möchte ist diese drei Kunden die ich hier drin habe die möchte ich zusammenfassen und be die ersten beiden Kunden möchte ich zusammenfassen zu einer Kundengruppe Nummer 1 heißt also wir sehen das passt mit den Namen jetzt alles nicht heißt also ich muss hier unten jetzt eine neue table data hzufügen dann Kollege Schmidt ist auch in Kundengruppe 1 kundre 1 und Kollege Hans Meer TD ist den Kunden Gruppe 2 jetzt müsste es von den Zellen her wieder passen und ich habe jetzt alle Kunden hier einer Kundengruppe zugeordnet und was jetzt meint ze überspannen ist dass ich z.B Kollege Heinrich Müller und Kollege H mit Kollegin hilgard Schmidt fasse ich zusammen zu Kundengruppe 1 heißt also ich kann mir im Grunde das Sparen das doppelt aufzuführen ich möchte hier also nur einmal Kundengruppe 1 hinschreiben für diese beiden und jetzt haben wir gerade im Skript schon gesehen mit dem Copan komme ich hier nicht weiter warum ich möchte ja keine Spalten überspannen sondern ich möchte Zeilen überspannen und deswegen nutze ich jetzt hierf den rowpan und den rowpan den wende ich dort an also bei der ersten zette die andere überspannen soll und das wäre hier die Kundengruppe Nummer 1 dort sage ich jetzt rowpan GLE 2 warum zwei Kunden gehören zu Kundengruppe 1 und jetzt kommt der Schritt der wichtig ist nämlich ich muss oder warte könen mal einm anschauen wir das vielleicht schon deutlich ich muss jetzt dieses table data hier herausnehmen warum weil er will sonst immer noch Kundengruppe 1 irgendwo in die Tabelle reinpacken und dann kommt da sowas komisches raus wie hier nämlich dass er bei der einzeile ja alles ein weiter nach rechts schiebt warum weil er hat hier was überspannt und hat g keine Zeile dafür soll heißen wenn ich hier eine zwei hinschreibe sorgt das dafür dass er automatisch in der nächsten Zeile schon die erste Zelle mit reingefügt hat weil er soll das ja überspannen heißt also in der nächsten Zeile muss ich das hier komplett rausnehmen ansonsten Haut das nämlich nicht mehr hin mit der Darstellung im Browser und dann habe ich eben das Ergebnis was ich haben möchte ich habe jetzt hier zwei zahen überspannt Müller und Schmidt sind nun in der Kundengruppe 1 und hier haben wir Kundengruppe 2 gut eine Sache sieht optisch natürlich noch ein bisschen doof aus die persönlichen Kundendaten müssen wir jetzt übp könn mal kurz in euch gehen was man da jetzt verändern muss und da sollten dann bei euch im Kopf auch alle Alarm glicken klingeln glicken Glocken klingeln ich muss natürlich aus der F se machen weil wir haben jetzt sech Spalten und keine fün mehr und wenn ich das aktualisiere habe ich meine fertige Tabelle ja und eine Tabelle zu erstellen das sehen wir oben ist kein Hexenwerk eine Tabelle zu strukturieren semantisch als auch eben mit spannten Zellen da wird's dann schon bisschen komplizierter und wenn man dann noch oben ein drauf setzen möchte kann ich natürlich noch sagen mal kurz gucken wo ich das mache ich einfach das hier wir sagen z. BEP in diesem Bereich werde ich eine weitere Tabelle reinschreiben mit einer TR undd weitere Tabelle und einer weiteren Zelle Tabelle 2 und hier machen wir noch mal eben border GLE UNO und wenn ich mir das dann ansehe dann sind wir schnell in ein Bereich in dem Tabellen dann auch durchaus etwas komplizierter werden können und ja also der Skill den man da so beherrschen muss ist eben für sich im kopfus Quellcode schon die Tabelle so vor seinem geistigen Auge zu sehen dann ist es nicht so schwierig das umzusetzen ja genau also im nächsten Video kommt jetzt noch ein praktisches Beispiel zu dem Anlegen von Tabellen und dann könntet ihr eigentlich im Zusammenhang mit dem Skript die Aufgaben alle lösen