CSS 表格对齐


目录

    显示目录


水平对齐

text-align 属性设置水平对齐方式(如左、右或居中) <th> 或 <td> 中的内容。

默认情况下,<th>元素的内容是居中对齐的,并且 <td> 元素的内容左对齐。

要居中对齐 <td> 元素的内容,请使用 text-align: center

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

例子

 td
{
   
text-align: center;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>


要左对齐内容,请强制将 <th> 元素对齐 左对齐,使用 text-align: left 属性:

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

例子

th
{
   
text-align: left;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>



垂直对齐

vertical-align 属性设置垂直对齐方式(如顶部、底部或中间) <th> 或 <td> 中的内容。

默认情况下,表格内容的垂直对齐方式为中间(对于 <th> 和 <td> 元素)。

以下示例将 <td> 元素的垂直文本对齐方式设置为底部:

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

例子

td
{
   
height: 50px;
   
vertical-align: bottom;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  height: 50px;
  vertical-align: bottom;
}
</style>
</head>
<body>

<h2>The vertical-align Property</h2>

<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>