表格中的标题集中

Question

我希望我的表格的标题居中。现在他们居中但不成比例。它们都从桌子的中间开始，但是它们都对齐，而标题的中心应该对齐。

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

将colspan属性添加到您的th。这将是您的完整代码。我在右边的td添加了另一个text-align的css属性，使其更具可呈现性。

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


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

Answer 2

您必须使用<th>这样的结果：<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>

Answer 3

您可以使用属性colspan来填充整个tr或使用标题标记。

请参阅：https://www.w3.org/TR/html401/struct/tables.html

＆＃13;

＆＃13;

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

＆＃13;

 <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">&#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>

＆＃13;

＆＃13;

＆＃13;