vanberla
Reputation: 81
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">€ 42,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Aangepaste verzorging (1u15 min)</td> <td class="rl">€ 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">€ 65,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Extra hydratie</td> <td class="rl">€ 60,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verstevigend lift</td> <td class="rl">€ 75,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Flash lift</td> <td class="rl">€ 45,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verzorging heren</td> <td class="rl">€ 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">€ 7,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen modeleren</td> <td class="rl">€ 8,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bovenlip</td> <td class="rl">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Kin</td> <td class="rl">€ 5,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wangen</td> <td class="rl">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Volledig gelaat</td> <td class="rl">€ 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">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderarmen / volledig</td> <td class="rl">€ 15,00 / € 18,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderbenen / volledig</td> <td class="rl">€ 17,00 / € 30,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bikini</td> <td class="rl">€ 15,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Rug</td> <td class="rl">€ 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;
}
Upvotes: 0
Views: 144
Answers (3)
Abdul Basit
Reputation: 374
Add colspan attribute to your th. This would be your complete code. I have added an additional css property of text-align right on right td to make it more presentable.
<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">€ 42,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Aangepaste verzorging (1u15 min)</td> <td class="rl">€ 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">€ 65,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Extra hydratie</td> <td class="rl">€ 60,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verstevigend lift</td> <td class="rl">€ 75,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Flash lift</td> <td class="rl">€ 45,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verzorging heren</td> <td class="rl">€ 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">€ 7,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen modeleren</td> <td class="rl">€ 8,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bovenlip</td> <td class="rl">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Kin</td> <td class="rl">€ 5,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wangen</td> <td class="rl">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Volledig gelaat</td> <td class="rl">€ 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">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderarmen / volledig</td> <td class="rl">€ 15,00 / € 18,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderbenen / volledig</td> <td class="rl">€ 17,00 / € 30,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bikini</td> <td class="rl">€ 15,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Rug</td> <td class="rl">€ 25,00</td></tr>
</table>
<style>
.prijslijsttable {
margin: 0px auto;
padding: 10px 0 0 0;
width: 994px;
text-align: left;
}
td.rl {
text-align: right;
}
.prijslijsttable td {
overflow: hidden;
border-bottom: 1px dotted #41495D;
}
.prijslijsttable th {
text-align: center;
}
</style>
Upvotes: 2
G-Cyrillus
Reputation: 105873
you may use the attribute colspan, to fill entire tr or use a caption tag.
see : https://www.w3.org/TR/html401/struct/tables.html
caption, th {
text-align:center;
}
.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;
} <table class="prijslijsttable">
<caption>Gelaat (epilaties niet inbegrepen)</caption>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Mini-verzorging (40 min)</td> <td class="rl">€ 42,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Aangepaste verzorging (1u15 min)</td> <td class="rl">€ 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">€ 65,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Extra hydratie</td> <td class="rl">€ 60,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verstevigend lift</td> <td class="rl">€ 75,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Flash lift</td> <td class="rl">€ 45,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verzorging heren</td> <td class="rl">€ 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">€ 7,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen modeleren</td> <td class="rl">€ 8,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bovenlip</td> <td class="rl">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Kin</td> <td class="rl">€ 5,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wangen</td> <td class="rl">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Volledig gelaat</td> <td class="rl">€ 25,00</td></tr>
</table>Upvotes: 1
L777
Reputation: 8457
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">€ 42,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Aangepaste verzorging (1u15 min)</td> <td class="rl">€ 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">€ 65,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Extra hydratie</td> <td class="rl">€ 60,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verstevigend lift</td> <td class="rl">€ 75,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Flash lift</td> <td class="rl">€ 45,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Verzorging heren</td> <td class="rl">€ 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">€ 7,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wenkbrauwen modeleren</td> <td class="rl">€ 8,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bovenlip</td> <td class="rl">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Kin</td> <td class="rl">€ 5,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Wangen</td> <td class="rl">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Volledig gelaat</td> <td class="rl">€ 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">€ 10,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderarmen / volledig</td> <td class="rl">€ 15,00 / € 18,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Onderbenen / volledig</td> <td class="rl">€ 17,00 / € 30,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Bikini</td> <td class="rl">€ 15,00</td></tr>
<tr><td><img src="check.gif" width="15px" height="15px" alt="check"> Rug</td> <td class="rl">€ 25,00</td></tr>
</table>Upvotes: 2
Related Questions
- Space between two rows in a table?
- how to make a whole row in a table clickable as a link?
- Word-wrap in an HTML table
- Can we have multiple <tbody> in same <table>?
- Add border-bottom to table row <tr>
- Alternate table row color using CSS?
- Table fixed header and scrollable body
- Adding a table row in jQuery
- How do you get centered content using Twitter Bootstrap?
- HTML table with fixed headers?