Table width, Cellpadding, Cellspacing und Colspan
- Home
- Tutorials
- HTML/Web
- HTML & CSS Tutorial für Anfänger
- Table width, Cellpadding, Cellspacing und Colspan
Für die Table Width benötigen wir das Wort width:
<table border="1" width="200">
Inhalt
</table>
Damit hätten wir eine Tabelle erstellt, deren Breite(table width) 200 Pixel beträgt.
Wenn wir jedoch wollen, dass unsere Tabelle eine relative Breite(table width) hat, also immer einen bestimmten Bereich unseres Browsers einnimmt, dann können wir das mit % lösen:
<table border="1" width="100%">
Inhalt
</table>
Damit erreichen wir, dass egal wie breit der Browser gezogen wird, unsere Tabelle immer die gesamte Breite einnimmt.
Wenn wir Platz zwischen dem Text und dem Rand der Zelle in der dieser Text steht, brauchen wir das Wort cellpadding :
<table border="1" cellpadding="5">
Inhalt
</table>
Für den Fall das der Platz nicht zwischen dem Text und dem Rand sein soll, sondern zwischen den Zellen selbst, brauchen wir das Wort cellspacing:
<table border="1" cellspacing="5">
Inhalt
</table>
Als letzten Teil dieses Tutorials zeige ich euch noch ein weiteres magisches Wort, das ihr dafür verwenden könnt, mehrere Zellenbreiten für eine Zelle zu verwenden.
Das können wir mit dem Wort colspan (collumn=spalte; span=sich spannen über).
Nehmen wir also das Beispiel aus dem letzten Tutorial und fügen dort eine Zelle ein, die so breit sein soll, wie drei Zellen und die in der Schriftgröße <h2> Überschrift anzeigen soll.
<tr>
<th colspan="3">
<h2>Überschrift</h2>
</th>
</tr>
HTML & CSS Tutorial für Anfänger
-
Einführung in HTML
-
Lektion1.1
-
Lektion1.2
-
Lektion1.3
-
-
Verschiedene Tags
-
Lektion2.1
-
Lektion2.2
-
Lektion2.3
-
Lektion2.4
-
Lektion2.5
-
Lektion2.6
-
-
Einführung in CSS
-
Lektion3.1
-
Lektion3.2
-
Lektion3.3
-
Lektion3.4
-
Lektion3.5
-
Lektion3.6
-
-
Tags mit CSS stylen
-
Lektion4.1
-
Lektion4.2
-
Lektion4.3
-
Lektion4.4
-
Lektion4.5
-
-
Wichtige Einsteigertricks
-
Lektion5.1
-
Lektion5.2
-
Lektion5.3
-
Lektion5.4
-
Lektion5.5
-
Lektion5.6
-
Lektion5.7
-
-
CSS in der Praxis
-
Lektion6.1
-
Lektion6.2
-
Lektion6.3
-
Lektion6.4
-
Lektion6.5
-
-
Formulare und Dropdown-Listen
-
Lektion7.1
-
Lektion7.2
-
Lektion7.3
-
Lektion7.4
-
Lektion7.5
-