Tabellen
 
Tabellen mit HTML zu machen ist nicht schwer:

Hier seht ihr eine Beispiel-Tabelle + Erkläung!

<table border="1"> bzw. </table>
border="1" beutet wie die Tabelle aussieht. Das Aussehen könnt ihr auf der Unterseite "Tabellen-Ansichten" sehen.

<tr> bzw. </tr>
Der Befehl <tr> sagt dem PC das er eine neue Zeile anfangen soll.

<td> bzw. </td>
Der Befehl sagt dem Computer, er soll eine neue Spalte anfangen

<th> bzw. </th>
Der Befehl macht das selbe wie <td> nur das in der Zelle alles fett geschrieben wird.

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

So sieht das dann aus:
Hier Text 1


So das war jetzt das Grundliegende!
Nur kommen wir in den fortgeschrittenen Teil!


Farben:

Wie man Farben in Tabellen einblendet sieht man auf der extra Seite für Farben!
Hier drauf klicken um auf die Seite zu kommen.


Vordifinierte Zellengröße:

<colgroup width="200" span="3"></colgroup>
Dieser Befehl sagt dem PC, er soll drei Spalten 200pixel groß machen!
width="200" bedeutet wie groß. Der Wert ist variabel.
span="3" bedeutet die Anzahl der Spalten

<table border="1">
<colgroup width="200" span="1">
       <tr>
              <td>
                      Hier Text 1
              </td>
              <td>
                      Hier Text 2
              </td>
       </tr>
</table>

Das kommt dabei raus:
Hier Text 1 Hier Text 2

<table border="1" cellspacing="10" cellpadding="5">
    <tr>
          <td>
                  Text 1
          </td>
    </tr>
</table>

cellspacing gibt an, wie weit eine Zelle vom Tabellen-Rand entfernt ist.
cellpadding gibt an wie weit der Text vom Zellen-Rand entfernt ist.

Und so sieht das aus:
Text 1


Dreiteilung einer Tabelle:

Man kann eine Tabelle auch drei Teilen!

<table border="1" rules="groups">
    <thead>
        <tr>
                <th>
                        Text Überschrift
                </th>
                <th>
                        Text Überschrift 2
                </th>
        </tr>
    </thead>
    <tfoot>
        <tr>
                <td>
                        Text Fuß
                </td>
                <td>
                        Text Fuß 2
                </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
                <td>
                        Text Körper
                </td>
                <td>
                        Text Körper 2
                </td>
        </tr>
    </tbody>
</table>

<thead> steht für table head = Tabellen Kopf. Das heißt das dieser Teil ganz oben in der Tabelle steht!
<tfoot> steht für table foot = Tabellen Fuß. Das heißt das ist der Teil ganz unten in der Tabelle.
<tbody> steht für table body = Tabellen Körper. Das heißt dieser Teil steht zwischen <thead> und <tfoot>.

Beachte!
<thead> und <tfoot> darf nur einmal in der Tabelle vorkommen! <tbody> mehrmals!
Wenn keins der drei Vorhanden ist, nimmt er die Reihe in der die Tabelle geschrieben wurde!
Wenn eines genommen wird müssen alle genommen werden in der Reinfolge <thead> -> <tfoot> -> <tbody>.

Und so sieht das von oben aus:
Text Überschrift Text Überschrift 2
Text Fuß Text Fuß 2
Text Körper Text Körper 2


Zellen verbinden:

Man kann auch Zellen verbinden, das macht bei Überschriften Sinn.

<table border="1">
    <tr>
            <td colspan="2">
            Text Überschrift
            </td>
    </tr>
    <tr>
            <td>
            Text Spalte 1
            </td>
            <td>
            Text Spalte 2
            </td>
    </tr>
</table>

Das Ergebnis:
Text Überschrift
Text Spalte 1 Text Spalte 2


oder so:

<table border="1">
    <tr>
            <td rowspan="2">
            Text Überschrift
            </td>
            <td>
                    Text 1
            </td>
    </tr>
    <tr>
            <td>
                    Text 2
            </td>
    </tr
</table>
Text Überschrift Text 1
Text 2


colspan gibt an über wie viele Spalten du die Zelle stecken wollt.
rowspan gibt an über wie viele Zeilen sich die Zelle in der Spalte stecken soll.
In diesem Fall sind es jeweils 2!


Tabellen-Überschriften:

Für Tabellen-Überschriften fügt mal zwischen <table border="1"> und <tr> folgendes ein:
<caption>Text</caption

So kann das dann aussehen:

Überschrift
Text

Der Quelltext:

<table border="1">
    <colgroup width="200"></colgroup>     <caption>Überschrift</caption>
    <tbody>
        <tr>
            <td>Text</td>
        </tr>
    </tbody>
</table>
 
   
 
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=