Eigen website

Tabelranden instellen in html

Gestart door _Jos_ op 01 apr 2014, 21:45 7 berichten 3.644 keer gelezen
_Jos_ Startte dit onderwerp 01 apr 2014, 21:45 122 berichten
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 01 apr 2014, 22:33 Aubauke - Aentwaerepe 1.828 berichten
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_ Startte dit onderwerp 02 apr 2014, 09:14 122 berichten
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 02 apr 2014, 11:33 Aubauke - Aentwaerepe 1.828 berichten
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_ Startte dit onderwerp 03 apr 2014, 09:52 122 berichten
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 04 apr 2014, 21:07 Aubauke - Aentwaerepe 1.828 berichten
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 30 apr 2014, 00:00 Brasschaat 153 berichten
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
Apparaatnaam LAPTOP-QEDVFNJO
Processor Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz   2.59 GHz
Geïnstalleerd RAM-geheugen 16,0 GB (15,8 GB beschikbaar)
Type systeem 64-bits besturingssysteem, x64-processor