Tabelhoeken rond maken

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

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?
Tabelhoeken rond maken Captur10
Eigenlijk geen enkel verschil, maar met sommige oude browsers is het resultaat anders:
Tabelhoeken rond maken Captur11

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:
Tabelhoeken rond maken Hautga10 Tabelhoeken rond maken Hautdr10 Tabelhoeken rond maken Basgau10 Tabelhoeken rond maken Basdro10

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:
Tabelhoeken rond maken Tabelv10


TonnyKamper

TonnyKamper
Globaal Moderator
Globaal Moderator

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

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