Workshop: HTML und CSS erlernen (Teil 2)

Im zweiten Teil unseres Artikelworkshops “HTML und CSS erlernen”, erklären wir Ihnen heute wie Sie Tabellen und Listen richtig erstellen. Unser Workshop ist genau das richtige für Einsteiger, welche ihre eigene Website von Grund an selbst erstellen möchten, oder auch für Fortgeschrittene, welche unseren Workshop als Nachschlagewerk nutzen möchten.

In der letzten Woche startete dieser Workshop auf Private-Words.com. Hier lernen Sie, wie Sie in einfachen Schritten Websites selbst erstellen können. Heute zeigen wir Ihnen, wie Sie Tabellen und Listen richtig erstellen.

Listen werden Häufig für die Seiten-Navigation verwendet, aber man kann sie auch zum formatieren von Texten und anderen Bereichen verwenden. Wenn wir von Listen reden, unterscheiden wir zwischen geordneten Listen

<ol>...</ol>

und ungeordneten Listen.

<ul>...</ul>

Listen werden wie folgt angelegt (Beispiel einer Navigation):

Ungeordnete Liste

<ul>
	<li> Home </li>
	<li> Blog </li>
	<li> Impressum </li>
</ul>

Hier werden die li-Tags mit punkten angeführt.

Geordnete Liste

<ol>
	<li> Home </li>
	<li> Blog </li>
	<li> Impressum </li>
</ol>

Hier werden die li-Tags mit Zahlen angeführt.

Bei beiden Listen werden die li-Tags, auf der Website serienmäßig untereinander aufgeführt.

Tabellen sind ähnlich wie Listen aufgebaut. Die nötigen Tags sind:

Definiert die Tabelle

<table>...</table>

Definiert die Zeile

<tr>...</tr>

Definiert die Spalte

<td>...</td>

Ein Beispiel zur Veranschaulichung:

<table>

       <tr>

           <td>Zeile 1a</td>

           <td>Zeile 1b</td>

       </tr>

       <tr>

           <td>Zeile 2a</td>

           <td>Zeile 2b</td>

       </tr>

</table>

Ersetzt man den „td“ durch einen „th“-Tag, so wird der Text automatisch fett und zentriert dargestellt. Es ist ebenfalls möglich einen Rand um die Tabelle zu ziehen, dazu muss das Attribut „border“ festgelegt werden.

Nutzen wir beides sieht es wie folgt aus:

<table border="1">

                  <tr>

                      <th>Kopfzeile a</th>

                      <th>Kopfzeile b</th>

                  </tr>

                  <tr>

                      <td>Zeile 2a</td>

                      <td>Zeile 2b</td>

                  </tr>

</table>

Natürlich kann man auch Spalten verbinden. Dazu benötigen wir den „colspan“ oder „rowspan“ Befehl. Der Colspan verbindet die Zellen spaltenweise und der Rowspan verbindet sie zeilenweise.

Benutzen wir beispielsweise

<table border="1">

                  <tr>

                      <td colspan="2">td 1</td>

                      <td>td3</td>

                  </tr>

                  <tr>

                      <td>td4</td>

                      <td>td5</td>

                      <td rowspan="9">td6</td>

                  </tr>

                  <tr>

                      <td>td7</td>

                      <td>td8</td>

                  </tr>

</table>

so verbinden wir die Kästchen 1 und 2 horizontal mit Colspan und die Kästchen 9 und 6 mit Rowspan.

Natürlich ist es auch möglich die Kästchen 4,5,8 und 7 zu verbinden das sieht dann wie folgt aus:

<table border="1">

                  <tr>

                      <td colspan="2" rowspan="2">td1</td>

                      <td>td3</td>

                  </tr>

                  <tr>

                      <td>td6</td>

                  </tr>

                  <tr>

                      <td>td7</td>

                      <td>td8</td>

                      <td>td9</td>

                  </tr>

</table>

Wichtig ist, dass in jeder Zeile die gleiche Spaltenanzahl vorhanden ist, da es sonst zu Komplikationen kommt.

Alle Teile des Workshops jetzt kostenlos abrufen:

1. Grundstruktur einer HTML-Datei
2. Tabellen und Listen
3. Textformatierung
4. Links, Videos & Bilder
5. Formulare
6. Die erste CSS-Datei

Artikelbild: Sebastian Fuss  / pixelio.de