Tabellen, horizontale Linien, Bilder

Tabellen

Grundstruktur einer Tabelle mit 2 Zeilen, 2 Spalten zum Kopieren

<table border="1">
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
</table>

<tr> steht für "table row" und <td> für "table data", also die einzelne Zelle.

Beispiel einer Tabelle:
HTML-Tag Bedeutung
<table> Beginn der Tabelle
<tr> "table row", Beginn der Tabellenzeile
<td> "table data", Beginn einer Tabellenzelle
<th> "table head", Beginn einer Tabellenzelle im Tabellenkopf (dies bedeutet eine andere Formatierung)
<thead> Für den Tabellenkopf einer langen Tabelle. Dies bewirkt, dass der Tabellenkopf beim Drucken auf jeder neuen Seite wiederholt wird.

Im Tabellen-Tag <table> kann eine Umrandung angegeben werden: <table border="1">

Code der Tabelle oben

<table border="1">
		<thead>
			<tr>
				<th>HTML-Tag</th>
				<th>Bedeutung</th>
				</tr>
		</thead>
		<tr>
			<td><table></td>
			<td>Beginn der Tabelle</td>
			</tr>
		<tr>
			<td><tr> </td>
			<td>"table row", Beginn der 
			Tabellenzeile</td>
			</tr>
		<tr>
			<td><td></td>
			<td>"table data", Beginn 
			einer Tabellenzelle</td>
		</tr>
     		<tr>
			<td><th></td>
			<td>"table head", Beginn einer 
			Tabellenzelle im Tabellenkopf 
			(dies bedeutet eine andere Formatierung)
			</td>
		</tr>
     		<tr>
			<td><thead></td>
			<td>Für den Tabellenkopf einer langen 
			Tabelle. Dies bewirkt, dass der Tabellen-
			kopf beim Drucken auf jeder neuen Seite 
			wiederholt wird.</td>
		</tr>
</table>

Fehler im eigenen Code finden

Auf validator.w3.org kannst du deinen Code auf Fehler prüfen.

Eine noch bequemere und schnellere Möglichkeit ist, im Firefox den Quellcode anzeigen zu lassen. Fehler sind dort rot markiert.

Informiere dich hier, was es bedeutet, "validen Code" zu schreiben. Lasse deinen Code, den du bisher geschrieben hast, auf Validität prüfen.

Zellen verbinden

A B C über mehrere
Zeilen mit
rowspan="2"
1 und 2
mit colspan="2"
3

Code der Tabelle

<table border="1">
	<tr>
		<td>A</td>
		<td>B</td>
		<td>C</td>
		<td rowspan="2">über mehrere<br /> 
		Zeilen mit <br />rowspan="2"
		</td>
	</tr>
	<tr>
		<td colspan="2">1 und 2 <br /> mit 
		colspan="2"
		</td>
		<td>3</td>
	</tr>
	</table>		

Horizontale Linien einfügen

Das Tag hierfür ist <hr>.
Auch hier brauchst du wie beim Zeilenumbruch <br> kein schließendes Tag.

Bilder einbinden

Beispiel: Ein Bild von mir

Code

<img src="bilder/ich.jpg" width="50" alt="Ein Bild von mir">

Alternativer Text wird z.B. in Suchmaschinen angezeigt.

Übung 2: Baue in HTML diese Tabelle nach: uebung2.pdf

Übung 3: Erstelle in Tabellenform einen Steckbrief von dir, in dem du Hobbies und Interessen aufzählst und anderes Interessantes über dich. Binde auch ein kleines Bildchen von dir ein oder ein Bild zu einem Hobbie.
Benenne die Datei mit deinem Vornamen und Erweiterung .html und stelle die Datei im Tausch-Verzeichnis deiner Klasse in den Ordner html.

Weiter geht's mit Links.