HTML テーブルの内容を中央揃えにするにはどうすればよいですか?-CSSチュートリアル-php.cn

HTML テーブルの内容を中央揃えにするにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-02 18:24:02

オリジナル

960 人が閲覧しました

How to Center Align HTML Table Contents?

HTML テーブルの内容を中央揃えにする

HTML テーブルを操作する場合、セルの内容を垂直方向と水平方向に整列させる必要がある場合があります。より視覚的に魅力的な結果が得られます。これを実現する方法は次のとおりです:

テキストを水平方向および垂直方向に中央揃えにする

インラインスタイル属性: text-align プロパティを使用して中央揃えにしますテキストを水平方向に配置し、垂直方向に配置して垂直方向に配置します。例:

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

ログイン後にコピー

CSS ルール: すべての表セルのテキストを中央揃えにする CSS ルールを定義します:

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

ログイン後にコピー

以下は両方のアプローチを示す例です:

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

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

ログイン後にコピー

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

ログイン後にコピー

これらのテクニックを使用すると、HTML テーブルのコンテンツを簡単に中央に配置でき、よりユーザーフレンドリーで視覚的に魅力的なインターフェースが得られます。

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