フロントエンド テーブルのヒント - 基本的な使い方とスタイル

説明: HTML コードを書いているときに、Tbody タグに遭遇しました。このタグはテーブル用です。各ページには、head と body の 2 つの部分があります。より複雑なページでは、ページ レイアウトに多くのテーブルが使用されます。テーブルの構造は比較的複雑です。複雑なので、表はヘッダー、本文、脚注の3 つの部分に分かれています。そして、これらの 3 つの部分は、thead、tbody、tfootでマークされています。

基本的な使い方とスタイリング

  • thead は、タイトルなどを入れるために使用されます
  • tbody はデータのオントロジーを置きます
  • tfoot は、表などの脚注を入れます...

ラベルは、それが表すものを使用します。それが彼らの仕事です。(head of the head table
tbody table body
tfoot table foot)
TBody は、含まれる各テーブル行がテーブルの主要部分であることを示すためにテーブルで使用されます。
TBody、THead、および TFoot はテーブル内の 3 つの「ブロック」を形成します。THead はテーブルのヘッド部分を示し、TFoot はテーブルの脚注部分を示します。TBody は、フォームの本体部分を示します。

1.ラベル

(1) テーブル テーブル
(2) tr テーブル行
(3) th テーブル ヘッダー
(4) td ユニット

2、CSSリセット

table{border-collapse;} cell gap merge
th,td{padding:0;} reset cell default padding
3, cell merge
(1) colspan horizo​​ntal merge
(2) rowspan vertical merge

3. 式:

最初に、検索 (結合する最初のセル)、
2 番目に結合 (セルを結合)、
3 番目に削除 (冗長セルを削除) します。

テーブルのヒント

フォームの共通プロパティ
ここに画像の説明を挿入

tr (表の行)、td、th (表の列)

ここに画像の説明を挿入

テーブルの共通属性:

boder-collapse: 結合境界を設定します ----> (折りたたみ、分離)。デフォルトは分離です。具体的な意味は、結合せずに 2 つの境界を分離することです。

テーブルを中央に配置します: margin:npx auto;

テーブルの最初の行を太字にします: table tr:nth-child(1) (疑似クラスを使用)

テーブルのその他の要素

tbody - テーブル本体

キャプション—表のキャプション

thead:テーブル ヘッダー

tfoot - テーブルの下部

th - テーブルのヘッダー セル

表のセル結合

class table /*7 列をマージ*/ am/*2 行をマージ*/

th はデフォルトで太字です

マージ後、占有されているグリッドを削除する必要があります

border-spacing: 20px 30px; (セル間の上下左右の間隔を示します)

表形式の圧縮コード
ここに画像の説明を挿入

基本的な属性は、width (全幅)、height (縦横比)、border (境界線の値)、cellspacing (表の内側の幅、つまり、表と tr の間の距離)、cellpadding (表との間の距離) です。テーブル内の化学元素、つまり tr と tr の間の距離)、bordercolorlight (テーブルの明るい境界線の色)、bordercolordark (テーブルの暗い境界線の色)、bgcolor (テーブルの背景色)、background (表の背景パターン)、bordercolor (表の境界線の色)

テーブル内の仕切りのプロパティ

機能するのは、3 つの値 (cols、rows、none) を持つルールのメイン パラメータです。

rules=cols の場合、テーブルは水平分割線を非表示にします。つまり、テーブルの列のみが表示されます。

rules=rows の場合、垂直の分割線は非表示になります。つまり、テーブルの行のみが全員に表示されます。

rules=none の場合、縦の仕切りと横の仕切りはすべてを隠し、誰もがテーブルの境界線だけを見ることができます。

表外仕切りの特性

テーブルの外枠の表示・非表示はframeパラメータで調整できます。注: 表の外枠でのみ機能し、内枠と線では機能しません。

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>

只显示左、右边框 <table frame=vsides>

只显示上、下边框 <table frame=hsides>

只显示左边框 <table frame=lhs>

只显示右边框 <table frame=rhs>

不显示任何边框 <table frame=void>

以下のコードを tr に設定すると無効になります。

border-bottom: 1px ソリッド #e5e5e5;

次の属性をテーブルに追加して解決します。

テーブル { ボーダー崩壊: 崩壊; }

おすすめ

転載: blog.csdn.net/qq_44552416/article/details/125222732