CSSでtrを設定する方法

PHPz
リリース: 2023-04-13 10:33:07
オリジナル
1607 人が閲覧しました

CSS 設定 <tr> 要素

HTML テーブルでは、<tr> 要素はテーブルの行を定義します。 CSS を使用して、背景色、境界線、配置などの <tr> 要素のスタイルを設定できます。

  1. 背景色の設定

background-color 属性を使用して、<tr>## の背景色を設定します。 # 要素。例を次に示します。

tr {
  background-color: yellow;
}
ログイン後にコピー
これにより、すべての

<tr> 要素の背景色が黄色になります。

    境界線の設定

border 属性を使用して、<tr> 要素の境界線を設定します。例を次に示します。

tr {
  border: 1px solid black;
}
ログイン後にコピー
これにより、すべての

<tr> 要素に 1 ピクセルの太さの黒い実線の境界線が追加されます。

    配置の設定

text-align 属性を使用して、<tr> 要素の水平方向の配置を設定します。 。例を次に示します。

tr {
  text-align: center;
}
ログイン後にコピー
これにより、すべての

<tr> 要素のコンテンツが水平方向に中央揃えになります。

vertical-align 属性を使用して、<tr> 要素の垂直方向の配置を設定します。例を次に示します。

tr {
  vertical-align: middle;
}
ログイン後にコピー
これにより、すべての

<tr> 要素のコンテンツが垂直方向に中央揃えになります。

    フォント スタイルと色の設定

color 属性を使用して、<tr> のフォントの色を設定します。要素。例を次に示します。

tr {
  color: blue;
}
ログイン後にコピー
これにより、すべての

<tr> 要素のテキストが青色になります。

font-family 属性と font-size 属性を使用して、<tr> 要素のテキストのフォントとサイズを設定します。 。例を次に示します。

tr {
  font-family: Arial;
  font-size: 14px;
}
ログイン後にコピー
これにより、すべての

<tr> 要素のテキストのフォントが Arial になり、フォント サイズが 14px になります。

    他のスタイルの設定
CSS を使用すると、高さ、行間隔、などの

<tr> 要素の他のスタイルを設定することもできます。等以下に例をいくつか示します。

tr {
  height: 50px; /* 设置行高为 50 像素 */
  line-height: 50px; /* 设置行距为 50 像素 */
  padding: 10px;  /* 设置内边距为 10 像素 */
}
ログイン後にコピー
上記は、CSS 設定の

<tr> 要素の一般的なスタイルの一部です。実際のアプリケーションでは、必要に応じて各 <tr> 要素を個別に設定することも、すべての <tr> 要素にクラス名を追加してまとめてスタイルを設定することもできます。

以上がCSSでtrを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート