如何设置HTML表格中文本的对齐方式？有哪些属性？

<style>
    /* 将表格内所有单元格的文本居中 */
    table td, table th {
        text-align: center;
    }

    /* 某个特定单元格右对齐 */
    .right-aligned-cell {
        text-align: right;
    }
</style>

<table>
    <tr>
        <td>默认左对齐</td>
        <td style="text-align: right;">行内右对齐</td>
        <th>标题居中</th>
    </tr>
    <tr>
        <td class="right-aligned-cell">类选择器右对齐</td>
        <td>普通文本</td>
        <td><p style="text-align: justify;">这是一段尝试两端对齐的文本，看看它在表格单元格中的表现如何。通常需要多行文字才能看出效果。</p></td>
    </tr>
</table>

<style>
    table {
        height: 200px; /* 为了演示垂直对齐，给表格一个高度 */
        width: 100%;
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid #ccc;
        height: 80px; /* 给单元格一个高度 */
    }
    .top-aligned {
        vertical-align: top;
    }
    .middle-aligned {
        vertical-align: middle;
    }
    .bottom-aligned {
        vertical-align: bottom;
    }
</style>

<table>
    <tr>
        <td class="top-aligned">顶部对齐的文本</td>
        <td class="middle-aligned">垂直居中对齐的文本</td>
        <td class="bottom-aligned">底部对齐的文本</td>
    </tr>
    <tr>
        <td class="top-aligned">更多内容<br>多行文本</td>
        <td class="middle-aligned">更多内容<br>多行文本</td>
        <td class="bottom-aligned">更多内容<br>多行文本</td>
    </tr>
</table>

<style>
    .my-table {
        width: 100%;
        border-collapse: collapse;
    }
    .my-table td, .my-table th {
        border: 1px solid #ddd;
        padding: 8px;
        height: 100px; /* 为了看出垂直对齐效果，给单元格一个固定高度 */
        vertical-align: middle; /* 核心：垂直居中 */
        text-align: center; /* 顺便也水平居中 */
    }
</style>

<table class="my-table">
    <tr>
        <th>标题一</th>
        <th>标题二</th>
        <th>标题三</th>
    </tr>
    <tr>
        <td>短文本</td>
        <td>这是一段相对较长的文本，用来测试垂直居中对齐的效果，看看它在单元格中是否能很好地居中显示。</td>
        <td>另一个短文本</td>
    </tr>
</table>

<style>
    .justified-cell {
        text-align: justify;
        /* 为了看到效果，可能需要限制宽度并增加内容 */
        width: 150px;
    }
</style>
<table>
    <tr>
        <td class="justified-cell">
            这是一段需要两端对齐的文本，看看它在单元格中的表现，文字会尽可能填充整个宽度。
        </td>
    </tr>
</table>

<style>
    .flex-cell {
        display: flex;
        align-items: center; /* 垂直居中所有子项 */
        justify-content: space-between; /* 子项之间平均分布空间 */
        border: 1px solid #ccc;
        padding: 10px;
    }
    .icon { /* 假设是图标 */
        margin-right: 10px;
    }
    .button { /* 假设是按钮 */
        margin-left: 10px;
    }
</style>
<table>
    <tr>
        <td class="flex-cell">
            <span class="icon">?</span>
            <span>这是一个灵活对齐的单元格内容</span>
            <button class="button">操作</button>
        </td>
    </tr>
</table>

<style>
    .padded-cell {
        padding: 15px 20px; /* 上下15px，左右20px内边距 */
        text-align: right;
    }
</style>
<table>
    <tr>
        <td class="padded-cell">
            右对齐且有更多内边距的文本。
        </td>
    </tr>
</table>

<style>
    .no-wrap-cell {
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 溢出部分隐藏 */
        text-overflow: ellipsis; /* 溢出时显示省略号 */
        text-align: center; /* 文本居中 */
        max-width: 100px; /* 限制单元格宽度 */
    }
</style>
<table>
    <tr>
        <td class="no-wrap-cell">
            这是一个非常非常长的文本，它应该不会换行，并且会显示省略号。
        </td>
    </tr>
</table>