Mitschrift 14.04.2014
TAG 7Besprechung der letzten Kochbuchprojekte
<em>= physikalisches Tag, welches Text als besonders wichtig hervorhebt
Meta-info: empatisch
Hinweis:
- Textausrichtung in Tabellen -
- v-align=top (vertical align), damit in der Tabelle der Text linksoben anfängt: <ol style="v-align: top";>...
- alt-Attribut - alternativtext, falls Bild nicht <img border="0" alt="" src="../bilder/vegetarisch1.jpg" width="30%" height="100%" />
Tipp: bevor wir ein Projekt rausgeben - immer nochmal den Funktionstest für alle Seiten/Elemente/Links machen! In der IT spricht man von Konsistenz - ist es einheitlich auf jeder Seite dargestellt und tituliert?
Tabellen
Link zu Selfhtml/Tabellenneues dokument - tabelle1.hml
ähnlich wie bei Listen, brauchen wir auch bei Tabellen einen umfassenden Tag, der zeigt: "dieser Bereich zeigt eine Tabelle!"
<table>-Tag
Achtung vor Falschschreibung - Blaufärbung im Browser zeigt Richtigkeit an:
also nicht tabel sondern table!
benötigt schließendes Tag: </table>
Wie ist eine Tabelle aufgebaut?
klassische Tabelle - bspw. Excel:
Eine Tabelle besteht aus:
- Spalten
- Zeilen
<th>-Tag (table head / erste Zeile als Ersatz für <td> in der ersten Row!
- ist automatisch fett und zentriert! (kann ich nur mit CSS "knacken"/verändern)
- bildet die Spaltenüberschrift
- sind für Überschriften reserviert
innerhalb einer Row, benötigen wir Datenzellen:
<td>-Tag (table data/Tabellenzelleninhalt) hier kommen Inhalte rein!
-> alle Tags in einer Tabelle benötigen schließende Tags!
Tipp: Rahmen um die Tabelle:
Damit wir eine Tabelle sichtbar machen können, setzen wir innerhalb des table-tags ein Attribut ein: border="1":
<table border="1">...
Matrix (einfach):
<!doctype html>
<html>
<head>
<title>Tabelle 1</title>
</head> <!-- Tabellenrumpf -->
<table border ="1">
<tr> <!-- Tabellenzeile -->
<td>Tabellenzelle</td><!-- Tabellenzelle (table-data-cell) -->
<td>Tabellenzelle</td>
<td>Tabellenzelle</td>
<td>Tabellenzelle</td>
</tr>
<tr> <!-- Tabellenzeile -->
<td>Tabellenzelle</td><!-- Tabellenzelle (table-data-cell) -->
<td>Tabellenzelle</td>
<td>Tabellenzelle</td>
<td>Tabellenzelle</td>
</tr>
<tr> <!-- Tabellenzeile -->
<td>Tabellenzelle</td><!-- Tabellenzelle (table-data-cell) -->
<td>Tabellenzelle</td>
<td>Tabellenzelle</td>
<td>Tabellenzelle</td>
</tr>
</table>
<body>
</body>
</html>
 |
| tabelle1.html - Ausgabe im Browser |
Matrix mit <th>-Tag / Head :
<!doctype html>
<html>
<head>
<title>Tabelle 1</title>
</head> <!-- Tabellenrumpf -->
<table width="400 "border ="3">
<tr> <!-- Tabellenzeile -->
<th>Headline 1</th><!--Spaltenüberschrift: Ausgabe automatisch fett & zentriert)-->
<th>Headline 2</th>
<th>Headline 3</th>
<th>Headline 4</th>
</tr>
<tr> <!-- Tabellenzeile -->
<td width="25%">Tabellenzelle</td><!-- Tabellenzelle (table-data-cell) -->
<td>Tabellenzelle</td>
<td>Tabellenzelle</td>
<td>Tabellenzelle</td>
</tr>
<tr> <!-- Tabellenzeile -->
<td>Tabellenzelle</td><!-- Tabellenzelle (table-data-cell) -->
<td>Tabellenzelle - <br /> wird zur Anschaulichkeit mal größer gemacht
</td>
<td>Tabellenzelle</td>
<td>Tabellenzelle</td>
</tr>
<tr> <!-- Tabellenzeile -->
<td>Tabellenzelle</td><!-- Tabellenzelle (table-data-cell) -->
<td>Tabellenzelle</td>
<td> </td>
<td>Tabellenzelle</td>
</tr>
</table>
<body>
</body>
</html>
 |
| tabelle1-modifiziert.html - Table mit Head :) |
Tabelle-Aufbau in HTML:
Rumpf > Reihe (ist Container für Zellen) > Zelle(n)
-> aus den nebeneinandergestellten Zellen heraus bilden sich Spalten!
Aufgabe: Vergrößern Sie die Zelleninhalte durch längeren Text und Breaks in den Zellen. Experimentieren Sie mit den Zelleninhalten - nehmen Sie welche heraus etc.
Regeln:
- Hauptregel einer Zelle: Durch Inhalt oder andere Angaben, ist die maximale Breite einer Spalte gültig!
Die Zellenbreite wird vom Inhalt bestimmt!!! die Tabelle ist von Grund aus dynamisch: die Zellen-Höhe und -Breite passt sich automatisch der Länge des Textes an. - Hinweis: Inhalt vor Attributangaben! gebe ich bspw 25% für die Zellenbreite an, aber der Text einer anderen Zelle in der Spalte ist größer (aufgrund des Inhaltes), dann ist die Prozentangabe nichtig!
- der Browser verzeiht auch nicht geschlossene table datas - aber es ist syntaktisch nicht korrekt - beeinflusst die Lesbarkeit negativ! Bitte nicht versuchen Zeichen zu sparen, sondern syntaktisch korrekt arbeiten!
- Egal ob man eine Zelle leer lässt oder eine <td> weglässt (fehlende Zelle) - das Ergebnis ist eine Lücke in der Tabelle - wenn wir eine leere Zelle produzieren wollen, besser ein erzwungenes Leerzeichen einsetzen: sonst werden die Zellen aufgerückt :(
- -> ERGO: die Anzahl der <td>s in den <tr>s muss immer gleich sein!!!
Welche Attribute können wir dem table-Tag geben?
hier ein Link zu Selfhtml - hier wird angegeben, welche Attribute die Table-Tags annehmen können!
Nochmal: Attribute sind Paare aus Schlüssel & Wert. Sie werden durch ein Leerzeichen getrennt!
- border="" (bspw. 1,5...)
- Rahmenlinien
- verleiht der Tabelle ihr Erscheinungsbild durch Setzung eines Rahmens
- width="" (bspw. 200, 800...)
- = Breite der Tabelle
- nur nummerischer Wert, keine Maßeinheiten!
- Hinweis zur Mindestbreite: die Tabelle kann nur so klein werden, wie der größte Inhalt einer Zelle an Zeichen hat bzw. an Platz benötigt!
- wir können die Width auch in jede einzelne Zelle schreiben: <td width="25%"
- Wir müssen es nicht in jeder Zelle eingeben, da maximal nur die Gesamtbreite des Browserfensters der Tabelle als Breite zur Verfügung steht!
- bgcolor="" (kann ich nicht nur für table sondern auch für body nutzen)
- Backgroundcolor/Hintergrundfarbe
- kann direkt gesetzt werden
- sowohl namedcolor als auch Hexadezimalangaben!
- hat nichts mit CSS zu tun!
- wenn wir die border rausnehmen bzw. auf null setzen, sehen wir dank der Hintergundfarbe trotzdem Zellen! :)
- cellspacing="" (bspw. 10...)
- Außenabstand um die Zellen!!!
- der Abstand der einzelnen Zellen ist gewachsen - 10 px bei "10", oder 30 px bei "30"
- der Außenrahmen wächst mit!
- =Abstand der einzelnen Zellen zur nächsten Zelle und zum Rand!
- cellpadding="" (bspw. 10)
- Innenabstand in der Zelle!!!
- der Abstand des Zelleninhaltes zum Zellenrand ist gewachsen
- valign=""
- mit diesem Attribut können wir alle Zelleninhalte ausrichten
- <td valign="">
- top
- middle
- bottom
- (baseline)
- colspan="" ("1"... maximal Anzahl der Spalten)
- column span (=Zellen verbinden) -> in xls ganz easy
- wenn ich jetzt in die <td colspan="2" angebe, dann schiebt er die anderen Zeilen nach rechts...
ERGO: Wir müssen eine Zelle entfernen!!!
Aufgabe: Bitte verbinden Sie die beiden Zellen neben der Bundestagszeile:
Lösung: eine der beiden tds löschen und bei der anderen <td colspan="2"> eintragen. Tadaaa! :)
- Hinweis: Die Summe aller colspans muss nachher wieder 4 (Anzahl der tds wie bei den anderen Zeilen!) ergeben
Aufgabe: jetzt 3 Zellen verbinden und nachher sogar 4 Zellen verbinden!
- rowspan="" ("1"... maximal Anzahl der Zeilen!)
- Reihen verbinden!
- also in der einen tr - die td
- eine Zelle erstreckt sich in einer Spalte über mehrere Zeilen hinweg (rowspan = Zeilen spannen).
- Die Angabe ist nur wirksam, wenn die Tabelle mindestens so viele Zeilen besitzt wie angegeben. - klar! ;)
Aufgabe: bauen Sie diese Tabelle nach! - colspan und rowspan!
Tipps zum Tabellenbau!
Wenn wir eine Tabelle planen, dann zunächst auf dem Papier!
von Außen nach Innen arbeiten!
Am Besten keine Tabellen mit copy & paste erstellen, sondern besser immer von Grund auf neu erstellen.
- erst Grundgerüst (HTML, head, body)
- dann Tabellenrumpf <table></table> (evtl border= setzen)
- dann Tablerows <tr></tr>
- dann Table Data reinsetzen (Zellen) <td></td>
- und mit Inhalten füllen
- zuletzt formatieren mit weiteren Attributen
(Haus-)Aufgabe: Rechnungsmuster nachbauen
Ziel aus der HTML-Datei eine pdf generieren
- audrucken und
- alles mit Linien in Tabellenfelder setzen!
Rechnungen, ...
Keine Kommentare:
Kommentar veröffentlichen