Door tabellen te onderscheiden van hun achtergrond, kunt u de inhoud van de tabel benadrukken ten opzichte van al het andere op de webpagina. Als u een tabelachtergrond wilt toevoegen, moet u wijzigingen aanbrengen in de trapsgewijze stylesheet ondersteuning van uw webpagina.
Beginnen
De beste manier om een achtergrondafbeelding aan een tabel toe te voegen, is door de CSS te gebruiken achtergrond eigendom. Om uzelf voor te bereiden om de CSS effectief te schrijven en om onverwachte glitches in de weergave te voorkomen, opent u uw achtergrondafbeelding en noteert u de hoogte en breedte. Upload vervolgens uw afbeelding naar uw hostingprovider. Test de URL voor de afbeelding; een van de meest voorkomende redenen waarom afbeeldingen niet worden weergegeven, is omdat er een typefout in de URL staat.
Voeg een CSS-stijlblok in de kop van uw document in:
Schrijf je CSS voor de achtergrond op je tabel en plaats deze in het stijlblok:
Plaats uw tabel in de HTML:
cel 1cel 2
cel 1cel 2
Stel de breedte en hoogte van de tabel in op de breedte en hoogte van de afbeelding.
Stel de breedte en hoogte van de tabel in op de breedte en hoogte van de afbeelding.
Als uw tabelinhoud groter is dan de hoogte en breedte van de afbeelding, wordt de achtergrondafbeelding slechts één keer weergegeven.
Zet een achtergrond op slechts één tafel
De bovenstaande instructies zullen dezelfde achtergrondafbeelding instellen op elke tafel op de pagina. Gebruik a. om de achtergrond alleen op specifieke tabellen te plaatsen klasse attribuut. Voeg de. toe klasseachtergrond naar elke tafel waar u die achtergrondafbeelding wilt hebben. Stel de breedte en hoogte in voor die tabellen.
Laat de achtergrondafbeelding van de tafel herhalen
Bij grotere tabellen, of tabellen met meer inhoud, moet de achtergrond mogelijk worden herhaald, zodat de hele tabel wordt gevuld. Wijzig de waarde in uw CSS zodat de afbeelding wordt herhaald op de y-as, de x-as of op beide wordt weergegeven.
background: url("URL naar afbeelding") herhalen;
Standaard wordt de herhalingswaarde betegeld, maar u kunt de herhalingswaarde ook instellen op.
herhaal-x
of.
herhaal-y
om respectievelijk horizontaal of verticaal te betegelen.
Achtergrondkleuren van cellen blokkeren de achtergrondafbeelding van de tabel
Alle achtergrondkleuren ingesteld op de tabelcellen overschrijven de achtergrondafbeelding op de tafel. Wees dus voorzichtig bij het gebruik van achtergrondkleuren op uw cellen in combinatie met tabelachtergrondafbeeldingen.
Overwegingen
Elke afbeelding die u gebruikt, moet de juiste licentie hebben; dat u een foto op internet kunt vinden, betekent niet dat u deze voor eigen gebruik kunt gebruiken. Respecteer auteursrechten!
Tabelachtergronden onderscheiden uw tabellen van de onderliggende pagina. Denk echter twee keer na voordat u deze techniek gebruikt. Het invoegen van een neutrale afbeelding is misschien niet storend, maar ingewikkelde afbeeldingen die bedoeld zijn om schattig te zijn (bijvoorbeeld het invoegen van een foto van een kitten achter een tafel met vermelding van huisdieradoptie) kan onprofessioneel overkomen en kan de leesbaarheid van de Tabelgegevens.