HTML 表のセル内のテキストを中央に配置するにはどうすればよいですか?

HTML テーブルのコンテンツを水平方向および垂直方向に中央揃えにする方法

HTML テーブルのセル内でテキストを水平方向および垂直方向に中央揃えにすると、ページの視覚的な魅力と読みやすさ。これを実現するには、CSS とインライン スタイル属性という 2 つの方法を考慮する必要があります。

CSS メソッド:

<code class="css">td {
    text-align: center;
    vertical-align: middle;
}

ログイン後にコピー

次の CSS を追加します:

1. インライン スタイル属性メソッド:

使用 内で直接 style 属性を指定します。タグ。

表のセルごとに text-align プロパティとvertical-align プロパティを「center」に設定します。

<code class="html"><table border="1">
    <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
    </tr>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table></code>

両方の方法を示す例を次に示します。上記の例では、両方のテーブルのすべてのセルのテキスト コンテンツが中央揃えで表示されます。 CSS メソッドは、複数のテーブルに配置を適用する場合、または異なるページ間でスタイルシートを再利用する場合に役立ちます。一方、インライン スタイル属性を使用すると、個々のセルをより具体的に制御できます。

以上がHTML 表のセル内のテキストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。