table 内的中心 TH

Question

试图将 <TH> 元素置于跨越两列的 table 中。无论我尝试什么，<TD> 都没有移动。

td {
  text-align: left;
  padding: 5px;
}

table {
  text-align: center;
}

.contacttable {
  margin-left: auto;
  margin-right: auto;
  background-color: #FCF0F2;
  border-style: solid;
  border-color: grey;
  padding: 10px;
  font-size: 16px;
  display: inline-block;
  width: auto;
}

th {
  text-align: center;
}

<table class="contacttable">
  <tr colspan="2">
    <th id="tablehead">Contact Me</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>Email Address Here </td>
  </tr>
  <tr>
    <td>Telephone</td>
    <td>Telephone Number Here</td>
  </tr>
</table>

我希望 'Contact Me' TH 位于下面两列的中央？

Screenshot of Table

Answer 1

使用 colspan="2" 作为 th 的属性（而不是 tr）使其跨越两列：

td {
  text-align: left;
  padding: 5px;
}

table {
  text-align: center;
}

.contacttable {
  margin-left: auto;
  margin-right: auto;
  background-color: #FCF0F2;
  border-style: solid;
  border-color: grey;
  padding: 10px;
  font-size: 16px;
  display: inline-block;
  width: auto;
}

th {
  text-align: center;
}

<table class="contacttable">
  <tr>
    <th id="tablehead" colspan="2">Contact Me</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>Email Address Here </td>
  </tr>
  <tr>
    <td>Telephone</td>
    <td>Telephone Number Here</td>
  </tr>
</table>

table 内的中心 TH

Center TH within table

html

css

html-table