ralf: Gestaltung von Tabellen

Hallo zusammen,

ich bin ein absoluter HTML-Neueinsteiger und probiere mich zur Zeit ein bisschen mit Tabellengestaltung aus.
Ich wollte gern eine Tabelle anlegen, die 100px hoch ist und über die gesamte Bildschirmbreite reicht. Dann wollte ich gern einen Farbverlauf in der Tabelle haben. Dafür hab ich eine entsprechende Bilddatei als Hintergrund eingebunden. Das Problem ist nun aber, dass das Bild höher als die 100px der Tabelle ist und nicht auf die Größe der Tabelle zusammengeschrumpft wird. Man sieht also nur den oberen Rand es Farbverlaufes. Sicher könnte man da jetzt das Bild als solches verkleinern. Aber gibt es da nicht auch eine Möglichkeit ohne das Bild zu verändern? Muß ich überhaupt ein Bild einbinden wenn ich einen Farbverlauf haben will, oder kann ich mir den auch mit Hintergrundfarben generieren lassen? Danke schon mal für eure Tips...

Gruß R.

  1. Hallo Ralf,

    Ich wollte gern eine Tabelle anlegen, die 100px hoch ist und über die gesamte Bildschirmbreite reicht.

    Obligatorischer Hinweis: Tabellen sollten nur für tabellarische Daten verwendet werden. ;-)

    Das Problem ist nun aber, dass das Bild höher als die 100px der Tabelle ist und nicht auf die Größe der Tabelle zusammengeschrumpft wird. Man sieht also nur den oberen Rand es Farbverlaufes.

    Unter Umständen liegt es noch an fehlenden Inhalten innerhalb der Tabelle, aber ohne Beispielquelltext oder eine Seite online ist das schwierig zu raten.

    Wie hast du den Hintergrund eingebunden?

    <table style="background:url('bild.jpg');">... ???

    Mit freundlichen Grüßen

    André

  2. Hi ralf,

    man würde das bei einem Verlauf normalerweise so machen, dass man einen schmalen Streifen von dem Verlauf abschneidet und den sich wiederholen lässt.

    Tipps:

    • Verläufe sind oft schlechte Hintergrundmotive, weil sie durch die Komprimierung stufig wirken.
    • Die Größe von Grafiken verändert man am besten im Grafikprogramm, obwohl es Programmiersprachen gibt, die sowas dynamisch können.
    • Die schlechteste Skalierung von Grafiken erreichst Du, indem Du die Werte von width und hight änderst und den Browser skalieren lässt.

    Viele Grüße
    Mathias Bigge

  3. Hallo ralf,

    Ich wollte gern eine Tabelle anlegen, die 100px hoch ist und über die gesamte Bildschirmbreite reicht. Dann wollte ich gern einen Farbverlauf in der Tabelle haben. Dafür hab ich eine entsprechende Bilddatei als Hintergrund eingebunden. Das Problem ist nun aber, dass das Bild höher als die 100px der Tabelle ist und nicht auf die Größe der Tabelle zusammengeschrumpft wird. Man sieht also nur den oberen Rand es Farbverlaufes. Sicher könnte man da jetzt das Bild als solches verkleinern. Aber gibt es da nicht auch eine Möglichkeit ohne das Bild zu verändern? Muß ich überhaupt ein Bild einbinden wenn ich einen Farbverlauf haben will, oder kann ich mir den auch mit Hintergrundfarben generieren lassen? Danke schon mal für eure Tips...

    Wie wäre es denn mit dem Folgenden, das allerdings nur der IE umsetzt?

    <html>
    <head>
    <title>Tabellenverlauf</title>
    <style type="text/css">
    <!--
    table.verlauf {
      height:100px;
      text-align:center;
      color:#FFFF00;
      width:100%;
      filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#88CCFF, EndColorStr=#2266BB);
      border-collapse:collapse;
    }

    table.verlauf td {
      border:solid 1px #FF0000;
    }
    -->
    </style>
    </head>
    <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    <table>
    <tr>
    <td>Hier</td>
    <td>stehen</td>
    <td>deine</td>
    <td>Inhalte</td>
    </tr>
    </table>
    </body>
    </html>

    Gruß Gernot

    1. Hallo noch einmal,

      <table class="verlauf">

      ^^^^^^^^^^^^^^^
      Da fehlte freilich noch die Klasse!

      Gruß Gernot