Ondersteuning » Thema en CSS/opmaak » Hoe verkeerde tabel weergave in browser oplossen?

  • Hi,

    Ik heb met behulp van de volgende code een tabel gemaakt:

    <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>

    Correcte weergave in wysiwyg-modus
    De tabel wordt correct weergegeven in de wysiwyg-modus in WordPress, zie onderstaande afbeelding:
    https://drive.google.com/file/d/0B1lVpzmtllIgd0RQUGNfYUFfeDQ/view?usp=sharing

    Onjuiste weergave in de browser-modus
    Om een of andere reden wordt de tabel niet correct weergegeven in mijn Chrome browser. De lettergrootte is veel kleiner en er is geen tabel layout te bekennen, zie onderstaande afbeelding:
    https://drive.google.com/file/d/0B1lVpzmtllIgdDBFYzZ6UmJ1clE/view?usp=sharing

    Hoe kan ik dit probleem oplossen?
    Aangezien ik een van de vele auteurs ben op dit blog heb ik geen rechten om technische aanpassingen in WordPress zelf te doen. Ik hoop dat bovenstaand probleem op een simpele manier is op te lossen.

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)
  • 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..?

    Thread starter jpl1982

    (@jpl1982)

    Hi,

    Dank voor je reactie!

    Helaas is jouw oplossing niet gelukt. Ik kan als blogger alleen html plaatsen/aanpassen van een artikel, geen css.

    Voorbeeld van gewenst eindresultaat
    Ik heb even naar een andere oplossing gezocht en het lijkt erop dat ik een stukje in de buurt van de gewenste oplossing ben… Wil steeds afwisselen tussen oranje veld met wit font en leeg veld met zwarte font.

    <table style="font-size: 16px;" width="600">
    <tbody>
    <tr>
    <th style="border: 1px solid orange; text-align: left;"><span style="color: #ff6600;">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>
    <td style="border: 1px solid orange;">Table cell 3</td>
    </tr>
    <tr>
    <td style="border: 1px solid orange;">Table cell 3</td>
    </tr>
    <tr>
    <td style="border: 1px solid orange;">Table cell 3</td>
    </tr>
    <tr>
    <td style="border: 1px solid orange;">Table cell 3</td>
    </tr>
    <tr>
    <td style="border: 1px solid orange;">Table cell 3</td>
    </tr>
    <tr>
    <td style="border: 1px solid orange;">Table cell 3</td>
    </tr>
    <tr>
    <td style="border: 1px solid orange;">Table cell 3</td>
    </tr>
    <tr>
    <td style="border: 1px solid orange;">Table cell 3</td>
    </tr>
    </tbody>
    </table>

    https://drive.google.com/file/d/0B1lVpzmtllIgM2s1YlZOeUxjYk0/view?usp=sharing

    View in browser
    https://drive.google.com/file/d/0B1lVpzmtllIgSmhBczI3OTFPNTA/view?usp=sharing

    View in Codecast.me
    https://drive.google.com/file/d/0B1lVpzmtllIgcjdQWVZwSTUtNUU/view?usp=sharing

    Hoe nu verder? Is dit mogelijk met uitsluitend html?

    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…

    Thread starter jpl1982

    (@jpl1982)

    Ziet er qua tabel-opzet al een stuk beter uit na bovenstaande:
    https://drive.google.com/file/d/0B1lVpzmtllIgdVhDTkF5ekdGWU0/view?usp=sharing

    • Hoe kan ik de oranje kleur donkerder maken?
    • Hoe kan ik de witregels tussen de zinnen kleiner maken?
    • Hoe kan ik de titel, de intro en de uitleidende tekst iets meer laten inspringen en de opsomming nog een stukje meer?

    ‘border-collapse: collapse;’ maakt verder niet uit. Dit is al prima qua opzet 🙂

    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…

    Thread starter jpl1982

    (@jpl1982)

    Oranje kleur donkerder

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

    Als ik in onderstaande code #FC4903; invoer wordt de achtergrond van de cel wit:

    <tr style="background:FC4903;">

    Zie onderstaande afbeelding als voorbeeld:
    https://drive.google.com/file/d/0B1lVpzmtllIgUGJIMHRuaGNiQmc/view?usp=sharing

    Witte ruimte tussen regels verkleinen

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

    Als ik de waarde aanpas heeft dit alleen effect op de ruimte tussen de titel en de introtekst.

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

    Zie onderstaande afbeelding als voorbeeld:
    https://drive.google.com/file/d/0B1lVpzmtllIgbTRtcnVxcUh0dEE/view?usp=sharing

    Tekst laten inspringen
    1) Hoe kan ik er voor zorgen dat de tekst van de opsomming iets meer inspringt?
    2) Ik heb de indruk dat de 1e regel (met titel) nu niet even breed is als de tabel met tekst. Hoe is dit op te lossen?

    <table style="font-size: 16px;" width="600" 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>
    <li>Opsomming 1</li>
    <li>Opsomming 2</li>
    </ul>
    Uitleidende tekst</td>
    </tr>

    Zie onderstaande afbeelding als voorbeeld:
    https://drive.google.com/file/d/0B1lVpzmtllIgeFEtTExCM0cxdjg/view?usp=sharing

    Lettertypen even groot
    Hoe kan ik alle lettertypen, behalve de titel, even groot krijgen?

    Zie onderstaande afbeelding als voorbeeld:
    https://drive.google.com/file/d/0B1lVpzmtllIgblg4ZzRkZk12a1k/view?usp=sharing

    Dank nog voor de tip! Ben inderdaad bezig met een zelfstudie, maar dit was helaas net even boven mn niveau, ook omdat ik door de urgentie niet de tijd heb om veel zelf te experimenteren… Maar ik ga de door jou genoemde sites zeker raadplegen als onderdeel van mn zelfstudie! 🙂

    <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
    Thread starter jpl1982

    (@jpl1982)

    Wederom dank voor de snelle reactie.

    Ik heb nog enkele gewenste aanpassingen:
    1) Introtekst even groot als opsomming. Ondanks dat volgens mij nergens een andere grootte wordt opgegeven zijn niet alle lettertypen even groot;
    2) Hoogte van eerste cel groter maken en tekst vertikaal laten uitlijnen;
    3) Vertekend beeld eerste cel corrigeren;
    4) Witruimte tussen introtekst introtekst en opssomming verkleinen;
    5) Uitleidende tekst even groot als opsomming
    6) Witruimte tussen uitleidende tekst en volgende tabel verkleinen.

    Zie onderstaande afbeelding met toelichting:
    https://drive.google.com/file/d/0B1lVpzmtllIgSDJ1anJQWml6NzA/view?usp=sharing

    >> 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…;)

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)
  • Het onderwerp ‘Hoe verkeerde tabel weergave in browser oplossen?’ is gesloten voor nieuwe reacties.