Tabelranden instellen in html

Vragen/antwoorden betreffende het maken van je eigen website.

_Jos_
Lid geworden op: 02 apr 2011, 11:13

01 apr 2014, 21:45

Kan iemand mij vertellen hoe ik alle randen van een tabel dikker maak, dus niet enkel de buitenste?
Met table border worden enkel de buitenste randen ingesteld. Is het ook mogelijk om de binnenste randen dikker te maken?

Mvg

Jos

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

01 apr 2014, 22:33

Beste Jos,

Dat kan je op twee manieren oplossen:

of
1- in elke <td> tag
bv.

Code: Selecteer alles

<td style="border:2px solid #000">
waarin 2 de dikte is dus hoe hoger dit getal, hoe dikker de randen

of
2- in de style opmaak
Plaats tussen de tags <head> en </head>
bv.

Code: Selecteer alles

<style type="text/css">
<!--
    table, td {border: 2px solid #000000;}
//-->
<style>
waarin
- 2px de breedte van de randen is dus hoe hoger dit getal, hoe dikker de randen
- solid een volle lijn is
- #000000 de kleur van de kader (hier zwart)

Houd me op de hoogte.

mvg,
Coderunner


Verbetering aangebracht: tag td heeft geen border attribute
Laatst gewijzigd door coderunner op 04 apr 2014, 21:11, 1 keer totaal gewijzigd.
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

_Jos_
Lid geworden op: 02 apr 2011, 11:13

02 apr 2014, 09:14

Beste Coderunner,

Bedankt voor het antwoord maar het lukt me niet.

Code: Selecteer alles

<table border="0">
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
wordt dit dan?

Code: Selecteer alles

<table border="2">
<tbody>
<tr>
<td border="2">&nbsp;</td>
<td border="2">&nbsp;</td>
</tr>
<tr>
<td border="2">&nbsp;</td>
<td border="2">&nbsp;</td>
</tr>
</tbody>
</table>

Wat doe ik verkeerd?

Mvg

Jos

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

02 apr 2014, 11:33

Beste Jos,

Optie 2 is de makkelijkste (slechts 1x invoeren) of plaats de style opmaak direct in elke <td> tag (meerdere keren invoeren).

Optie 1

vb.

Code: Selecteer alles

<html>
<head>
</head>
<body>
<table style="border:2px solid #000"> 
 <tbody> 
 <tr> 
 <td style="border:2px solid #000">&nbsp;</td> 
 <td style="border:2px solid #000">&nbsp;</td> 
 </tr> 
 <tr> 
 <td style="border:2px solid #000">&nbsp;</td> 
 <td style="border:2px solid #000">&nbsp;</td> 
 </tr> 
 </tbody> 
 </table>
 </body>
 </html>
Optie 2

vb.

Code: Selecteer alles

<html>
<head>
<style>
	table, td {border: 2px solid black;}
</style>
</head>
<body>
<table> 
 <tbody> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 </tbody> 
 </table>
 </body>
 </html>
mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

_Jos_
Lid geworden op: 02 apr 2011, 11:13

03 apr 2014, 09:52

Beste Coderunner,

Bedankt voor de uitleg, het probleem is opgelost met optie 1.

Bij optie 2 blijft de rand van de bovenste horizontale lijn op minimum staan maar misschien komt dit omdat ik met een html editor van Wordpress werk...

Mvg

Jos

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

04 apr 2014, 21:07

Beste Jos,

Bedankt voor de update :wink:
_Jos_ schreef:Bij optie 2 blijft de rand van de bovenste horizontale lijn op minimum staan ...
Wat de juiste oorzaak hiervan is, kan ik zonder de gebruikte codes niet nagaan; misschien wordt dit ergens in de code tenietgedaan.

mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

kris.gua
Lid geworden op: 14 apr 2006, 10:43
Locatie: Brasschaat

30 apr 2014, 00:00

Als je er !important bijzet, heb je meer kans om de oorspronkelijke css te overschrijven. (Tenzij dat er in de css van Wordpress ook zo bij staat.) Het wordt dan
<style>
table, td {border: 2px !important solid black;}
</style>

Misschien nuttig bij een volgend soortgelijk probleem, want nu is het toch opgelost.

Succes met uw website!

Kris
AspireE17-intelcore i3-6100U - Windows 10
HP Pavilion dm3 Notebook PC processor: AMD AThion ™ Neo W2 Dual Core Processor L335 1.60 GHz
Acer Aspire 7551 Processor: AMD Athlon™IIP320dual coreProcessor 2.10 GHzt
Windows 7Home