Tabellen met ronde randen

Door Jeroen van Lieshout, 18 jaar geleden, 9.477x bekeken

Een handige tutorial om een rond ogende tabel te maken

Gesponsorde koppelingen

Inhoudsopgave

  1. Inleiding
  2. Tabel met ronde hoeken maken

 

Er zijn 47 reacties op 'Tabellen met ronde randen'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
DaeDaluz
DaeDaluz
18 jaar geleden
 
0 +1 -0 -1
Beetje vreemde naam (want je maakt ze niet rond ;), en het ook niet direct met php te maken, maar verder wel handig voor beginnende webdesigners :)
Jeroen van Lieshout
Jeroen van Lieshout
18 jaar geleden
 
0 +1 -0 -1
Ja, k had de titel alsvolgt moeten noemen: tabellen met afronding
DaeDaluz
DaeDaluz
18 jaar geleden
 
0 +1 -0 -1
Ja dat is beter :)
Olaf Lederer
Olaf Lederer
18 jaar geleden
 
0 +1 -0 -1
Je kan dit beter met CSS en html elementen (p, h1, h1, h3 ul, li...) doen...

dit is een leuk verhaal hierover:
http://www.hotdesign.com/seybold/
Maxim
Maxim
18 jaar geleden
 
0 +1 -0 -1
ik vind dit onnodig voor ervaren html kenners maar handig voor de beginnende.
in mijn tijd moest ik alles zelf vinden XD
DaeDaluz
DaeDaluz
18 jaar geleden
 
0 +1 -0 -1
Olaf, omfg wat een bla bla bla tutorial is dat, ze kunnen misschien mooie tabellen maken maar snelle overizchtelijke tutorials niet :p
Olaf Lederer
Olaf Lederer
18 jaar geleden
 
0 +1 -0 -1
DaeDaluz,

Dit artikel heeft het wel over hoe je "echte" websites maakt...

(is trouwens niet als tutorial bedoeld maar meer om te prikkelen een websites anders te bouwen)
DaeDaluz
DaeDaluz
18 jaar geleden
 
0 +1 -0 -1
Quote:
(is trouwens niet als tutorial bedoeld maar meer om te prikkelen een websites anders te bouwen)

dat oke

maarr

Quote:
Dit artikel heeft het wel over hoe je "echte" websites maakt...

dat volg ik niet
Olaf Lederer
Olaf Lederer
18 jaar geleden
 
0 +1 -0 -1
Websites die ook in Firefox werken, geen tabellen met spacer-images, kortom websites die structureel zijn niet de websites die door creamweaver, frontpage en golive uitgespuugd worden.
Bas Kreleger
Bas Kreleger
18 jaar geleden
 
0 +1 -0 -1
dit kan ook in CSS :/ dit is HTML op de verkeerde manier gebruiken.. tabellen zijn voor tabel data!
Mitch X
Mitch X
18 jaar geleden
 
0 +1 -0 -1
Juist.
Onzin tut.
Winston Smith
Winston Smith
18 jaar geleden
 
0 +1 -0 -1
Owkee...hoe doe je dat dan in CSS (tutorial op csshulp.nl? :P)? Lijkt mij een mooie kans om mijn grafische kwaliteiten wat te verbeteren. Ben altijd al benieuwd geweest naar hoe dat grafische wordt aangekleed, maar nooit echt zin gehad om engelse tutorials te gaan lezen over CSS :)
Olaf Lederer
Olaf Lederer
18 jaar geleden
 
0 +1 -0 -1
Kasper, zie het als een uitdaging hiermee zelf aan de slag te gaan...
;-)

je kan ook leren uit bestaande websites:
http://cssvault.com/
via deze website heb je toegang tot extra veel websites opgemaakt met CSS.
Jeroen van Lieshout
Jeroen van Lieshout
18 jaar geleden
 
0 +1 -0 -1
Werken deze CSS functies ook in firefox en andere browsers? Hoor vaak van andere mensen namelijk dat veel CSS functies niet werken in andere browsers.
Eris -
Eris -
18 jaar geleden
 
0 +1 -0 -1
In princiepe alles
Alleen slecht gescripte CSS code niet ^^
Olaf Lederer
Olaf Lederer
18 jaar geleden
 
0 +1 -0 -1
Jeroen,

de standaard is zeker niet IE...in het algemeen test je de sites in Mozilla en dan zijn deze ook goed in IE (behalve de CSS die IE verkeerd begrijpt) maar als je de site in IE gaat testen, dan is het dat niet altijd goed (voor alle browsers)
Jeroen van Lieshout
Jeroen van Lieshout
18 jaar geleden
 
0 +1 -0 -1
Ik maak er dan ook de gewoonte van om mijn site zowel in IE als in Firefox te testen. Ik heb al gemerkt dat bijvoorbeeld fieldset e.d. niet goed werkt in Firefox. Daarom vroeg ik mij af of er nog meer zaken zijn die niet goed werken.

De manier die ik hier in de tutorial uitgelegd heb gekregen heb ik btw ook maar op school geleerd dus ik weet zelf geen alternatief. Daarvoor heb ik te weinig CSS gebruikt.

Op school moesten we destijds in een half jaar in ASP mbv een Acces Database een Veiling en Webwinkel maken met beheer van orders e.d. dus daar heb ik ook nooit de tijd voor gehad. Ronde tabellen hebben we toen dus ook op deze manier gemaakt.

Kan iemand me uitleggen hoe je zoiets met CSS dan wel kunt maken?
Elwin - Fratsloos
Elwin - Fratsloos
18 jaar geleden
 
0 +1 -0 -1
Ik had het al een keer zien staan, maar ik vond het niet boeie, nu valt me oog er weer op, dus ik moet het volgende kwijt:
Quote:
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="20" height="20"></td>
<td width="90%" height="20"></td>
<td width="20" height="20"></td>
</tr>
<tr>
<td width="20"></td>
<td width="90%"></td>
<td width="20"></td>
</tr>
<tr>
<td width="20" height="20"></td>
<td width="90%" height="20"></td>
<td width="20" height="20"></td>
</tr>
</table>
Er is al een aantal keer CSS gevallen hiero, zeker makkelijk om te gebruiken voor een tabel, maar dan is er nog iets wat niet kopt...

Goed, mijn rekenkundige brein ziet het volgende in een regel van de tabel:
20px+90%+20px -> Samen moet het 100% zijn, of volgens de breedte van de tabel 300px.
Als de middelste kolom 90% is, zijn de andere twee bij elkaar 10%, als 40 px (twee kolommen bij elkaar) 10 % is, dan is 100% 400 px. En de tabel is maar 300px?
Als je het in procenten gaat berekenen is 90% van 300px een totaal van 270px. Dan is 40px een goede 13,3 procent. Totaal? 13,3%+90% = 103,3%.

Het boeit niet hoor, maar het stoort me wel.. :)

Elwin
Han eev
Han eev
18 jaar geleden
 
0 +1 -0 -1
Woow daar moet je zin in hebben ^^
Olaf Lederer
Olaf Lederer
18 jaar geleden
 
0 +1 -0 -1
dat is het probleem met tabllen zij worden gewoon niet goed gebruikt...
wat vindt je van een tabelbreedte van 300 en de (2)kolommen van 20 ?
Jeroen van Lieshout
Jeroen van Lieshout
18 jaar geleden
 
0 +1 -0 -1
Wat het probleem is met fieldset??

Als ik een fieldset object gebruik binnen een tabel, dan vallen deze in IE binnen de tabel en in firefox daarbuiten.
Misschien vraag je je af waarom ik in vredesnaam een fieldset in een tabel wil gebruiken. Misschien om zo de lay-out te kunnen verdelen, omdat ik frames niet lekker vind werken.
Olaf Lederer
Olaf Lederer
18 jaar geleden
 
0 +1 -0 -1
gebruik het fieldset waarvoor het bedoeld is, namelijk voor form elements. Dat IE sommige slechte code goed weerkgeeft betekend niet dat deze code goed is. Gewoon altijd testen via w3. Als dan code in Firefox niet goed is dan mag je oordelen dat firefox iets niet goed weergeeft.
Erick Schluter
Erick Schluter
18 jaar geleden
 
0 +1 -0 -1
Mmhh...die tabellen...Ik ben juist doordrongen van het feit dat tegenwoordig alles met CSS opgelost dient te worden, met name tabellen.

Ik ben ook druk bezig om mijn site om te toveren naar een tabel-loze website...Of moet ik me niet zo gek laten maken en tabellen laten voor wat ze zijn ?
Olaf Lederer
Olaf Lederer
18 jaar geleden
 
0 +1 -0 -1
Erick,
tabellen mag je wel blijven gebruiken maar dan wel voor de juiste doeleinden (de naam zegt het al). Je kan ook een tabel met CSS opmaken in plaats van al de verschillende table-tags.


18 jaar geleden
 
0 +1 -0 -1
Ik sluit me helemaal aan bij veel andere opmerkingen.
HTML voor structuur, CSS voor opmaak en PHP voor server-side code (php ontbreekt hier, dus de tutorial was sowieso al offtopic). Om het nog maar eens te benadrukken; tabellen zijn om gestructureerd data weer te geven en niet om kolommen o.i.d. te maken, gebruik daarvoor een div tag en geef met CSS de afmetingen en positie aan. Dat is bovendien makkelijker en overzichtelijker. Als internet explorer nu ook even fixed positioning gaat ondersteunen dan is helemaal elke frameset overbodig.
Jeroen van Lieshout
Jeroen van Lieshout
18 jaar geleden
 
0 +1 -0 -1
em, de tutorials zijn volgens het formulier wat ik gebruikte ingedeeld in categori?en. Ik heb deze bij html gezet.
Olaf Lederer
Olaf Lederer
18 jaar geleden
 
0 +1 -0 -1
er staat wel : PHP tutorial toevoegen


18 jaar geleden
 
0 +1 -0 -1
Een website opbouwen met tabellen is prima! het kan soms 10x sneller zijn in de opbouw van de site. Zeker als je net begint is het makkelijker. Uit eindelijk is het bouwen van een website met css beter. toch wordt css vaak veelvuldig verkeerd gebruikt door webmasters, en kost het weer extra dataverkeer etc... wees realistisch en bekijk of je website css behoeft of dat tabellen jou ding zijn. Er is geen beter of slechter!


18 jaar geleden
 
0 +1 -0 -1
Kijk, een website maken in tabellen is goed, dat doe ik zelf ook. Maar maak de ronde randjes enzovoort gewoon met plaatjes! Dat scheelt veel gescript enzo, misschien een tip. misschien niet ;)
Steff   an
Steff an
18 jaar geleden
 
0 +1 -0 -1
http://www.vanderklugt.speedxs.nl/rondehoeken/ronde_hoeken.html dat zijn echte ronden randen met css!! Alleen werkt het niet met Internet Explorer(weer een reden om Firefox te gebruiken)
Jeroen van Lieshout
Jeroen van Lieshout
18 jaar geleden
 
0 +1 -0 -1
Maar je vergeet dat een goede website het op beide goed moet doen. Dus uiteindelijk moeten we wachten op IE7 in de hoop dat de CSS ondersteuning beter is. :S :S


18 jaar geleden
 
0 +1 -0 -1
Je kan het ook gewoon doen met CSS en plaatjes. Zie b.v. MijnProject en de css hiervan. Bas heeft er nog wel een foutje inzitten, hij moet nog een spatie plaatsen tussen de divjes, alhoewel dat geen ramp is
Olaf Lederer
Olaf Lederer
18 jaar geleden
 
0 +1 -0 -1
of nog beter alleen met css:

http://pro.html.it/esempio/nifty/


18 jaar geleden
 
0 +1 -0 -1
Ik heb een website gemaakt van alleen tabellen. Kan dit eigenlijk wel? Want ik had de startpagina klaar, en toen zat ik met het probleem hoe ik moest doorlinken naar een volgende pagina. Ik heb de startpagina gekopieerd en vervolgens die pagina aangepast. Maar echt handig is het allemaal niet


17 jaar geleden
 
0 +1 -0 -1
@ Edwin dat kan je doen door iframes.
Bernardo
Bernardo
17 jaar geleden
 
0 +1 -0 -1
Ja ik gebruik tegenwoordig Layers. Dit werkt prima!! Heel makelijk te verplaatsen en je kunt dingen over elkaar heen plaatsen zonder afbeedingen in stukjes te gaan knippen.
Steff   an
Steff an
17 jaar geleden
 
0 +1 -0 -1
aaaargh!!


17 jaar geleden
 
0 +1 -0 -1
Een afschruwelijk stukje code.

1. In elke tabelrij wordt de breedte aangegeven. Zo zie ik bijvoorbeeld 3x 90% staan. Terwijl dit bijvoorbeeld alleen in de bovenste rij hoeft te staan. Stel dat je een kolombreedte-aanpassing doet, dan moet je dat bij het bovenstaande script 3x aanpassen. Beetje omslachtig.

2. Wat is het nut van de vermelding van 90%. Als je de tabel een breedte geeft van 300 en je geeft 2 kolommen een breedte van 20px, dan zal de derde kolom automatisch het resterend aantal pixels zijn (dus 260px).

3. Veel te veel code voor zo'n kleine actie.


17 jaar geleden
 
0 +1 -0 -1
WTF is dit?


17 jaar geleden
 
0 +1 -0 -1
Dat zal jij en die pokerbot boven je nooit begrijpen :)
Kingofthemall
Kingofthemall
16 jaar geleden
 
0 +1 -0 -1
Heb even een opmerking over je tabellen. Ze zijn niet semantisch opgemaakt waardoor pagina's groter worden dan nodig is, wat zorgt voor meer bandwidth-usage waardoor jij meer moet gaan betalen!!! (we blijven wel Nederlander natuurlijk ;-)) Maar voor de rest: goede tutorial! :)
Niek Weevers
Niek Weevers
16 jaar geleden
 
0 +1 -0 -1
Als je een site goed kan maken dmv tabellen dan moet je gewoon tabellen gebruiken, maar doe het inderdaad wel goed. Wat boeit het voor de gebruiker nou of een site in tabellen is opgebouwd of in div's. Als de site maar gewoon goed weer wordt gegeven, gebeurt dat niet dan is dat een probleem voor de designer.
Ieder zijn eigen manier
ArendJan
ArendJan
16 jaar geleden
 
0 +1 -0 -1
Helemaal mee eens Niek!
Andreas Warnaar
Andreas Warnaar
16 jaar geleden
 
0 +1 -0 -1
Als we toch offTopic bezig zijn...
Dit is ook een mooie bron van verantwoorde CSS .....
http://www.cssplay.co.uk/
Wordt wekelijks geupdate..
Melroy van den Berg
Melroy van den Berg
16 jaar geleden
 
0 +1 -0 -1
een hoek is niet rond :|
http://bf.web-share.nl (gebruik ik dit ook)
K i p
K i p
15 jaar geleden
 
0 +1 -0 -1
Quote:
een hoek is niet rond :|
bwahwha Je hebt gelijk!

En wat vinden jullie dan van dit?
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Sjoerd
Sjoerd
14 jaar geleden
 
0 +1 -0 -1
Gebruik dit element in CSS voor afgeronde hoeken: '-moz-border-radius:10px;'

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. Inleiding
  2. Tabel met ronde hoeken maken

Labels

  • Geen tags toegevoegd.

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.