html table的表头文字居中

### HTML Table 中 `<th>` 文本居中

为了使 HTML 表格中的 `<th>` 标签内文本居中显示，可以使用 CSS 的 `text-align` 属性设置为 `center`。这可以通过两种方式来实现：

#### 方法一：行内样式
可以直接在 `<th>` 标签内部应用 style 属性。

<table>
  <tr>
    <th style="text-align:center;">表头1</th>
    <th style="text-align:center;">表头2</th>
  </tr>
</table>

这种方法适用于只需要对个别单元格进行样式的调整情况[^1]。

#### 方法二：外部或嵌入式CSS定义类名
更推荐的做法是在页面头部或者单独的 CSS 文件里定义一个通用的选择器，并给需要居中的 `<th>` 添加相应的 class 或者直接针对所有的 `<th>` 设置样式。

/* 定义全局 th 样式 */
th {
  text-align: center;
}

如果希望只影响特定表格，则可为其分配唯一 ID 并通过该 ID 来限定作用范围:

/* 针对 id=exampleTable 的表格内的所有 th 应用此规则 */
#exampleTable th {
  text-align: center;
}

对于整个项目而言，采用第二种方法更加高效且易于维护，因为这样可以在一处修改而影响到多个地方使用的相同样式[^2]。

相关问题

el-table表头文字居中

要让 `el-table` 表头文字居中，可以通过设置 `header-align` 属性来实现。具体的实现方法如下：

<el-table :data="tableData" header-row-style="text-align:center" header-align="center">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
</el-table>

其中，`header-align` 属性可以设置表头文字的水平对齐方式，这里设置为 `center` 即可让表头文字居中。同时，为了让表头样式更好看，还可以设置 `header-row-style` 属性来调整表头行的样式，这里通过设置 `text-align:center` 来让表头文字居中。

el-table 表头文字居中

要让el-table表头文字居中，可以在el-table标签中加入`:header-cell-style="{ 'text-align': 'center' }"`。这样可以设置表头单元格的样式使其居中显示。

例如：

<el-table :data="tableData" stripe border highlight-current-row :header-cell-style="{ 'text-align': 'center' }">
  <el-table-column label="序号" type="index" width="80"></el-table-column>
  <el-table-column prop="title" label="标题"></el-table-column>
  <el-table-column prop="num" label="数量" sortable width="100"></el-table-column>
</el-table>

如果还想让表格内容也居中显示，可以在el-table标签中加入`:cell-style="{ 'text-align': 'center' }"`。

例如：

<el-table :data="gridData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
  <el-table-column label="名称" prop="realname" align="center"></el-table-column>
</el-table>