brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Tabellen in HTML-2

von Thomas Salvador.

zurueck Teil 1

Tabellen sind ein ausgesprochen mächtiges und gern benutztes Mittel zur Gestaltung, die weit über die reine Nutzung zur tabellarischen Anzeige irgendwelcher Werte hinausgeht.

Tabellen sind immer eigene Absätze, gehören damit zu den blockorientierten Gestaltungselementen.

Ausrichtung

Die gesamte Tabelle wird üblicherweise links ausgerichtet. Genauer wird sie als eigener Absatz linksbündig gesetzt.

Mit dem align Attribut des Tags table kann die Tabelle anders ausgerichtet werden. Mögliche Werte sind left, right und center.

<table align="center">

Beachten Sie bitte, dass Sie sie auch links und rechts ausrichten können, wobei dies eine zu Grafiken analoge Bedeutung hat, d.h. die Tabelle wird dann aus dem Fließtext herausgenommem und der Fließtext 'umfließt' die Tabelle, so wie er Grafiken umfließen kann. Damit sind interessante Dinge möglich.

Besonders kompatibel zentrieren Sie eine Tabelle durch Kapselung mit center bzw. div align="center".

<center>
  <table>
    ...
  </table>
</center>

oder

<div align="center">
  <table>
    ...
  </table>
</div>

Überspannung

Des weiteren besteht die Möglichkeit Zellen zu definieren, die mehrere Spalten und/oder Zeilen überspannen. Hierbei kommen die Attribute colspan und rowspan von Tag td bzw. Tag th zum Einsatz.

Beispiel:

<table border="1">
  <tr>
    <td> Zeile 1 - Spalte 1 </td>
    <td> Zeile 1 - Spalte 2 </td>
    <td> Zeile 1 - Spalte 3 </td>
    <td> Zeile 1 - Spalte 4 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td>
    <td colspan="2"> Zeile 2 - Spalte 2/3 </td>
    <td> Zeile 2 - Spalte 4 </td>
  </tr>
  <tr>
    <td> Zeile 3 - Spalte 1 </td>
    <td rowspan="2"> Zeile 3/4 - Spalte 2 </td>
    <td> Zeile 3 - Spalte 3 </td>
    <td> Zeile 3 - Spalte 4 </td>
  </tr>
  <tr>
    <td> Zeile 4 - Spalte 1 </td>
    <td> Zeile 4 - Spalte 3 </td>
    <td> Zeile 4 - Spalte 4 </td>
  </tr>
</table>

liefert

Ausgabe auf Ihrem Browser
Zeile 1 - Spalte 1 Zeile 1 - Spalte 2 Zeile 1 - Spalte 3 Zeile 1 - Spalte 4
Zeile 2 - Spalte 1 Zeile 2 - Spalte 2/3 Zeile 2 - Spalte 4
Zeile 3 - Spalte 1 Zeile 3/4 - Spalte 2 Zeile 3 - Spalte 3 Zeile 3 - Spalte 4
Zeile 4 - Spalte 1 Zeile 4 - Spalte 3 Zeile 4 - Spalte 4

zurueck Teil 1
Teil 3 weiter


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 9. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/.html .