table klopt niet in Wordpress

[femke98]

Ik heb in Wordpress een table gemaakt.
Ik zal via een bijlage laten zien hoe het er in het Dashboard uitziet en ik laat jullie dan een link zien hoe het eruit komt te zien als het geplaatst is. Ik begrijp het dus niet.



Link: http://hsvnb.nl/wedstrijdloket/competitie-2013/uitslag-blok-2-2/

Je ziet dat de invoer helemaal niet in het midden staat, terwijl in de tabel het wel zo staat.
En als ik de html erbij neem:

<table width="570" border="0" cellspacing="0"><colgroup width="91"></colgroup> <colgroup width="110"></colgroup> <colgroup width="100"></colgroup> <colgroup width="109"></colgroup> <colgroup width="108"></colgroup> <colgroup width="97"></colgroup>
<tbody>
<tr>
<td colspan="2" align="CENTER" valign="BOTTOM" height="21"><b><span style="color: #000000; font-size: medium;">deelnemers</span></b></td>
<td colspan="4" align="CENTER" valign="BOTTOM"><b><span style="color: #000000; font-size: medium;">blok 1</span></b></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="21"></td>
<td align="LEFT" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;"><strong>26-05-13</strong></span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;"><strong>09-06-13</strong></span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;"><strong>23-06-13</strong></span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;"><strong>totaal</strong></span></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="21"><span style="color: #000000; font-size: medium;">Elly</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">de Bruyn</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">12,8</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Astrid</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Ebbelaar</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">14,2</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Rinus</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Foulon</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">X</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">X</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Arie</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Geel</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">0</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Driekus</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Gerritsen</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">8,9</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Patrick</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Huisman</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">X</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">X</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Joop</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Kabalt</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">X</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">X</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Hans</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Mensink</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">29,4</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Gertjan</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Rebel</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">0</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Gerri</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Snel</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">4,9</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Hannes</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">v.d.Linden</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">18,5</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Bouke</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">v.d.Ploeg</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">12,5</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Bert</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Visser</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">3,5</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Harrie</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Westerbrink</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">0</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Wietse</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Bams</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">4,2</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
<tr>
<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Ad</span></td>
<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Ruizendaal</span></td>
<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">0</span></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
<td align="CENTER" valign="BOTTOM"></td>
</tr>
</tbody>
</table>

dan zien jullie dat er echt staat dat het in CENTER is. Dus wat gaat hier fout?

 

[csshunter]

Hoi Femke,
Oeps, het is niet echt 100% html5 *), en in html5 is align="center" tot obsolete verklaard: een Vreselijk Verboden Voorwerp dat browsers niet meer hoeven te ondersteunen (zie ook hier).

Als je de betreffende cellen een class="center" met .center {text-align: center} meegeeft, is het puike css en werkt het wel.
Maar misschien kan je beter een text-align:right en wat padding-right gebruiken: dan komen de de komma's van de getallen allemaal op dezelfde plaats, en de eenheden, tientallen, enz. ook recht onder elkaar.

___________
*) Het lijkt eerder html4.01 Transitional, zegt de html-validator.

 

[femke98]

Hahaha, daar heb ik geen kaas van gegeten. Ik eb niet zo goed in tables en zo. Maar ik begrijp wel dat als ik align verander in class, dat het dan wel goed komt.

Dan wordt dit: <td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">12,8</span></td>

dus dit: <td class="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">12,8</span></td>

Maar waar moet dan .center {text-align: center}


Bedankt weer zover!

 

[lucky1]

Hallo Femke,

Gekeken naar je website gaat het in principe goed, echter word er in de CSS van de site een selector gebruikt die de stijling overruled.
Dit resulteert erin dat de text links word uitgelijnd:

caption, th, td
{
font-weight: normal;
text-align: left;
}

Deze selector en stijling is te vinden op de volgende locatie:
.../wp-content/themes/d5-corporate-lite/style.css regel 63

 

[femke98]

Oh kijk aan.....en daar kan ik het dan veranderen zodat het wel goed komt te staan.\Kan jij me aangeven wat ik dan moet veranderen in die file css?

 

[lucky1]

Hallo,

Wat Csshunter inderdaad zegt is handig om door te voeren, je zal aan de td elementen waarbij de tekst gecentreerd moet worden de class="center" toevoegen.

Je zal dan zoiets krijgen:

div#content td.center
{
text-align: center;
}

Ik neem aan dat je toegang hebt tot de FTP omgeving.
Je zal dan de opgegeven code toe kunnen voegen aan het css bestand.

 

[femke98]

Ja, daar kan ik bij.
Maar wat ik dan nog niet begrijp is, moet ik dan op de pagina in het dashboard in de table wel wat veranderen, of alleen in het bestand.

Dan wordt dit: <td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">12,8</span></td>

dus dit: <td class="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">12,8</span></td>

of is dit niet genoeg.

 

[csshunter]

Hoi Femke,
Intussen was ik ook even aan het knutselen.

Om meteen van alles af te zijn (ook de valign, die eveneens invalid code is, en al die binnenwerkse <span>'s in de cellen), zou ik dit doen in de html:
In plaats van:

<table width="570" border="0" cellspacing="0">
	<colgroup width="91"></colgroup>
	<colgroup width="110"></colgroup>
	<colgroup width="100"></colgroup>
	<colgroup width="109"></colgroup>
	<colgroup width="108"></colgroup>
	<colgroup width="97"></colgroup>

<tbody>
	<tr>
		<td colspan="2" align="CENTER" valign="BOTTOM" height="21"><b><span style="color: #000000; font-size: medium;">Deelnemers</span></b></td>
		<td colspan="4" align="CENTER" valign="BOTTOM"><b><span style="color: #000000; font-size: medium;">Blok 2<br /></span></b>	</td>
	</tr>
	<tr>
		<td align="LEFT" valign="BOTTOM" height="21"></td>
		<td align="LEFT" valign="BOTTOM"></td>
		<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;"><strong>26-05-13</strong></span></td>
		<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;"><strong>09-06-13</strong></span></td>
		<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;"><strong>23-06-13</strong></span></td>
		<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;"><strong>totaal</strong></span></td>
	</tr>
	<tr>
		<td align="LEFT" valign="BOTTOM" height="21"><span style="color: #000000; font-size: medium;">Elly</span></td>
		<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">de Bruyn</span></td>
		<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">12,8</span></td>
		<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">12,9</span></td>
		<td align="CENTER" valign="BOTTOM"></td>
		<td align="CENTER" valign="BOTTOM"></td>
	</tr>
	<tr>
		<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Astrid</span></td>
		<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Ebbelaar</span></td>
		<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">14,2</span></td>
		<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">0</span></td>
		<td align="CENTER" valign="BOTTOM"></td>
		<td align="CENTER" valign="BOTTOM"></td>
	</tr>
	<tr>
		<td align="LEFT" valign="BOTTOM" height="20"><span style="color: #000000; font-size: medium;">Rinus</span></td>
		<td align="LEFT" valign="BOTTOM"><span style="color: #000000; font-size: medium;">Foulon</span></td>
		<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">X</span></td>
		<td align="CENTER" valign="BOTTOM"><span style="color: #000000; font-size: medium;">X</span></td>
		<td align="CENTER" valign="BOTTOM"></td><td align="CENTER" valign="BOTTOM"></td>
	</tr>
enz.

... gebruik je de volgende opgeschoonde html:

<table class="standentabel" width="570" border="0" cellspacing="0">
	<colgroup width="91"></colgroup>
	<colgroup width="110"></colgroup>
	<colgroup width="100"></colgroup>
	<colgroup width="109"></colgroup>
	<colgroup width="108"></colgroup>
	<colgroup width="97"></colgroup>

<tbody>
	<tr>
		<td colspan="2"><strong>Deelnemers</strong></td>
		<td colspan="4" style="text-align: center; border: 1px dotted #C0C0C0;"><strong>Blok 2</strong></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px;"><strong>26-05-13</strong></td>
		<td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px;"><strong>09-06-13</strong></td>
		<td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px;"><strong>23-06-13</strong></td>
		<td style="border: dotted #C0C0C0; border-width: 0 1px 1px 1px;"><strong>totaal</strong></td>
	</tr>
	<tr>
		<td>Elly</td>
		<td>de Bruyn</td>
		<td>12,8</td>
		<td>12,9</td>
		<td></td>
		<td>25,7</td>
	</tr>
	<tr>
		<td>Astrid</td>
		<td>Ebbelaar</td>
		<td>14,2</td>
		<td>0</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>Rinus</td>
		<td>Foulon</td>
		<td>X</td>
		<td>X</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>Arie</td>
		<td>Geel</td>
		<td>0</td>
		<td>0</td>
		<td></td>
		<td></td>
	</tr>
enz.

Er zijn wat randjes om de titel-cellen gezet, maar die kunnen er ook af.
Nu is de hele class="center" voor aparte cellen niet meer nodig, want verder kan alles met css geregeld worden omdat de tabel zelf een benaderbare class="standentabel" heeft gekregen:

.standentabel td { /* alle cellen in principe gecentreerd en allemaal hetzelfde */
    text-align: center;
    vertical-align: bottom;
    color: #000000;
    font-size: medium;
    line-height: 170%;
    }    
.standentabel td:first-child { /* eerste kolom links uitgelijnd */
	text-align: left;
	}
.standentabel td:first-child+td { /* tweede kolom links uitgelijnd */
	text-align: left;
	}
.standentabel td:first-child+td+td+td+td+td { /* totaal-kolom vet en ander kleurtje (ook in IE8 en eerder) */
	font-weight: bold; 
	color: #054C37;
	}

Deze css voeg je toe op het eind van de style.css en klaar.
Het zou ook in de <head> van de pagina zelf toegevoegd kunnen worden (zoals in de testpagina hieronder), maar dan moet je dit herhalen op andere pagina's als daar soortgelijke tabellen in moeten komen.

Toelichting
De totaalkolom heeft hier een ander kleurtje en is vet gemaakt (hoeft ook niet). In plaats van het hele rijtje td:first-child+td+td+td+td+td in de css zou je ook het mooiere css3 td:last-child {...} kunnen gebruiken, maar dat werkt niet in IE8 en eerdere IE's.

• Test: standen-tabel-nw.htm
  Opm.: Er zit nog wel wat invalid html bij, die beter met css geregeld kan worden.

 

[csshunter]

En met wat andere css en html komen de getallen mooi onder elkaar.

• Test: standen-tabel-nw2.htm

 

[femke98]

WOW!! Dat is mooi zeg. die tweede dan, die hierboven. (nw2)
Dus even kijken hoe ik die in de pagina krijg. mag ik vragen wat er nu anders is met deze in vergelijking met die andere? Want nu alles netjes staat, is dat anders natuurlijk.

 

[femke98]

hm, heb je voorbeeld in de pagina gezet, maar zie hier:

http://hsvnb.nl/?page_id=3761&preview=true

dat werkt dus niet,.

(heb nog niet de css.style aangepast trouwens)

 

[csshunter]

Hoi Femke,
@ nr. #10:
De html in nummertje nw2 is nu:

<tbody>
	<tr>
		<td colspan="2"><strong>Deelnemers</strong></td>
		<td colspan="4" style="text-align: center; border: 1px dotted #C0C0C0; padding-right: 0 !important;"><strong>Blok 2</strong></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px; text-align: center; padding-right: 0 !important;"><strong>26-05-13</strong></td>
		<td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px; text-align: center; padding-right: 0 !important;"><strong>09-06-13</strong></td>
		<td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px; text-align: center; padding-right: 0 !important;"><strong>23-06-13</strong></td>
		<td style="border: dotted #C0C0C0; border-width: 0 1px 1px 1px; text-align: center; padding-right: 0 !important;"><strong>totaal</strong></td>
	</tr>
	<tr>
		<td>Elly</td>
		<td>de Bruyn</td>
		<td>12,8</td>
		<td>12,9</td>
		<td></td>
		<td>25,7</td>
	</tr>
enz.

En de css is geworden:

/* =============================== toe te voegen ============================== */

.standentabel td { /* alle cellen rechts uitgelijnd met een padding rechts */
    text-align: right;
    padding-right: 27px !important;
    vertical-align: bottom;
    color: #000000;
    font-size: medium;
    line-height: 170%;
    }    
.standentabel td:first-child { /* eerste kolom links uitgelijnd, geen padding rechts */
    text-align: left;
    padding-right: 0 !important;
    }
.standentabel td:first-child+td { /* tweede kolom links uitgelijnd, geen padding rechts */
    text-align: left;
    padding-right: 0 !important;
    }
.standentabel td:first-child+td+td+td+td+td { /* totaal-kolom vet en ander kleurtje (ook in IE8 en eerder) */
    font-weight: bold; 
    color: #054C37;
    }
/* ============================ einde toe te voegen =========================== */

=====

@ nr. #11: De "zie hier" link geeft momenteel een Page Not Found.

 

[femke98]

He, ja....wat gek. (had hem als concept opgeslagen en dus niet gepubliceerd) Nou ja, je zag dus op de pagina de tekst staan van de html en dus niet het mooie tabelletje.

Ik ga het proberen!! Bdankt weer.

(eerst de css doen ja, ik weet het!)

Het werkt niet.
Ik heb de css aangepast en de pagina even gemaakt, door de code html over te zetten op de pagina.
Kijk hier: http://hsvnb.nl/test/

zo ziet het er uit, de nummers/cijfers/punten niet center.

 

[csshunter]

Awel, maar op je testpagina staat in het begin ook nog de oude html:

<tbody>
    <tr>
        <td colspan="2"><strong>Deelnemers</strong></td>
        <td style="text-align: center; border: 1px dotted #C0C0C0;" colspan="4"><strong>Blok</strong></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px;"><strong>26-05-13</strong></td>
        <td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px;"><strong>09-06-13</strong></td>
        <td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px;"><strong>23-06-13</strong></td>
        <td style="border: dotted #C0C0C0; border-width: 0 1px 1px 1px;"><strong>totaal</strong></td>
    </tr>
enz.

Moet worden, zoals in nw2 en nr. #12 hierboven:

<tbody>
    <tr>
        <td colspan="2"><strong>Deelnemers</strong></td>
        <td colspan="4" style="text-align: center; border: 1px dotted #C0C0C0; padding-right: 0 !important;"><strong>Blok 2</strong></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px; text-align: center; padding-right: 0 !important;"><strong>26-05-13</strong></td>
        <td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px; text-align: center; padding-right: 0 !important;"><strong>09-06-13</strong></td>
        <td style="border: dotted #C0C0C0; border-width: 0 0 1px 1px; text-align: center; padding-right: 0 !important;"><strong>23-06-13</strong></td>
        <td style="border: dotted #C0C0C0; border-width: 0 1px 1px 1px; text-align: center; padding-right: 0 !important;"><strong>totaal</strong></td>
    </tr>
enz.

Toelichting:
(Even naar rechts scrollen om alles te zien)
Omdat nu de algemene center voor alle cellen vervangen is door rechts-uitlijnen met een padding, moet dit in de kopjes juist weer ongedaan gemaakt worden: wel de {text-align:center} gebruiken, en niet de padding-right van 27px toepassen.

 

[femke98]

rechts scrollen? ik zie gewoon alles hoor. (heb een hoge resolutie scherm, bedoel je dat)

klik ik nu de link aan van test, zie ik het wel goed staan.. Gek.............nou ja, bijna goed eigenlijk. Anders dan dat het er stond. Wellicht omdat de css het nog niet had verwerkt?
ik ga mij er zo nog even in verdiepen, nu nog gauw eerst boodschappen doen.

 

[femke98]

http://hsvnb.nl/test/

nu is die wel goed.
En dus kan ik de overige deelnemers erin zetten.

 

[femke98]

http://hsvnb.nl/wedstrijdloket/competitie-2013/uitslag-blok-1/

het is nu helemaal goed, en blok 2 is nu ook helemaal okee: http://hsvnb.nl/wedstrijdloket/competitie-2013/uitslag-blok-2-2/

Ik ben blij want het ziet er nu helemaal goed uit! bedankt voor jullie hulp!!!

Ik hou de test pagina nu in concept, zodat ik altijd een mooi voorbeeld bij de hand heb.