Du befindest Dich hier: Startseite --> Hilfen zu GC.com --> Listing schön darstellen --> einfache Tabellen erstellen
Schrift formatieren | Text ausrichten | einfache Tabelle erstellen | Bilder einfügen | Beispielcode
Tabellen sind gar nicht so schwierig ;)
| <table width="830" border="1" cellpadding="5" cellspacing="1"> <tr> <td width="400"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> |
Die hier abgebildete Tabelle (ohne den Inhalt, nur leer) hat nebenstehenden Code. Schauen wir uns den unten genauer an
|
Am Anfang und Ende steht das Table-Tag (wir errinnern uns an die Verschachtelung --> was zuerst aufgeht wird zuletzt geschlossen).
Im Tabeltag am Anfang stehen folgende Attribute:
width="830 ---> Breite der gesammten Tabelle
border="1" ---> Bedeutet dass die Tabelle einen Rahmen von 1Pixel Breite hat. Wenn man genau hinschaut sieht man in den <td>-Tags den erzwungenen Leerschlag . Dieser bewirkt dass die Zelle nicht leer ist, denn bei einer leeren Zelle wird kein Rahmen angezeigt.
cellpadding="5" --> Abstand vom Text zum Tabellenrand. In diesem Fall 5Pixel. Würde man hier den Wert auf 0 setzen, dann würde der Text direkt am Rahmen kleben.
cellspacing="1" --> Abstand zwischen den einzelnen Zellen. Ein Beispiel dazu werde ich unten noch geben damit man einen Vergleich hat
So, nun haben wir die wichtigsten Attribute unserer Tabelle. Was noch nicht klar ist wieviele Spalten und wieviele Zeilen denn eigentlich unsere Tabelle hat.
Der Tag <tr> eröffnet eine neue Zeile. Darin eingebettet wird dann der <td> welcher die Spalte ausmacht. Wir haben oben also einmal <tr>, 2x <td> und dann wird der erste <tr> geschlossen. Bis dahin hat unsere Tabelle also 1 Zeile, 2 Spalten. Nun wiederholt sich der ganze Teil mit <tr> 2x <td> nochmals, also eine zweite Zeile, wiederum mit zwei Spalten.
Wichtig ist immer dass die Verschachtelung exakt eingehalten wird. Der Übersichtlichkeit halber habe ich deshalb auf Inhalt in den Zellen verzichtet.
Der Inhalt kommt immer zwischen <td></td>. Da kann man also ganz normal rein schreiben und formatieren wir zuvor erklärt. Ebenfalls kann man auch ein Bild einfügen gemäss Erklärung.
Im ersten <td> steht noch: width="400"
Diese Zelle wird mit einer Breite von 400 Pixel definiert. Da die Tabelle total 830Pixel breit ist, wird die hintere Spalte automatisch 430 Pixel breit werden. Breitenangaben sind immer nur für eine Zelle (normal die oberste) in einer Spalte nötig. Ist die Angabe gemacht, gilt sie für die komplette Spalte.
Tabellen werden auch oft zur Positionierung gebraucht. Dann macht man Border 0 und schon sieht man den Tabellenrand nicht mehr. Dadurch dass man die einzelnen Zellenbreiten angeben kann (in Prozent oder Pixel) lassen sich Tabellen zum Ausrichten gut benutzen.
Noch ein paar kleine Tabellenbeispiele. Den dazugehörigen Code habe ich gleich in die Tabelle rein kopiert. So könnt Ihr Euch besser vorstellen was denn nun was bewirkt.
| <table width="830" border="1" cellspacing="0" cellpadding="20"> <tr> <td width="400"> </td> <td> </td> </tr> </table> |
| <table width="830" border="1" cellspacing="20" cellpadding="0"> <tr> <td width="400"> </td> <td > </td> </tr> </table> |
| <table width="830" border="5" cellspacing="2" cellpadding="5"> <tr> <td width="400"> </td> <td> </td> </tr> </table> |
