Hoe verkeerde tabel weergave in browser oplossen?

Hi JPL,

Ik heb even naar je tabelletje gekeken.
Plak ik dat bijv. in ‘codecast.me’ in chrome dan zie ik een table min-of-meer vergelijkbaar met jouw gekleurde versie [lijnen en padding is anders…]

== == == oorzaak…
Ik vermoed / verwacht dat jouw probleem wordt veroorzaakt door de op ‘jouw’ site / pagina / bericht ingestelde opmaak-eigenschappen voor bijv. tekst en tabellen.

Die instellingen kunnen we beter niet veranderen… maar we kunnen wel aan jouw bericht / tabel eigen eigenschappen meegeven.

— — — om te beginnen…
Plaats een ‘div’ om je tabel heen

<div id="mijntabel">
<table border="4" cellspacing="4" cellpadding="4">
<tbody>
<tr>
<td bgcolor="#ffff00">Yellow Stars</td>
<td bgcolor="#00ff00">Green Clovers</td>
</tr>
<tr>
<td bgcolor="#ff00ff">Purple Moons</td>
<td bgcolor="00ffff">Blue something or other...</td>
</tr>
</tbody>
</table></div>

Nu kan je -zoals je hierboven ook al hebt gedaan mbv css de opmaak realiseren die je wenst.

Laat me even weten of het je lukt..?

Als HTML kan plaatsen kan je inline-style CSS plaatsen en zo het uiterlijk regelen.

zo:

<h1>Title</h1>
 			<h2>Subtitle</h2>
 				<p>Some text goes here</p>

<table style="font-size: 16px;" width="600" border-collapse="collapse">
<tbody>
<tr style="background:orange;">
<th style=" text-align: left;"><span style= color: #ffffff;">Titel tabel</span></th>
</tr>
<tr>
<td style="border: 1px solid orange"  >Introtekst
<ul>
	<li>Opsomming 1</li>
	<li>Opsomming 2</li>
</ul>
Uitleidende tekst</td>
</tr>
<tr style="background:orange;">
<th style="border: 1px solid orange; text-align: left;"><span style="color: #ffffff;">Titel tabel</span></th>
</tr>
<tr>
<td style="border: 1px solid orange;">Introtekst
<ul>
	<li>Opsomming 1</li>
	<li>Opsomming 2</li>
</ul>
Uitleidende tekst</td>
</tr>

</tbody>
</table>

Ik krijg alleen de ‘border-collapse: collapse;’ niet voor elkaar…

Hoe kan ik de oranje kleur donkerder maken?

> vervang ‘orange’ door de kleurcode van je keuze bijv. #FC4903;
zie: http://colorpicker.com

Hoe kan ik de witregels tussen de zinnen kleiner maken?

<tbody>
<tr style="background:orange;">
<th style=" text-align: left;"><span style= color: #ffffff;">Titel tabel</span></th>
</tr>
<tr>
<td style="border: 1px solid orange; line-height:1.3em"; "; >Introtekst

zie de toevoeging: line-height:1.3em Pas de waarde aan met kleine stappen.

Hoe kan ik de titel, de intro en de uitleidende tekst iets meer laten inspringen en de opsomming nog een stukje meer?

<table style="font-size: 16px;" width="300" border-collapse="collapse">
<tbody>
<tr style="background:orange;">
<th style="padding-left:17px; text-align: left;"><span style= color: #ffffff;">Titel tabel</span></th>
</tr>
<tr>
<td style="padding-left:17px;border: 1px solid orange; line-height:1.3em"; "; >Introtekst
<ul>

…Beginner / gevorderd / expert…
Om succesvol te werken aan een website is het belangrijk dat je de basisbeginselen onder de knie krijgt van HTML en CSS. Je hoeft geen expert te worden, maar met wat basiskennis gaat het een stuk makkelijker 😉 [Een heel klein beetje kennis van PHP helpt ook, maar is doorgaans niet direct nodig]
Zo kan je een gekozen theme makkelijker aanpassen aan je behoeften.

Veel plezier!
== == == leesvoer
http://www.w3schools.com/css/default.asp
http://codex.wordpress.org/Getting_Started_with_WordPress
http://codex.wordpress.org/CSS
http://codex.wordpress.org/Finding_Your_CSS_Styles
http://codex.wordpress.org/FAQ_Troubleshooting
http://codex.wordpress.org/Backing_Up_Your_Database
Natuurlijk zijn er ook trainingen op het internet te vinden…
bijv. [engels, betaald] Lynda.com:
http://www.lynda.com/WordPress-tutorials/WordPress-Essential-Training/154417-2.html
Natuurlijk zijn we op dit forum bereid je verder te helpen met je vragen / keuzes…

<tr style="background:FC4903;"> >> je bent de hashtag # vergeten 😉

beter: <tr style="background:#FC4903;">
— — —
De wit-ruimte is hier gemaakt mbv padding-left:17px pas het aantal pixels aan naar wens… padding-left:27px
De hele tabel heeft een breedte van 600px. Er zijn geen ‘verschillen…’
De plaatsing van vlakken en lijnen kan de boel vertekenen;)
— — — lettertypen even groot… behalve
Alle lettertypen zijn even groot, tenzij voor een element anders wordt opgegeven. Bijvoorbeeld:
<th style=" text-align: left;"><span style= "font-size: 26px; color: #ffffff;">Titel tabel</span></th>
— — — regelhoogte
Vul overal dezelfde waarde in, behalve de titel… bijvoorbeeld

<li style=”line-height:1.7em;”>Opsomming 1
<li style=”line-height:1.7em;”>Opsomming 2

>> puntje 3. Zet ook hier een border van 1px solid in de gewenste kleur omheen.
>> puntje 4. Witruimtes / regelhoogtes zijn afhankelijk van bijv. de algemene instellingen elders in de site voor bijv.: padding, margins, line-height. Zorg dat je OF binnen deze algemene waarden blijft, OF ze expliciet toevoegt voor jouw tabel.

Je hebt nu alle kenniselementen nodig om dit keurig op te lossen 😉 zie boven 😉

Werkwijze:

1. begin even met een tabel zonder alle extra toeters en bellen
2. leg eerst de breedtemaat -en zo nodig de standaardhoogte- vast
3. bepaal dan andere maten:

• standaardmaat van font
• standaardregelhoogte

staat de basis… ?!!maak even een reservekopie…;)

• werk nu van boven naar beneden aan de afwijkende maten
• doe als laatste de kleuren

Je geheugensteuntje: http://www.w3schools.com/css/default.asp

Veel succes.
Willem