Meine erste Homepage Das Gerüst: <html> <head> <title></title> </head> <body> </body> </html> Text in <title> und <body> einfügen <html> <head> <title>Meine erste Homepage</title> </head> <body>Meine erste Homepage</body> </html> Speichern Sie die html-Seite: Dateiname "meine_Seite".html Klicken Sie Ihre HTML-Datei im Windows-Explorer an Im Webbrowser erscheint: 2 Meine erste Homepage Absätze anlegen <html> <head> <title>Absätze</title> </head> <body>Der Text steht in Blockelementen. Eine der wichtigsten Blockelemente sind Absätze. Sie trennen die Texteile voneinander ab. Innerhalb der Blockelemente können Sie auch Zeilenumbrüche einfügen. <p>Für einen größeren Abstand steht "paragraph".<br /> Für einen kleinen Zeilenumbruch steht "break" </p> <p>Speichern Sie den Text ab und erkennen Sie die Unterschiede.<br /> Großer Abstand für Blockement-Ende, kleiner Abstand für Zeilenumbruch im Blockelement</p> </body> </html> - 3 Meine erste Homepage Überschriften Die Überschriften reichen von <h1> bis <h6>. <h1> bedeutetet immer die größte Überschrift. Halten Sie immer eine Rangfolge ein bis zur kleinsten Überschrift <h6>. Für die Suchmaschinenoptimierung sind die Überschriften der <h1> und <h2> wichtig. Sie bieten allen Nutzern eine Barrierefreiheit. Überschriften machen von sich selbst aus einen größeren Abstand zum nächsten Text. <html> <head> <title>Absätze</title> </head> <body> <h1>Absätze</h1> Der Text steht in Blockelementen. Eine der wichtigsten Blockelemente sind Absätze. Sie trennen die Textteile voneinander ab. Innerhalb der Blockelemente können Sie auch Zeilenumbrüche einfügen.<p> <h2>Abstände</h2> Für einen größeren Abstand steht "paragraph".<br /> Für einen kleinen Zeilenumbruch steht "break" </p> <p><h3>Unterschiede</h3> Speichern Sie den Text ab und erkennen Sie die Unterschiede. <br /> Großer Abstand für Blockelement-Ende, kleiner Abstand für Zeilenumbruch im Blockelement</p> </body> </html> - 4 Meine erste Homepage Textbereiche auszeichnen <b>Text</b>= fett <i>Text</i>= inverse = kursiv <strong>Text/strong> = <sup>Text</sup> = hochstellen (superior> <sub>Text</sub> = tiefstellen (subordinate) <u>Text</u> = underlined = unterstrichen Vorsicht: Achten Sie immer darauf, dass der Text eingekesselt wird mit Taganfang und Tagende. Sie können auch mehrere Formatierungen auf einmal anwenden. Dann schließen Sie auch den inneren Tag nach außen. Beispiel: <b><i>Zeilenumbruch im Blockelement</i></b> Der Text ist fett und kursiv. <html> <head> <title>Absätze</title> </head> <body> <h1>Absätze</h1> Der Text steht in <b>Blockelementen</b>. Eine der wichtigsten Blockelemente sind <strong>Absätze</strong>. Sie trennen die Textteile voneinander ab. Innerhalb der Blockelemente können Sie auch <u>Zeilenumbrüche</u> einfügen.<p> <h2>Abstände</h2> Für einen <sup>größeren Abstand</sup> steht "paragraph".<br /> Für einen <sub>kleinen Zeilenumbruch</sub> steht "break" </p> <p><h3>Unterschiede</h3> Speichern Sie den Text ab und erkennen Sie die Unterschiede. <br /> Großer Abstand für <i>Blockelement-Ende</i>, kleiner Abstand für <b><i>Zeilenumbruch im Blockelement</i></b>. Hier sehen Sie zwei Textformatierungen nacheinander.</p> </body> </html> - 5 Meine erste Homepage Sonderzeichen: <html> <head> <title>Absätze</title> </head> <body> <h1>Absätze</h1> Der Text steht in <b>Blockelementen</b>. Eine der wichtigsten Blockelemente sind <strong>Absätze</strong>. Sie trennen die Textteile voneinander ab. Innerhalb der Blockelemente können Sie auch <u>Zeilenumbrüche</u> einfügen.<p> <h2>Abstände</h2> Für einen <sup>größeren Abstand</sup> steht "paragraph".<br /> Für einen <sub>kleinen Zeilenumbruch</sub> steht "break" </p> <p><h3>Unterschiede</h3> Speichern Sie den Text ab und erkennen Sie die Unterschiede. <br /> Großer Abstand für <i>Blockelement-Ende</i>, kleiner Abstand für <b><i>Zeilenumbruch im Blockelement</i></b>. Hier sehen Sie zwei Textformatierungen nacheinander.</p> <p> <b>Sonderzeichen</b>: Möchte ich ein Zeichen für Euro verwenden dann schreibe ich den Zeichensatz für EURO = "&euro;".<br /> Der westeuropäische Zeichensatz ist UTF-8.</p> </body> </html> - 6 Meine erste Homepage Style Sheets – Farbige Absätze Style Sheets sind Formatvorlagen. Sie zeigen den "Stil" einer Seite oder einer Textpassage und sind für alle zukünftigen Seiten ausschlaggebend. Hier ist ein Beispiel für Farbe und Schriftart. Den Tag kann man in alle <body>-Tags verwenden. <html> <head> <title>Style Sheets einsetzen</title> </head> <body> <h1 style="color: red">Überschrift 1</h1> <p style="color: green; font-family: Arial"> Ein erster Absatz. </p> <p style="color: blue"> Ein zweiter Absatz. </p> </body> </html> Farbige Texte Ich hoffe, Ihnen gefällt die <span style="color:red">Seite</span>. Schriftgröße ändern <i><span style="color:blue; font-size:200%">Formatierungen</span></i> (hier ist der Text kursiv, Farbe blau, Größe 200 %) - 7 Meine erste Homepage Style Sheets im Kopf der HTML-Seite Überschrift: h1, rot, ARIAL Absatz: blau, ARIAL, 24 pixel Hier ist ein Beispiel für einen Inline-Stil: <html> <head> <title>Style Sheets einsetzen</title> <style type:"text/css"> h1 { color: red; font-family: ARIAL; } p { color: blue; font-family: Arial; font-size: 24px; } </style> </head> <body> <h1>1. Überschrift</h1> <p> Ein erster Absatz. </p> <p> Ein zweiter Absatz. </p> </body> </html> - 8 Meine erste Homepage Eine externe CSS-Datei anlegen. Öffnen Sie eine neue Word-Pad-Datei und schreiben Sie folgende Datei. Speichern Sie die Datei unter style.css im gleichen Ordner wie, in dem Sie auch die die htmls für diese Homepage liegen haben. h1 { color: red; font-family: Arial; } p { color: blue; font-family: Arial; } Öffnen Sie Ihre html-Datei und schreiben Sie Folgendes: <html> <head> <title>Externe Style Sheets</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1> Überschrift 1 </h1> <p> Ein erster Absatz. </p> <p>Ein zweiter Absatz. </p> </body> </html> </body> </html> - 9 Meine erste Homepage Zusätzliche Formatierungen einarbeiten Grundeinstellung: h1 = rot, Arial / p = blau, Arial, 24 px. Der 2. Absatz soll in "fett" formatiert werden. Der 3. Absatz soll die Schriftgröße 12 px bekommen. Der 4. Absatz soll die Farbe "grün" bekommen. <html> <head> <title>Style Sheets einsetzen</title> <style type:"text/css"> h1 { color: red; font-family: ARIAL; } p { color: blue; font-family: Arial; font-size: 24px; } </style> </head> <body> <h1>1. Überschrift</h1> <p> Ein erster Absatz. </p> <p style="font-weight: bold"> Ein zweiter Absatz. </p> <p style="font-size: 12px"> Ein dritter Absatz. <p> <p style="color: green"> Ein vierter Absatz. </p> - 10 Meine erste Homepage CSS-Klassen verwenden Um einzelnen Überschriften, Absätzen ein Format zuzuweisen, benötigt man Klassen = class. Die Klassen werden mit Punkt geschrieben. <h1 class="format1"> = Für <h1> gilt immer nur das in {…} gesetzte Format<p class="format1"> = Für diesen Absatz gilt immer nur das in {…} gesetzte Format. usw. <html> <head> <title>CSS-Klassen</title> <style type="text/css"> .format1 { color: blue; font-family: Arial; } .format2 { color: green; font-family: Verdana; } h1.format1 { color: red; } </style> </head> <body> <h1 class="format1"> Überschrift 1 </h1> <p class="format1"> Ein erster Absatz. </p> <p class="format2"> Ein zweiter Absatz. </p> </body> </html> - 11 Meine erste Homepage Verschachtelte Tags <html> <head> <title>Verschachtelte Tags</title> <style type="text/css"> p b{ Der Absatz soll bei "fett" die color: red; Farbe "rot" bekommen. } h1, p { color: green; } </style> </head> Die Überschrift1 + der nächste Absatz sollen die Farbe "grün" bekommen. <body> <h1>Überschrift 1</h1> <p> Dieser Absatz hat eine <b>rote</b> fette Hervorhebung</p> </body> </html> Linien <HR> = Tag für Linie ALIGN = Ausrichtung nach rechts und links a) Linienlänge <HR WIDTH=100%> = Linie zieht sich horizontal über das gesamte Fenster b) Linienausrichtung <HR WIDTH=50% ALIGN=LEFT> = Linie ist um die Hälfte reduziert und linksbündig siehe auch <HR WIDTH=50% ALIGN=RIGHT> <HR WIDTH=50% ALIGN=CENTER> c) Linienstärke <HR WIDTH=50% ALIGN=CENTER SIZE=5> d) Gefüllte Linie <HR WIDTH=50% ALIGN=CENTER SIZE=5 NOSHADE> e) Linie mit Farbe <P> <HR WIDTH=100% FONT COLOR=blue></ ><p> Es empfiehlt sich vor und nach der Linie eine doppelte Zeilenschaltung zu setzen. - 12 Meine erste Homepage <html> <head> <title>Style Sheets einsetzen</title> <style type:"text/css"> h1 { color: red; font-family: ARIAL; } p { color: blue; font-family: Arial; font-size: 24px; } </style> </head> <body> <h1>1. Überschrift</h1> <p> Ein erster Absatz. </p> <HR WIDTH=50% ALIGN=CENTER SIZE=5 COLOR=RED> </HR> <p style="font-weight: bold"> Ein zweiter Absatz. </p> <p style="font-size: 12px"> Ein dritter Absatz. <p> <p style="color: green"> Ein vierter Absatz. </p> - 13 Meine erste Homepage Bilder vorbereiten Verwenden Sie *.jpg für Fotos und *.png, *.gif für Bilder, Embleme, Schaltflächen. Legen Sie alle Ihre Bilder in die Homepage-Datei. <html> <head> <title>Bild</title> </head> <body> <p>Das ist unsere Gruppe beim Auswerten der Sportergebnisse.</p> <p> <img src="Sport1.jpg" border="5" width="300" height="200" alt="TV-Damen beim Auswerten" title="Beim Auswerten" /> </p> </body> </html> border = Umrahmung width = Breite height = Höhe alt = Alternativtext (falls das Bild nicht sichtbar ist) title und name = erscheint im Bild, wenn man mit dem Cursor über das Bild fährt Das ist unsere Gruppe beim Auswerten der Sportergebnisse. - 14 Meine erste Homepage Bilder in Absätzen ausrichten <html> <head> <title>Bild</title> </head> <body> <p>Das ist unsere Gruppe beim Auswerten der Sportergebnisse.</p> <p> <img src="Sport1.jpg" align="right" border="5" width="300" height="200" alt="TV-Damen beim Auswerten" title="Beim Auswerten" name="Beim Auswerten" /> <p> Wir TV-Damen bei der Auswertung. Unser Kollege hilft uns bei der Auswertung. An einem heißen Tag saßen wir unter einem Baum, der viel Schatten spendete. </p> </body> </html> Das ist unsere Gruppe beim Auswerten der Sportergebnisse. Wir TV-Damen bei der Auswertung. Unser Kollege hilft uns bei der Auswertung. An einem heißen Tag saßen wir unter einem Baum, der viel Schatten spendete. <html> <head> <title>Bild</title> </head> <body> Das ist unsere Gruppe beim Auswerten der Sportergebnisse. <img src="Sport1.jpg" align="left" hspace="40" vspace="20" border="5" width="300" height="200" alt="TV-Damen beim Auswerten" title="Beim Auswerten" name="Beim Auswerten" /> <p>Wir TV-Damen bei der Auswertung. Unser Kollege hilft uns bei der Auswertung. An einem heißen Tag saßen wir unter einem Baum, der viel Schatten spendete.</p> <p> </body></html> Das ist unsere Gruppe beim Auswerten der Sportergebnisse. Wir TV-Damen bei der Auswertung. Unser Kollege hilft uns bei der Auswertung. An einem heißen Tag saßen wir unter einem Baum, der viel Schatten spendete. - 15 Meine erste Homepage farbiger Hintergrund <html> <head> <title>Bild</title> </head> <body style="background-color: yellow"> Das ist unsere Gruppe beim Auswerten der Sportergebnisse. <img src="Sport1.jpg" align="left" hspace="40" vspace="20" border="5" width="300" height="200" alt="TV-Damen beim Auswerten" title="Beim Auswerten" name="Beim Auswerten" /> <p>Wir TV-Damen bei der Auswertung. Unser Kollege hilft uns bei der Auswertung. An einem heißen Tag saßen wir unter einem Baum, der viel Schatten spendete.</p> <p> </body> </html> Hintergrund ist gelb Mintfarbener Hintergrund: <body style="backgroundcolor:#66CDAA"> Hintergrundbild hinzusetzen Geben Sie im Internet Explorer ein: www.free-vector-grafik-&;-blumen-und-wirbelt_49195.jpg <html> <head> <title>Bild</title> </head> <body style="background: url(free-vectorgrafik-&;-blumen-und-wirbelt_49-195.jpg) "> <p> Das ist unsere Gruppe beim Auswerten der Sportergebnisse.<p> <img src="Sport1.jpg" align="left" hspace="40" vspace="20" border="5" width="300" height="200" alt="TV-Damen beim Auswerten" title="Beim Auswerten" name="Beim Auswerten" /> <p>Wir TV-Damen bei der Auswertung. Unser Kollege hilft uns bei der Auswertung. An einem heißen Tag saßen wir unter einem Baum, der viel Schatten spendete.</p> <p> </body><html> - 16 Meine erste Homepage Bilder verlinken zu www.google.de <html> <head> <title>Bild</title> </head> <body style="background-image:url(Sport2.jpg)" "width=800px; height=800px"> Das ist unsere Gruppe beim Auswerten der Sportergebnisse. <a href="http://www.google.de/"> Eine Verlinkung zu Google <img src="Sport1.jpg" align="left" hspace="40" vspace="20" border="5" width="300" height="200" alt="TV-Damen beim Auswerten" title="Beim Auswerten" name="Beim Auswerten" /></a> </p> <p>Wir TV-Damen bei der Auswertung. Unser Kollege hilft uns bei der Auswertung. An einem heißen Tag saßen wir unter einem Baum, der viel Schatten spendete.</p> </body> </html> Hier erscheint die Hand für die Internetverlinkung Daten strukturieren Unordered List <p> Folgende Qualifikationen wurden durchgeführt: <ul> <li><b>Weitsprung</b></li> <li><i>75-m-Lauf</i></li> <li><i>100-m-Lauf</i></li> <li><b>Ballwurf</b></li> </ul> </p> - 17 Meine erste Homepage Ordered List <ol> <li><b>Weitsprung</b></li> <li><i>75-m-Lauf</i></li> <li><i>100-m-Lauf</i></li> <li><b>Ballwurf</b></li> </ol> Folgende Qualifikationen wurden durchgeführt: <ul type="circle"> <li><b>Weitsprung</b></li> <li><i>75-m-Lauf</i></li> <li><i>100-m-Lauf</i></li> <li><b>Ballwurf</b></li> </ul></p> <p> <ul type="square"> <li><b>Weitsprung</b></li> <li><i>75-m-Lauf</i></li> <li><i>100-m-Lauf</i></li> <li><b>Ballwurf</b></li> </ul> </p> </body> </html> - 18 Meine erste Homepage Mit Einrückung <html> <head> <title>Bild</title> </head> <body style="background: url(free-vector-grafik-&;-blumen-und-wirbelt_49-195.jpg) "> <p> Das ist unsere Gruppe beim Auswerten der Sportergebnisse.<p> <img src="Sport1.jpg" align="left" hspace="40" vspace="20" border="5" width="300" height="200" alt="TV-Damen beim Auswerten" title="Beim Auswerten" name="Beim Auswerten" /> <p>Wir TV-Damen bei der Auswertung. Unser Kollege hilft uns bei der Auswertung. An einem heißen Tag saßen wir unter einem Baum, der viel Schatten spendete.</p> <p> Folgende Qualifikationen wurden durchgeführt:<p> <ul> <li>Muss-Qualifikation:<br /> Weitsprung, 75-m-Lauf, Kann-Qualifikation</li> <li>Kann-Qualifikation:<br /> 100-m-Lauf, Ballwurf</li> </ul> </body></html> - 19 Meine erste Homepage Tabelle erstellen <html> <head> <title>Tabelle</title> </head> <body> <table border="0"> <style type="text/css"> table { border: solid 1px black; border-collapse:collapse; } td, th { border: dotted 1px black; padding: 5px; } </style> <thead> <tr> <th>Name</th> <th>Straße</th> <th>PLZ</th> <th>Ort</th> </thead> <tbody> <tr> <td>Johanna Müller</td> <td>Kirchenstraße 3</td> <td>87700</td> <td>Mindelheim</td> </tr> <tr> <td>Franz Kaiser</td> <td>Karlstraße 2</td> <td>86825</td> <td>Bad Wörishofen</td> </tr> </tbody> </table> </body> </html> table = border = Tabelle Rahmen solid 1 px = einfache Linie schwarz border-collapse = der Text soll nicht zu weit an den Rahmen heranreichen td = Table Data (eine einzelne Zelle th = Table head (Spaltenkopf) dotted = punktierter Rahmen padding = der Text soll 5 px vom Text entfernt sein - 20 Meine erste Homepage Zelle verbinden <html> <head> <title>Tabelle</title> </head> <body> <table border="0"> <style type="text/css"> table { border: solid 1px black; } td, th { border: dotted 1px black; padding: 5px; } table { border: solid 1px black; border-collapse:collapse; } td, th { border: dotted 1px black; } </style> <thead> <tr> <th>Name</th> <th>Straße</th> <th>PLZ</th> <th>Ort</th> </thead> <tbody> <tr> <td>Johanna Müller</td> <td>Kirchenstraße 3</td> <td>87700</td> <td rowspan="2">Bad Wörishofen</td> </tr> <tr> <td>Franz Kaiser</td> <td>Karlstraße 2</td> Hier Zeile Bad Wörishofen weglassen! <td>86825</td> </tr> </tbody> </table> </body> </html> - 21 Meine erste Homepage Tabellen schattieren <html> <head> <title>Tabelle</title> </head> <body> <table border="0"> <style type="text/css"> table { border: solid 1px black; } th { padding: 5px; background-color: red; color: white; } td { font-family: Arial; monospace; font-size: 1.1em; background-color: yellow; color: #6A5ACD; } </style> <thead> <tr> <th>Name</th> <th>Straße</th> <th>PLZ</th> <th>Ort</th> </thead> <tbody> <tr> <td>Johanna Müller</td> <td>Kirchenstraße 3</td> <td>87700</td> <td rowspan="2">Bad Wörishofen</td> </tr> <tr> <td>Franz Kaiser</td> <td>Karlstraße 2</td> <td>86825</td> </tr> </tbody> </table> </body> </html> - 22 Meine erste Homepage Die wichtigsten HTML-Befehle Gerüst <html> <head> <title>Meine erste Homepage</title> </head> <body>Meine erste Homepage</body> </html> Abstände <p>Für einen größeren Abstand steht "paragraph".<br /> Für einen kleinen Zeilenumbruch steht "break" </p> Überschriften <body> <h1>Absätze</h1> bis <h7> - Abstände zum Text werden automatisch erzeugt Formatierungen im Text <b>Text</b>= fett <i>Text</i>= inverse = kursiv <strong>Text/strong> = <sup>Text</sup> = hochstellen (superior> <sub>Text</sub> = tiefstellen (subordinate) <u>Text</u> = underlined = unterstrichen Sonderzeichen für EURO = "&euro;" In den meta-tags am Anfang der html-Datei steht oft UTF-8 für den westeuropäischen Zeichensatz. Stylesheets – farbiger Absatz <html> <head> <title>Style Sheets einsetzen</title> </head> <body> <h1 style="color: red">Überschrift 1</h1> <p style="color: green; font-family: Arial"> Ein erster Absatz. </p> <p style="color: blue"> Ein zweiter Absatz. </p> </body></html> - 23 Meine erste Homepage Farbige Texte Ich hoffe, Ihnen gefällt die <span style="color:red">Seite</span>. Schriftgröße ändern <i><span style="color:blue; font-size:200%">Formatierungen</span></i> (hier ist der Text kursiv, Farbe blau, Größe 200 %) Stylesheets im Kopf <html> <head> <title>Style Sheets einsetzen</title> <style type:"text/css"> h1 { color: red; font-family: ARIAL; } p{ color: blue; font-family: Arial; font-size: 24px; } </style> </head> <body> <h1>1. Überschrift</h1> <p> Ein erster Absatz. </p> <p> Ein zweiter Absatz. </p> </body> </html> Absätze formatieren <p style="font-weight: bold"> Ein zweiter Absatz. </p> <p style="font-size: 12px"> Ein dritter Absatz. </p> <p style="color: green"> Ein vierter Absatz. </p> - 24 Meine erste Homepage Linien <HR> = Tag für Linie ALIGN = Ausrichtung nach rechts und links a) Linienlänge <HR WIDTH=100%> = Linie zieht sich horizontal über das gesamte Fenster b) Linienausrichtung <HR WIDTH=50% ALIGN=LEFT> = Linie ist um die Hälfte reduziert und linksbündig siehe auch <HR WIDTH=50% ALIGN=RIGHT> <HR WIDTH=50% ALIGN=CENTER> c) Linienstärke <HR WIDTH=50% ALIGN=CENTER SIZE=5> d) Gefüllte Linie <HR WIDTH=50% ALIGN=CENTER SIZE=5 NOSHADE> e) Linie mit Farbe <P> <HR WIDTH=100% FONT COLOR=blue></ ><p> Vor und nach den Linien ist es wichtig einen Absatz <p>… </p> zu setzen. Bilder Verwenden Sie *.jpg für Fotos und *.png, *.gif für Bilder, Embleme, Schaltflächen. Legen Sie alle Ihre Bilder in die Homepage-Datei. <html> <head> <title>Bild</title> </head> <body> <p>Das ist unsere Gruppe beim Auswerten der Sportergebnisse.</p> <p> <img src="Sport1.jpg" border="5" width="300" height="200" alt="TV-Damen beim Auswerten" title="Beim Auswerten" /> </p> </body> </html> border = Umrahmung width = Breite height = Höhe alt = Alternativtext (falls das Bild nicht sichtbar ist) title und name = erscheint im Bild, wenn man mit dem Cursor über das Bild fährt - 25 Meine erste Homepage Bilder in Absätze ausrichten <img src="Sport1.jpg" align="right" border="5" width="300" height="200" alt="TV-Damen beim Auswerten" title="Beim Auswerten" name="Beim Auswerten" /> align = horizontale Ausrichtung valign = vertikale Ausrichtung Bild als Hintergrund <body style="background-image:url(Sport2.jpg)" "width=800px; height=800px"> Bilder zum Google verlinken <a href="http://www.google.de/"> Eine Verlinkung zu Google <img src="Sport1.jpg" align="left" hspace="40" vspace="20" border="5" width="300" height="200" alt="TV-Damen beim Auswerten" title="Beim Auswerten" name="Beim Auswerten" /></a> E-Mails <a href=mailto:[email protected] >Schreiben Sie mir ein E-Mail</a> Farbiger Seitenhintergrund <body style="background-color: yellow"> Aufzählungen Unordered List <ul> <li><b>Weitsprung</b></li> <li><i>75-m-Lauf</i></li> <li><i>100-m-Lauf</i></li> <li><b>Ballwurf</b></li> </ul> </p> Ordered List <ol> <li><b>Weitsprung</b></li> <li><i>75-m-Lauf</i></li> <li><i>100-m-Lauf</i></li> <li><b>Ballwurf</b></li> </ol> - 26 Meine erste Homepage Tabellen schattieren <html> <head> <title>Tabelle</title> </head> <body> <table border="0"> <style type="text/css"> table { border: solid 1px black; } th { padding: 5px; background-color: red; color: white; } td { font-family: Arial; monospace; font-size: 1.1em; background-color: yellow; color: #6A5ACD; } </style> <thead> <tr> <th>Name</th> <th>Straße</th> <th>PLZ</th> <th>Ort</th> </thead> <tbody> <tr> <td>Johanna Müller</td> <td>Kirchenstraße 3</td> <td>87700</td> <td rowspan="2">Bad Wörishofen</td> </tr> <tr> <td>Franz Kaiser</td> <td>Karlstraße 2</td> <td>86825</td> </tr> </tbody> </table> </body></html>