CSS 表格单元格垂直对齐文本顶部

在本文中，我们将介绍如何使用 CSS 中的vertical-align属性来控制表格单元格中的文本垂直对齐，以及其中的一个常用值text-top。

阅读更多：CSS 教程

CSS 表格

在 HTML 中，我们经常会使用 <table> 元素来创建表格。表格由行和列组成，每个单元格都包含数据或其他元素。通过 CSS，我们可以对表格进行样式设置，使其更加美观。

例如，我们可以使用 CSS 设置表格的边框样式、背景颜色、字体等。

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td {
        border: 1px solid black;
        padding: 10px;
        text-align: center;
    }
</style>

<table>
    <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
    </tr>
    <tr>
        <td>单元格 3</td>
        <td>单元格 4</td>
    </tr>
</table>

上述代码中，我们通过 CSS 设置了表格的边框样式为实线，每个单元格的内边距为 10 像素，居中对齐。

`vertical-align` 属性

CSS 中的vertical-align属性用于设置一个元素的垂直对齐方式。该属性常用于表格中的单元格，用于控制文本或其他元素在单元格中的垂直位置。

在表格单元格中，单元格中的文本默认是垂直居中对齐的。但是有时候我们可能需要将文本顶部对齐，这时就可以使用vertical-align属性。

常用的vertical-align属性的取值包括：baseline、top、middle、bottom等。其中，text-top是top的一个子集，在这里我们将重点介绍text-top的使用。

<style>
    td {
        vertical-align: text-top;
        border: 1px solid black;
        padding: 10px;
        text-align: center;
    }
</style>

<table>
    <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
    </tr>
    <tr>
        <td>单元格 3</td>
        <td>单元格 4</td>
    </tr>
</table>

在上面的代码中，我们设置了单元格的vertical-align属性为text-top，这样表格中的文本就会顶部对齐显示。可以看到，现在表格中的文本都距离单元格的顶部更近了。

示例说明

假设我们有一个包含员工信息的表格，其中一列为姓名，一列为职位，我们希望职位信息能够和姓名的顶部对齐，而不是垂直居中。

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td {
        border: 1px solid black;
        padding: 10px;
        text-align: center;
    }
    .name {
        vertical-align: text-top;
    }
</style>

<table>
    <tr>
        <td class="name">张三</td>
        <td>经理</td>
    </tr>
    <tr>
        <td class="name">李四</td>
        <td>开发工程师</td>
    </tr>
</table>

通过给姓名列的单元格添加一个自定义的类名.name，并设置其vertical-align属性为text-top，我们成功地将职位信息与姓名的顶部对齐了。