Die Unterscheidung von Tabellen von ihrem Hintergrund hilft, den Inhalt der Tabelle relativ zu allem anderen auf der Webseite hervorzuheben. Um einen Tabellenhintergrund hinzuzufügen, müssen Sie Änderungen am Cascading Stylesheet Unterstützung Ihrer Webseite.
Einstieg
Der beste Weg, um einer Tabelle ein Hintergrundbild hinzuzufügen, ist die Verwendung von CSS Hintergrund Eigentum. Um sich darauf vorzubereiten, das CSS effektiv zu schreiben und unerwartete Anzeigefehler zu vermeiden, öffnen Sie Ihr Hintergrundbild und notieren Sie sich die Höhe und Breite. Laden Sie dann Ihr Bild bei Ihrem Hosting-Provider hoch. Testen Sie die URL für das Bild; Einer der häufigsten Gründe, warum Bilder nicht angezeigt werden, ist ein Tippfehler in der URL.
Fügen Sie einen CSS-Stilblock in den Kopf Ihres Dokuments ein:
Schreiben Sie Ihr CSS für den Hintergrund in Ihre Tabelle und fügen Sie es in den Stilblock ein:
Platzieren Sie Ihre Tabelle im HTML:
Zelle 1Zelle 2
Zelle 1Zelle 2
Stellen Sie die Breite und Höhe der Tabelle entsprechend der Bildbreite und -höhe ein.
Stellen Sie die Breite und Höhe der Tabelle entsprechend der Bildbreite und -höhe ein.
Wenn Ihr Tabelleninhalt größer als die Bildhöhe und -breite ist, wird das Hintergrundbild nur einmal angezeigt.
Setzen Sie einen Hintergrund auf nur einen Tisch
Mit den obigen Anweisungen wird für jede Tabelle auf der Seite dasselbe Hintergrundbild festgelegt. Um den Hintergrund nur auf bestimmte Tabellen zu legen, verwenden Sie a Klasse Attribut. Ergänzen Sie die KlasseHintergrund zu jeder Tabelle, die Sie dieses Hintergrundbild haben möchten. Legen Sie die Breite und Höhe für diese Tabellen fest.
Lassen Sie das Hintergrundbild der Tabelle wiederholen
Bei größeren Tabellen oder Tabellen mit mehr Inhalt muss der Hintergrund möglicherweise wiederholt werden, damit die gesamte Tabelle gefüllt wird. Ändern Sie den Wert in Ihrem CSS so, dass sich das Bild auf der y-Achse, der x-Achse wiederholt oder auf beiden gekachelt ist.
Hintergrund: url("URL zum Bild") wiederholen;
Standardmäßig wird der Wiederholungswert gekachelt, aber Sie können den Wiederholungswert auch auf festlegen.
wiederholen-x
oder.
wiederholen-y
horizontal oder vertikal zu kacheln.
Zellenhintergrundfarben blockieren das Tabellenhintergrundbild
Beliebige Hintergrundfarben in den Tabellenzellen festgelegte Werte überschreiben das Hintergrundbild in der Tabelle. Seien Sie also vorsichtig, wenn Sie Hintergrundfarben für Ihre Zellen in Kombination mit Tabellenhintergrundbildern verwenden.
Überlegungen
Jedes von Ihnen verwendete Bild muss ordnungsgemäß lizenziert sein; Nur weil Sie ein Foto im Web finden, bedeutet das nicht, dass Sie es für Ihren eigenen Gebrauch verwenden können. Urheberrechte respektieren!
Tabellenhintergründe heben Ihre Tabellen von der zugrunde liegenden Seite ab. Denken Sie jedoch zweimal darüber nach, bevor Sie diese Technik anwenden. Das Einfügen eines neutralen Bildes mag nicht ablenken, aber komplizierte Bilder sollen süß sein (z Bild eines Kätzchens hinter einem Tisch, das auf die Adoption von Haustieren hinweist) kann unprofessionell erscheinen und die Lesbarkeit beeinträchtigen das Tabellendaten.