ホームページ  >  記事  >  ウェブフロントエンド  >  HTML テーブルのセル内のコンテンツを中央揃えにするにはどうすればよいですか?

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-02 02:21:02686ブラウズ

How to Center Align Content in HTML Table Cells?

HTML テーブルのコンテンツを中央揃えにする方法

HTML テーブルを作成する場合、多くの場合、各セルのコンテンツを中央揃えにすることが望ましいです。水平方向と垂直方向。これにより、表の読みやすさと美しさが向上します。

表のセル内のテキストを水平方向に中央揃えにするには、text-align プロパティを指定した CSS を使用できます。次の例はこれを示しています。

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

垂直方向の配置には、vertical-align プロパティを使用できます。このコード スニペットは、テキストをセル内で垂直方向の中央に配置します。

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

インライン スタイル属性を使用してテキストを中央に配置することもできます。特定のセルに配置を適用するだけの場合は、これがより便利です:

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

インライン スタイル属性を使用した例:

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

CSS またはインライン スタイルを使用すると、次のことができます。 HTML テーブルのセルの内容を簡単に中央揃えにして、よりプロフェッショナルで整理された外観を提供します。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。