vanberla vanberla - 11 days ago 6
CSS Question

Headers in table centered

I want the headers of my table to be centered. Now they are centered but not in proportion. They all start in the middle of the table but they all align left while the center of the headers should be aligned.

<table class="prijslijsttable">
<th>Gelaat (epilaties niet inbegrepen)</th>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Mini-verzorging (40 min)</td> <td class="rl">&#8364; 42,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Aangepaste verzorging (1u15 min)</td> <td class="rl">&#8364; 55,00</td></tr>
<tr><td> <i>Specifieke verzorgingen :</i></td> <td class="rl"></td>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Anti-rimpel</td> <td class="rl">&#8364; 65,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Extra hydratie</td> <td class="rl">&#8364; 60,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verstevigend lift</td> <td class="rl">&#8364; 75,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Flash lift</td> <td class="rl">&#8364; 45,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verzorging heren</td> <td class="rl">&#8364; 55,00</td></tr>
</table>

<table class="prijslijsttable">
<th>Epilatie gelaat</th>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen</td> <td class="rl">&#8364; 7,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen modeleren</td> <td class="rl">&#8364; 8,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bovenlip</td> <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Kin</td> <td class="rl">&#8364; 5,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wangen</td> <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Volledig gelaat</td> <td class="rl">&#8364; 25,00</td></tr>
</table>

<table class="prijslijsttable">
<th>Epilatie lichaam</th>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Oksels</td> <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderarmen / volledig</td> <td class="rl">&#8364; 15,00 / &#8364; 18,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderbenen / volledig</td> <td class="rl">&#8364; 17,00 / &#8364; 30,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bikini</td> <td class="rl">&#8364; 15,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Rug</td> <td class="rl">&#8364; 25,00</td></tr>
</table>


CSS:

.prijslijsttable {
margin: 0px auto;
padding: 10px 0 0 0;
width: 994px;
text-align: left;
}

.prijslijsttable td {
overflow: hidden;
border-bottom: 1px dotted #41495D;
}

.prijslijsttable th {
text-align: center;
}

Answer

You must use your <th> like this: <tr><th colspan=2>Title</th></tr>

.prijslijsttable {
  margin: 0px auto;
  padding: 10px 0 0 0;
  width: 994px;
  text-align: left;
}

.prijslijsttable td {
  overflow: hidden;
  border-bottom: 1px dotted #41495D;
}

.prijslijsttable th {
  text-align: center;
  background: gold;
}

.rl {
text-align:right;  
}
<table class="prijslijsttable">
<tr><th colspan=2>Gelaat (epilaties niet inbegrepen)</th></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Mini-verzorging (40 min)</td>  <td class="rl">&#8364; 42,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Aangepaste verzorging (1u15 min)</td>  <td class="rl">&#8364; 55,00</td></tr>
<tr><td> <i>Specifieke verzorgingen :</i></td> <td class="rl"></td> 
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Anti-rimpel</td>  <td class="rl">&#8364; 65,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Extra hydratie</td> <td class="rl">&#8364; 60,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verstevigend lift</td> <td class="rl">&#8364; 75,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Flash lift</td>  <td class="rl">&#8364; 45,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verzorging heren</td> <td class="rl">&#8364; 55,00</td></tr>
</table>

<table class="prijslijsttable">
<tr><th colspan=2>Epilatie gelaat</th></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen</td>  <td class="rl">&#8364; 7,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen modeleren</td>  <td class="rl">&#8364; 8,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bovenlip</td> <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Kin</td>  <td class="rl">&#8364; 5,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wangen</td>  <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Volledig gelaat</td>  <td class="rl">&#8364; 25,00</td></tr>
</table>

<table class="prijslijsttable">
<tr><th colspan=2>Epilatie lichaam</th></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Oksels</td> <td class="rl">&#8364; 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderarmen / volledig</td> <td class="rl">&#8364; 15,00 / &#8364; 18,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderbenen / volledig</td>  <td class="rl">&#8364; 17,00 / &#8364; 30,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bikini</td> <td class="rl">&#8364; 15,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Rug</td> <td class="rl">&#8364; 25,00</td></tr>
</table>