Professional Web Design - Tabellen Tutor - Machs mit einer Tabelle!

Tabellen Tutor -

Machs mit einer Tabelle!

(JA,DER TISCH IST EINE TABELLE!)

Tabellentags sind bei weitem die nützlichsten Tags, die Du finden kannst. Wenn es ums Seitenlayout geht, kannst damit fast alles erreichen.Es folgen ein paar Beispiele und Ideen für Dich. Einige wirst Du nützlich finden, andere sind nur zum Protzen. Aber alle zeigen Dir die Vielseitigkeit des <TABLE> Tags.

(Diese Seite ist recht farbig. Wenn Du keine Farben siehst, solltest Du Deinen alten Browser in den Ruhestand schicken. Ich weiss, dass Du hier einen guten, neuen Browser kriegst.)

Wenn Du das lesen kannst, versteht Dein Browser die Farbattribute gut!
Wenn Du das lesen kannst, versteht Dein Browser die Farbattribute nicht. Tut mir leid, Kumpel!

Es gibt 18 Grafiken auf dieser Seite. Sie sind alle hier gezippt. So hast Du sie alle mit einem mal, wenn Du mit ihnen üben möchtest, und musst sie nicht suchen. (Ist das nicht nett von mir!)

Und noch mal, Du findest eine Karte mit den vielen Farben für Hintergründe hier.

The Bill of Rights
Passed by Congress September 25, 1789.
Ratified December 15, 1791.

AMENDMENT I
Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
AMENDMENT II
A well-regulated militia, being necessary to the security of a free State, the right of the people to keep and bear arms, shall not be infringed.
AMENDMENT III
No soldier shall, in time of peace be quartered in any house, without the consent of the owner, nor in time of war, but in a manner to be prescribed by law.

Ich fühle mich schuldig, dass ich das Dokument gekürzt habe, deshalb ist hier der Link zur U.S. Constitution in ihrem ganzen Wortlaut...

Das hier ist ein einfaches Schachbrett. Nicht besonders nützlich, aber es zu machen ist eine gute Übung. Theoretisch könntest Du das nutzen, um irgendwo über eine Webseite Schach zu spielen.

Ein anderes (weniger farbiges) Beispiel für die Bill of Rights.

The Bill of Rights Passed by Congress September 25, 1789. Ratified December 15, 1791.
AMENDMENT I		Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
AMENDMENT II		A well-regulated militia, being necessary to the security of a free State, the right of the people to keep and bear arms, shall not be infringed.
AMENDMENT III		No soldier shall, in time of peace be quartered in any house, without the consent of the owner, nor in time of war, but in a manner to be prescribed by law.

Du kannst auch Balkendiagramme mit Tabellen und ein paar farbigen Grafiken (1x1 Pixel gross) machen. Es ist nicht sehr schwer, und wenn es einmal fertig ist, kann man es leicht ändern. Und es kann Sachen, die ein normales Bild nicht kann. Nehmen wir mal an, Du musst es oft ändern. Oder wenn es Teil eines Ergebnisses sein soll, dass Du per CGI, Java oder Javascript erstellst. Diese Technik eignet sich sehr gut für "on-the-fly" Grafiken.

		Joe's Widget Mfg. Co. Inc. Unit production January-June
RED WIDGETS BLUE WIDGETS TUNE-UP KITS
`UNITS` in thousands	150 100 50 0
		`JAN`	`FEB`	`MAR`	`APR`	`MAY`	`JUN`

Das ist ein schöner Effekt. Es ist zwar sehr aufwendig zu erstellen, aber leicht zu ändern, wenn Du Deinen HTML Code ordentlich schreibst.

*Punch Gran Cru*					Honduras
`Cigar`	`Length`	`Ring`	`Wrapper`	`Box of`	`Price`	`Single`
`Britania`	`6.25`	`50`	`Natural`	`25`	`96.75`	`4.55`
`Diademas`	`7.25`	`54`	`Natural`	`25`	`102.50`	`4.80`
`Monarcas`	`6.75`	`48`	`Natural`	`10`	`57.00`	`6.40`
`Prince Consort`	`8.5`	`52`	`Natural`	`10`	`48.00`	`5.65`
`Robusto`	`5.25`	`50`	`Maduro`	`20`	`75.00`	`4.40`
`Robusto`	`5.25`	`50`	`Natural`	`20`	`75.00`	`4.40`
`Superior`	`5.5`	`48`	`Natural`	`25`	`86.50`	`4.05`

Hier ist noch mal der selbe Effekt, aber eine VIEL einfachere Tabelle...

Cigar Length Ring Wrapper Box of Price Single
*Punch Gran Cru*	Honduras
Britania 6.25 50 Natural 25 96.75 4.55
Diademas 7.25 54 Natural 25 102.50 4.80
Monarcas 6.75 48 Natural 10 57.00 6.40
Prince Consort 8.5 52 Natural 10 48.00 5.65
Robusto 5.25 50 Maduro 20 75.00 4.40
Robusto 5.25 50 Natural 20 75.00 4.40
Superior 5.5 48 Natural 25 86.50 4.05

Tabellen können auch verwendet werden, um farbige Linien zu machen...

Hier findest Du noch viel mehr Linien zum kopieren...

Hier ist eine Technik, um mit Tabellen Bildränder zu machen...

Noch mehr Beispiele.

Das letzte Beispiel ist eine einfache Button-Leiste...