HTML学習その1（フロントエンド学習）

参考学習 Web サイト:

私の学習アイデアは、ウェブサイト + 演習 + ビデオです。

ビデオは心を開く方法を提供するので重要です。あなたはこう思うでしょう、ああ！結果的には大丈夫でした。これは本やウェブサイトのチュートリアルでは教えてもらえないことです。また、チュートリアルによっては、仕事や将来に使用しない可能性があるため、その場合はビデオを見るのも良い解決策です。

Web サイトや書籍での学習、およびビデオ学習と比較してください。

初期の段階で基本的なことを理解した後は、Web サイトやアプリをフォローすることをお勧めします。これらの現在の Web サイトやアプリは開発され、包括的であり、将来的には更新され、さらに便利になります。ただし、難易度が高くなると基礎から改善する必要があります。現時点では、ビデオを見ることをお勧めします。ビデオを見たり、他の人の話を聞いたり、他の人のアイデアに従うことで、思考が広がり、視野が広がり、学習の困難さの効率が向上します。

1. HTMLとは何ですか?

HTML はハイパーテキストマークアップ言語の略です
HTML は Web ページの作成に使用される標準のマークアップ言語です
HTMLはWebページの構造を記述します
HTMLは一連の要素で構成されています
HTML 要素はブラウザにコンテンツの表示方法を指示します。
HTML 要素は、「これは見出しです」、「これは段落です」、「これはリンクです」など、コンテンツの一部をマークします。

2. 基本概要

ウェブドキュメント

すべての HTML ドキュメントは doctype 宣言で始まる必要があります: 。<!DOCTYPE html>

HTML ドキュメント自体はで始まり、で終わります。<html></html>

HTML ドキュメントの表示部分はとの間です。<body></body>

宣言はドキュメントの種類を示し、ブラウザが Web ページを正しく表示できるようにします。<!DOCTYPE>

ページの上部 (HTML タグの前) に 1 回だけ表示できます。

ステートメントでは大文字と小文字が区別されません。<!DOCTYPE>

HTML の見出しは to タグを使用して定義されます。<h1><h6>

<h1>最も重要な見出しを定義します。最も重要でない見出しを定義します。<h6>

HTML 段落はタグを使用して定義されます。<p>

HTML リンクはタグを使用して定義されます。<a>

HTML 画像はマークアップを使用して定義されます。<img>

HTML要素

HTML 要素は、開始タグから終了タグまでのすべてです。

<タブ名>ここにコンテンツが入ります...</タグ名>

いくつかの HTML 要素の例:

<H1>初めてのタイトル</h1>

<p>最初の段落です。</p>

注:一部の HTML 要素にはコンテンツがありません (<br> 要素など)。これらの要素は空要素と呼ばれます。空の要素には終了タグがありません。

HTMLタグは大文字と小文字を区別しません

2. (2.5) Web ページの属性

すべての HTML 要素は属性を持つことができます
属性は要素に関する追加情報を提供します
属性は常に開始タグで指定されます
属性は通常、名前と値のペアの形式で指定されます。例: name="value"

ソース属性

このタグは、HTML ページに画像を埋め込むために使用されます。表示する画像へのパスを指定する属性:<img>src

プロパティで URL を指定するには、次の 2 つの方法があります。src

絶対的なウェブサイト: 良くありません。(他人のURL画像のアドレスを使用します)

相対 URL: これを使用します (ローカルファイルにダウンロードするのと同等)

幅と高さのプロパティ:

タグには、画像の幅と高さをピクセル単位で指定するおよび属性も含める必要があります。<img>width height

alt 属性:

何らかの理由で画像を表示できない場合に画像の代替テキストを指定するタグの必須属性。これは、接続が遅い、プロパティが間違っている、またはユーザーがスクリーンリーダーを使用していることが原因である可能性があります。<img src=“” alt=“”>

スタイル属性 (詳細は後ほど)

この属性は、色、フォント、サイズなどのスタイルを要素に追加するために使用されます。style

ロングプロパティ

この属性は常にタグ内に含めて、ページの言語を宣言する必要があります。これは検索エンジンとブラウザを支援するためです。lang<html>

例: <html lang="en"> は、言語として英語を指定することを意味します。

改善方法: <html lang="en-US">

国コードを属性の言語コードに追加することもできます。したがって、最初の 2 文字はHTML ページの言語を定義し、最後の2 文字は国を定義します。

Title 属性 (これは興味深い)

この属性は、いくつかの追加の関連要素を定義します。title

title 属性の値は、要素の上にマウスを置くとツールチップとして表示されます。

例: <p title="あなたは私の犬">これは段落です</p>

注:引用符の選択では、属性値自体に二重引用符が含まれている場合は、一重引用符を使用する必要があります。逆も同様です。

3. 基本構造と使い方

大きな見出し:

すべての HTML 見出しにはデフォルトのサイズがあります。ただし、CSS プロパティを使用して、プロパティで見出しのサイズを指定できます。style font-size（这个是字体大小的方法。）

例: <h1 style="font-size:60px;">見出し 1</h1>

ページ段落

HTML 要素は段落を定義します。<p>

段落は常に新しい行で始まり、ブラウザは段落の前後にスペース (余白) を自動的に追加します。

このタグは HTML ページ内のトピック区切り文字を定義し、通常は水平線として表示されます。<hr>

この要素は、HTML ページ内のコンテンツ (または定義の変更) を区切るために使用されます。<hr>

HTML 要素は改行を定義します。<br>

HTML 要素は、フォーマット済みのテキストを定義します。<pre>

要素内のテキストは固定幅フォント (通常は Courier) で表示され、空白と改行が保持されます。<pre>

ウェブスタイル

HTML 属性は、色、フォント、サイズなどのスタイルを要素に追加するために使用されます。style

例えば：

<タグ名 スタイル="プロパティ:値; ">

このプロパティはCSS プロパティです。値はCSS 値です。(CSSのスタイルは後で学びます)

HTML 要素の背景色を定義するCSS プロパティ。background-color

例: <body style="background-color:powderblue;">

また、さまざまなラベル要素の背景の色を設定することもできます: <p style="background-color:Tomato;">これは段落です。</p>

CSS プロパティは HTML 要素(テキストの色)を定義します。color

例：<h1 style=" color :blue;">これは見出しです</h1>

CSS プロパティは、HTML 要素に使用するフォントを定義します(フォントの選択)。font-family

例：<h1 style=" font-family :verdana;">これは見出しです</h1>

CSS プロパティは HTML 要素(フォントサイズ)を定義します。font-size

例：<h1 style= "font-size: 300%;">これは見出しです</h1>

CSS プロパティは、 HTML 要素の水平方向のテキスト配置を定義します。text-align

例： <h1 style="text-align:center;">見出しを中央揃え</h1>

HTMLテキスト形式

HTML には、特別な意味を持つテキストを定義するための要素がいくつか含まれています。

書式設定要素は、特殊なタイプのテキストを表示するように設計されています。

<b>- 太字
<strong>- 重要なテキスト
<i>- 斜体文字
<em>- 強調されたテキスト
<mark>- マークアップテキスト
<small>- 小さなテキスト
<del>- テキストを削除する
<ins>- テキストを挿入
<sub>- 下付きテキスト
<sup>- 上付きテキスト

引用と引用要素

、、、、、および HTML 要素を紹介します。<blockquote><q><abbr><address><cite><bdo>

<ブロック引用> <blockquote>

別のソースから参照されるセクションを定義する HTML 要素。quote><block

ブラウザは通常、要素をインデントします。<blockquote>

HTML タグは短い引用符を定義します。<q>

<p>WWF の目標は次のとおりです: <q>人々が自然と調和して暮らす未来を築くこと。</q></p>

<abbreviation> は省略形を表します<abbr>(这个有意思捏)

HTML タグは、「HTML」、「CSS」、「Mr」、「Dr」、「ASAP」、「ATM」などの略語または頭字語を定義します。<abbr>

マークアップの略語は、ブラウザ、翻訳システム、検索エンジンに有益な情報を提供します。

ヒント:グローバルタイトルプロパティを使用すると、要素の上にマウスを置くと説明の略語/頭字語を表示できます。

ドキュメントまたは記事の作成者/所有者の連絡先情報を定義する HTML タグ(斜体で表示)。<address>

HTML タグは、創造的な作品 (本、詩、歌、映画、絵画、彫刻など) を定義します。<cite>

注：人名は作品名ではありません。

要素内のテキストは通常、斜体で表示されます。<cite>

<bdo> 双方向カバレッジ用

BDO は双方向オーバーレイの略です。

HTML タグは、現在のテキストの方向をオーバーライドするために使用されます。<bdo> <dir="rtl">表示反向输出信息。

使用法：<bdo dir="rtl">この行は右から左に書かれます</bdo>

隠しコンテンツ

注釈を使用してコンテンツを非表示にすることができます。

これは、コンテンツを一時的に非表示にする場合に役立ちます:

ウェブカラー

HTML カラーは、事前定義されたカラー名、または RGB、HEX、HSL、RGBA、または HSLA 値を使用して指定されます。

Webページの背景色と文字色については以前紹介しました。

ボーダの色

境界線の色を設定できます。

例：<h1 style=" border: 2px Solid Tomato ; ">Hello World</h1>

RGB カラー値は、赤、緑、青の光源を表します。

RGBA カラー値は、アルファチャネル (不透明度) を備えたRGB の拡張です。

適切な色を選択してください:

ウェブ上でランダムに RGB カラーを選択します。

灰色の色合い

グレーの色合いは通常、3 つのパラメータすべての等しい値を使用して定義されます。

RGBAカラー値

RGBA カラー値は、色の不透明度を指定するアルファチャネルを備えた RGB カラー値の拡張です。

RGBA カラー値は次のように指定されます。

RGBA (赤、緑、青、アルファ)

16進数のカラー値

HTML では、16 進値を使用してカラー形式を指定できます。

#rggbb _

ここで、rr (赤)、gg (緑)、および bb (青) は、00 から ff までの 16 進値です (10 進数の 0 ～ 255 と同じ)。

使い方はRGBと同じで、影の部分も同じ3色の値を渡します。

HSL および HSLA カラー

HSL は色相、彩度、明度の略です。

HSLA カラー値は、アルファチャネル (不透明度) を備えた HSL の拡張です。

HSL (色相、彩度、明度))

色相は、カラーホイール上の 0 ～ 360 の度数です。0 は赤、120 は緑、240 は青です。

彩度はパーセント値です。0% はグレーの色合い、100% はフルカラーです。

明るさもパーセント値です。0% は黒、100% は白です。

グレーの色合いは通常、色相と彩度を 0 に設定し、明度を 0% から 100% まで調整して暗い/明るい色合いを定義します。

HTMLスタイル - CSS（スタイルとリンクに分かれています）

CSSはCascading Style Sheetsの略です。

CSS は多くの作業を節約します。すべての Web ページの複数のレイアウトを一度に制御できます。

CSSとは何ですか?

カスケードスタイルシート (CSS) は、Web ページのレイアウトをフォーマットするために使用されます。

CSS を使用すると、色、フォント、テキストサイズ、要素間の間隔、要素の配置とレイアウトの方法、画像や背景色を使用した背景、デバイスごとに異なる表示や画面サイズなどを制御できます。

ヒント:カスケードという言葉は、親要素に適用されたスタイルが親にも適用されることを意味します。したがって、本文テキストの色を「青」に設定すると、本文内のすべての見出し、段落、その他のテキスト要素も同じ色になります (他に何かを指定しない限り)。

CSSを使用する

CSS は 3 つの方法で HTML ドキュメントに追加できます。

インライン - HTML 要素の属性を使用するstyle
内部 - セクション内の要素を使用する<style><head>
外部 - 要素を使用して外部 CSS ファイルにリンクします。<link>

CSS を追加する最も一般的な方法は、スタイルを外部 CSS ファイルに保持することです。ただし、このチュートリアルでは、インラインスタイルと内部スタイルを使用します。これは、デモが簡単で、自分で試しやすいためです。

インライン CSS は、 HTML 要素のプロパティを使用します (単一のHTML 要素に適用されます)。style

例：<h1 style="color:blue;">青い見出し</h1>

内部 CSS は、HTML ページのセクションで定義されます (特定のタグのすべての要素に適用されます)。<head><style>

例えば：

<head>
<style>
body {background-color: Powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>

外部 CSS スタイルシート。各 HTML ページのセクションにスタイルシートへのリンクを追加します。<head>

例:
<head>
<link rel="stylesheet" href="styles.css"> //スタイルファイルを指します。
</head>

"スタイル.css":

body { 背景色:パウダーブルー; } h1 { 色: 青; } p { 色: 赤; }

CSS境界線

HTML 要素の周囲の境界線を定義する CSS プロパティ。border

CSS パディング (テキストと境界線の間の距離)

テキストと境界線の間のパディング（スペース）を定義する CSS プロパティ。padding

CSSマージン（境界線と外界との間の距離）

境界線の外側のマージン（スペース）を定義する CSS プロパティ。margin

HTML リンク - 構文

HTML タグはハイパーリンクを定義します。次の構文があります。<a>

ターゲット属性

デフォルトでは、リンクされたページは現在のブラウザウィンドウに表示されます。この設定を変更するには、リンクに別のターゲットを指定する必要があります。

このプロパティは、リンクされたドキュメントを開く場所を指定します。target

このプロパティには、次のいずれかの値を指定できます。target

_self- 契約違反。クリックするとドキュメントを同じウィンドウ/タブで開きます
_blank- 新しいウィンドウまたはタブでドキュメントを開きます (最も一般的に使用されます)
_parent- 親フレームでドキュメントを開きます
_top- ウィンドウ全体でドキュメントを開きます

例

target="_blank" を使用して、リンクされたドキュメントを新しいブラウザウィンドウまたはタブで開きます。

<a href="https://www.w3schools.com/" target="_blank" > W3Schools にアクセスしてください!</a>

画像をリンクとして使用する

画像をリンクとして使用するには、タグをタグの中に入れるだけです。<img><a>

メールアドレスへのリンク

ユーザーの電子メールプログラムを開くリンクを作成する (新しい電子メールを送信させるため) プロパティで使用されます。 mailto: href

<a href=" mailto:[email protected]">メールを送信</a>

リンクとしてのボタン

HTML ボタンをリンクとして使用するには、JavaScript コードを追加する必要があります。

JavaScript を使用すると、ボタンのクリックなどの特定のイベントで何が起こるかを指定できます。

<button οnclick="document.location='default.asp'">HTML チュートリアル</button>

HTML リンク - 異なる色 (リンクのスタイルを変更)

HTML リンクは、訪問されたか、訪問されていないか、アクティブであるかに応じて、異なる色で表示されます。

デフォルトでは、リンクは次のように表示されます (すべてのブラウザーで)。

未訪問のリンクには下線が付き、青色で表示されます
訪問したリンクは紫色の下線付きで表示されます
アクティブなリンクは赤色で下線が引かれます

CSS を使用してリンク状態の色を変更できます。

例 (これは覚えておく必要があります。a:link (未訪問)、a:visited (訪問後)、a:hover (マウスホバリング)、a:active (アクティブリンク))

ここでは、未訪問のリンクは緑色で表示され、下線は付きません。訪問したリンクはピンク色で表示され、下線は付きません。アクティブなリンクは黄色で下線が付きます。また、マウスをリンク上に置くと (a:hover)、リンクが赤くなり、下線が付きます。

完全な例:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<p>You can change the default colors of links</p>

<a href="html_images.asp" target="_blank">HTML Images</a> 

</body>
</html>

リンクボタン: (vant コンポーネントのボタンメソッドではなく、いくつかのスタイルを使用するだけです。これについては後で学びます)

CSS を使用して、リンクをボタンとしてスタイル設定することもできます。

<スタイル>
a:link、a:visited { 背景色: #f44336; 色: 白; パディング: 15 ピクセル 25 ピクセル; テキスト整列: 中央; テキスト装飾: なし。表示: インラインブロック; a :hover、a:active { 背景色:赤; } </スタイル>

HTML リンク - ブックマークの作成 (興味深いピンチ)

HTML リンクを使用してブックマークを作成すると、読者は Web ページの特定のセクションにジャンプできます。

Web ページが長い場合は、ブックマークが便利です。

ブックマークを作成するには、まずブックマークを作成し、次にブックマークにリンクを追加します。

リンクをクリックすると、ページが上下にスクロールしてブックマークされます。

例えば：

まず、次の属性を使用してブックマークを作成します。id

次に、同じページからブックマークへのリンク (「第 4 章にジャンプ」) を追加します。

第4章をクリックすると第4章へジャンプします。

画像の文法

HTML タグは、Web ページに画像を埋め込むために使用されます。<img>

ラベルには 2 つの必須属性があります。<img>

src - イメージへのパスを指定します
alt - 画像の代替テキストを指定します

幅と高さ

この属性を使用して、画像の幅と高さを指定できます。style

スタイル="幅:500px;高さ:600px;">

スタイルシートの使用と幅と高さの使用の違いに注意してください（実際には、インラインCSSとアウトラインCSSの違い）

画像をリンクとして使用するには、タグの中にタグを入れます。<img><a>

浮遊イメージ

CSS プロパティを使用して、画像をテキストの右側または左側にフローティングします。float

例： <p><img src="smiley.gif" alt="スマイリーフェイス" style="float:right; width:42px;height:42px;">
画像はテキストの右側にフロート表示されます。</p>

イメージマップ

HTML タグはイメージマップを定義します。イメージマップはクリック可能な領域で作成されます。領域は 1 つ以上のラベルによって定義されます。<map><area>

タグを使用して画像を挿入します。他の画像との唯一の違いは、属性を追加する必要があることです。<img>usemap

値はハッシュタグで始まり、その後にイメージマップの名前が続き、イメージとイメージマップの間の関係を作成するために使用されます。usemap#

ヒント: 任意の画像をイメージマップとして使用できます。

ステップ：

1. イメージマップを作成します (最初にタグ img src='' を使用してイメージを挿入し、次にイメージマップを作成します。)

<マップ名=" ">

次に、要素を追加します。<map>

この要素はイメージマップの作成に使用され、必須の属性を使用します。<map name="workmap">

<マップ名="ワークマップ">

この属性の値は、の属性と同じである必要があります。<img usemap=“#workmap”>

2. フィールドの作成

次に、クリック可能な領域を追加します。

クリック可能な領域は要素を使用して定義されます。<area>

形

クリック可能領域の形状を定義する必要があり、次のいずれかの値を選択できます。

rect- 長方形の領域を定義します
circle- 円形エリアを定義する
poly- 多角形領域を定義します
default- エリア全体を定義する

画像上にクリック可能な領域を配置するための座標も定義する必要があります。

形状 = "長方形"

の座標は、x 軸と y 軸のペアで表示されます。shape="rect"

左マージン 270 ピクセル、上マージン 350 ピクセルの座標:270,350

描画された長方形の境界を取得します。

<areashape=" rect " coords="34, 44, 270, 350" href="computer.htm">

ページの x 位置と y 位置を取得するにはどうすればよいですか?

参考記事：

デスクトップ上のマウスの X Y 位置を確認するにはどうすればよいですか_Baidu Know (baidu.com)

qq を使用することも可能です。実際、スクリーンショットの方法を使用すると、スクリーンショットを撮ったページのサイズが表示され、そのサイズが左上から開始する場合、その終了点は必要な x と y の値になります。

同様に、shape = "rectangle" 337、300 は x、y の座標、44 は画像の半径です。

<areashape=" circle " coords="337, 300, 44" href="coffee.htm">

形状 = "多角形"

直線 (ポリゴン) から形成される形状を作成するために使用される複数の座標点が含まれます。shape="poly"

これを使用して任意の形状を作成できます。

例：<エリアシェイプ="ポリ" 座標="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="クロワッサン.htm">

イメージマップとJavaScript

クリック可能な領域で JavaScript 関数をトリガーすることもできます。

要素にイベントを追加して JavaScript 関数を実行します: < areashape="circle" οnclick= "myFunction()">

HTML要素の背景画像

HTML 要素に背景画像を追加するには、HTML 属性と CSS プロパティを使用します。style background-image

例: <p style="background-image: url('img_girl.jpg');">

または: スタイルシートで使用します。

<スタイル>
p { 背景画像: url('img_girl.jpg'); } </スタイル>

注: 背景画像が要素より小さい場合、要素の終わりに達するまで、画像は水平方向と垂直方向の両方で繰り返されます。

修正: 背景画像が繰り返されないようにするには、プロパティをfrom に設定します。background-repeat no-repeat

例えば：

背景カバー

背景画像が要素全体を覆うようにしたい場合は、プロパティを次のように設定できます。background-sizecover.

さらに、要素全体が常にカバーされるようにするには、プロパティを次のように設定します。background-attachment fixed:

このようにして、背景画像は伸ばさずに要素全体をカバーします (画像は元の比率を維持します)。

<image> 要素 (つまり、画面サイズに応じて使用する画像を選択します。このメソッドはモバイルモードと Web モードで使用されます)

HTML 要素を使用すると、さまざまなデバイスや画面サイズに応じてさまざまな画像を表示できます。<picture>

各要素には、画像がいつ最適であるかを定義する属性があります。<source media=“”>

この要素には 2 つの主な目的があります。<picture>

1. 帯域幅

画面やデバイスが小さい場合は、大きな画像ファイルを読み込む必要はありません。ブラウザは、一致する属性値を持つ最初の要素を使用し、後続の要素を無視します。<source>

2. フォーマットのサポート

一部のブラウザまたはデバイスは、すべての画像形式をサポートしていない場合があります。この要素を使用すると、すべての画像形式を追加でき、ブラウザは認識した最初の形式を使用し、後続の要素を無視します。<picture>

ファビコン

ファビコンは、ブラウザタブのページタイトルの横に表示される小さな画像です。

アイコン画像の総称は「favicon.ico」です。

例えば：

<head>
<title>マイページのタイトル</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>

シート

テーブル行: <tr> <tr>

表のセル<td></td>

ヘッダー: <th> </th>

(th は tr の下に配置され、通常は 1 回のみ使用され、td が最もよく使用されます)

テーブルの境界線

CSS スタイル内:

table、th、td { border: 1px 単色黒; }

ただ、この種の問題にはちょっと問題がありまして、二重枠の問題が出てきます。

単一の境界線に折りたたまれる:

CSS プロパティをに設定します。border-collapse collapse

上記の CSS スタイルを追加します。 border-collapse: Collapse;

例えば：

各セルの背景色を設定し、境界線を白にします

table, th, td { border: 1px 単色白; 境界崩壊: 崩壊; } th, td { 背景色: #96D4D4; }

丸いテーブルの枠線

このプロパティでは、境界線が丸くなります。border-radius

th, td { //テーブルを省略して境界線になりますborder
: 1px Solid black;
border-radius: 10px;
}

破線の表の境界線

このプロパティを使用して、境界線の外観を設定できます。border-style

ボーダの色

このプロパティを使用して、境界線の色を設定できます。border-color

テーブルサイズ

テーブルの幅を 100% に設定します。

<テーブルスタイル="幅:100%">

注:幅のサイズ単位としてパーセンテージを使用すると、親要素 (この場合は要素) と比較したこの要素の幅が意味されます。<body>

テーブルの列幅

特定の列のサイズを設定するには、 or 要素に属性を追加します。style<th><td>

最初の列の幅を 70% に設定します: <th style="width:70%">Firstname</th>

テーブルの行の高さ

上と同じ: <tr style="height:200px">

表のタイトルを揃える

デフォルトでは、表の見出しは太字で中央揃えになります。

表のタイトルを左揃えにするには、CSS プロパティを使用します。text-align

例: th { text-align: left; }

複数の列のヘッダーcolspan<th>

ヘッダーは 2 つ以上の列にまたがることができます: <thcolspan="2">名前</th>

表のキャプション: <キャプション>

セルのパディング: パディング

padding-bottom padding-left padding-right

セル間隔:border-spacing table

デフォルトでは、スペースは 2 ピクセルに設定されています。

例：テーブル { ボーダー間隔: 30px; }

セルを複数の列にまたがるようにするには、次のプロパティを使用します。colspan （前面讲了一次）

同じ行スパン: rowspan

ゼブラストライプ: テーブルの 1 行おきに背景色を追加します。

次のようなセレクターを使用します。:nth-child(even)

tr :nth-child(even) { 背景色: #D6EEEE; }

縦方向のゼブラストライプ

for table データ要素を設定します。:nth-child(even)

td:nth-child(偶数)、th:nth-child(偶数) { 背景色: #D6EEEE; }

水平分割線:border-bottom tr

tr { border-bottom: 1px ソリッド #ddd; }

ホバリング可能なテーブル:hover tr

セレクターを使用します。例: tr:hover {背景色: #D6EEEE;}

テーブルグループ要素:

この要素は、特定のスタイルシート列を設定するために使用されます。<colgroup>

列を非表示にする

次のプロパティを使用して列を非表示にできます。visibility: collapse