Tabelhoeken rond maken

Vorige onderwerp Volgende onderwerp Ga naar beneden

Tutorial Tabelhoeken rond maken

Bericht van TonnyKamper op di 3 jul 2018 - 17:42

Tabelhoeken rond maken


1. Introductie


Wat zijn de verschillen tussen deze 2 tekstvakken?
Eigenlijk geen enkel verschil, maar met sommige oude browsers is het resultaat anders:

Wil jij ook een mooie afgeronde tabel vertonen, dan zijn er twee manieren om dat voor elkaar te krijgen.

2. Afronden met behulp van CSS code


Het gebied wordt gemaakt met een tabel met de eigenschap CSS border-radius, die de hoeken rondt. De code is als volgt gemaakt:
Code:
<table style="-moz-border-radius: 35px; -webkit-border-radius: 35px; border-radius: 35px; background-color: #00ccff; height: 82px; width: 135px;text-align: center;"><tr><td> Jouw tekst hier</td></tr></table>
Voorbeeld:
Jouw tekst hier

3. Afronden met afbeeldingen


De opbouw


Het is mogelijk om het anders te doen om ontwerpveranderingen door oude browsers te voorkomen (of om een ​​rand complexer te maken dan een eenvoudige kleur).

Hiervoor is noodzakelijk:

  • Dat zijn 5 afbeeldingen voor als u een eenvoudige rand wilt maken: één voor elke hoek en één voor de vulling (van de middelste en de laterale en horizontale randen).
  • Dat zijn 9 afbeeldingen voor een complexe rand: één voor elke hoek, één voor elke zij- en horizontale rand en één voor het vullen van het midden.

De code is dan als volgt opgebouwd:
Code:
<table cellspacing="0" cellpadding="0">
<tr height="Hoogte van de gehele bovenrand afbeelding in px">
   <td width="Breedte van afbeelding linksboven in px" background="Url van de afbeelding"></td>
   <td width="Tabelbreedte middengedeelte in px" "background =" URL van Afbeelding"></td>
   <td width="Breedte van afbeelding rechts boven in px" background="URL van afbeelding rechts boven"></td>
</tr>
<tr>
   <td background="url van afbeelding midden"></td>
   <td background="url van afbeelding midden">Jouw Tekst Hier</td>
   <td background="url van afbeelding midden"></td>
</tr>
<tr height="Hoogte van de gehele onderrandafbeelding">
   <td background=" url afbeelding linksonder"></td>
   <td background="url van afbeelding midden"></td>
   <td background="url van afbeelding rechtsonder"></td>
</tr>
</table>

Voorbeeld


Laten we de nodige foto's maken om het blauwe kader van de tabel te maken. We zullen deze afbeeldingen gebruiken:

De code wordt dan:
Code:
<table cellspacing="0" cellpadding="0">
<tr height="35px">
   <td width="35px" background="https://i.servimg.com/u/f42/16/82/22/15/hautga10.gif"></td>
   <td width="150px" background="https://i.servimg.com/u/f42/16/82/22/15/centre10.gif"></td>
   <td width="35px" background="https://i.servimg.com/u/f42/16/82/22/15/hautdr10.gif"></td>
</tr>
<tr>
   <td background="https://i.servimg.com/u/f42/16/82/22/15/centre10.gif"></td>
   <td background="https://i.servimg.com/u/f42/16/82/22/15/centre10.gif">Jouw Tekst Hier</td>
   <td background="https://i.servimg.com/u/f42/16/82/22/15/centre10.gif"></td>
</tr>
<tr height="35px">
   <td background="https://i.servimg.com/u/f42/16/82/22/15/basgau10.gif"></td>
   <td background="https://i.servimg.com/u/f42/16/82/22/15/centre10.gif"></td>
   <td background="https://i.servimg.com/u/f42/16/82/22/15/basdro10.gif"></td>
</tr>
</table>
Dit ziet er zo uit:


avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 221
Geboortedatum : 23-10-54
Leeftijd : 63
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum