この記事では、HTML でのテーブルの作成について説明します。 HTML では、任意のサイズと形状、任意の数の列と行、およびさまざまなデザインのテーブルを作成できます。これらは、Web サイトのページが表構造になっている場合に作成するときに非常に役立ちます。

たとえば、サイトが 3 つの列と 2 つの行で構成されているとします。 3 列の最初の行を 1 つの共通の行に結合し、最初の列の 2 行目にサイトの名前とロゴを配置します。左側のメニュー、2列目にサイトのテキストまたはテキスト特定のページさて、最後のコラムで右メニュー。混乱した？ :) はい、これが簡単な例です: あなたが今読んでいるこのページです。これもまさにこの原則に従って作られています。実践に移って、これらすべてを実装する方法を例で明確に理解したほうがよいと思います。

テーブルを作成するには、まずタグが必要です

そして

, 文字列を作成するにはタグが必要ですそして、TABLE タグの間に書き込まれますが、列はタグによって作成されますそして、すでに理解したように、これらは TR タグの間に配置されます。

作成しましょうシンプルなテーブル、3つの列で構成されます。テーブルの HTML コード:

列 1

列 2

列 3

ブラウザのページでは、テーブルは次のように表示されます。

デフォルトでは、ブラウザには枠線付きの表が表示されます。テーブルの境界線を非表示にするには、TABLE border タグ属性が必要です。枠線のない表の例:

列 1

列 2

列 3

ページにはフレームのないテーブルが表示されます。

border 属性は、テーブルの外側の境界線のみのサイズを変更します。ご存知のとおり、値を 0 にすると非表示になり、値 1 ～ 10 で厚さを設定します。フレーム 6 のテーブルの例を見てみましょう。

列 1

列 2

列 3

ページの出力では、次のテーブルが得られます。

bordercolor 属性を使用すると、テーブル内の境界線の色を設定できます。の上 HTMLの例緑色の枠があり、厚さが 4 のテーブルを示します。

列 1

列 2

列 3

これがわかります:

ご覧のとおり、細胞の間には近距離。それを取り除く、またはその逆に距離を広げるには、cellspacing テーブル属性が役に立ちます。表内のセル間のフラストレーションが増加する HTML の例:

列 1

列 2

列 3

ブラウザには次の表が表示されます。

テキストとセルの境界線の間のスペースを変更するには、cellpadding テーブル属性を使用します。 cellpadding 属性の HTML コードの例を示します。

ブラウザに表示されるテーブルは次のとおりです。

セルをテーブルに結合するには、TD タグの属性が使用されます。

Colspan - セルを水平方向に結合します。
行範囲 - セルを垂直に結合します。

想像するのは非常に難しいので、簡単な HTML コードの例を示します。

セル1		セル2
セル 3	セル4

ブラウザでは次のテーブルが表示されます。

細胞についても、同じ原理を使って自分で試してみてください。 align 属性を使用すると、表とセル内のテキストを位置合わせできます。値は私たちにとって馴染みのあるものかもしれません: center (中央)、left (左端に沿って)、right (右端に沿って)。表を右に揃えてみましょう。

列 1

列 2

列 3

ブラウザの場合:

セル1 セル2 セル 3

セルの内容を垂直方向に整列するには、セルの valign 属性が必要です。その意味を説明します。

ベースライン - ベースラインに沿ったもの。
底 - 下端に沿って。
middle - 真ん中 (デフォルト値);
上 - 上端に沿って。

自分で HTML コードの例を作成してみてください。この段階ではこのタスクは役に立ちます:)

次に、テーブル属性について話すときに、bgcolor 属性を思い出してください。テーブルまたはセルの背景色を設定します。テーブルまたはセルの背景に画像を挿入したい場合は、background 属性を使用します。その値には画像へのパスが書き込まれます。

ちなみに、表にはテキストや画像を挿入するだけでなく、別の表も挿入できるため、表の使用は最も複雑な問題を解決するための非常に便利な武器になります。すでに述べたように、このテーブル表形式の方法を使用して実行されます。

この記事は、最初のテーブル、あるいは Web サイトの最初のページを作成するのに役立つと思います。これで、HTML でのテーブルの作成に関する記事は終わりです。次に話しますメタタグ、これはテーブルと同じくらい重要です。

発行日: 2012 年 5 月 15 日

基本的な HTML タグは、ほぼすべての Web サイト/ブログの構築の基礎となります。この記事では、常に必要となるタグの 20% を正確に学びます。

他の言語と同様に、ここでもパレート 20/80 の法則が適用されます (達成するには 20% の重要性が 80% 重要です) 望ましい結果)、これは、Web サイト構築の目標を自信を持って達成するには、コードの 20% だけを知っていれば十分であることを意味します。

HTML は言語であるため、プログラミング言語ではありませんハイパーテキストマークアップテキスト自体が物語っているので、正しく表示するためにページ上のブロックをマークアップしたり、Web ページのテキストをマークアップしたりできます。サイトのあるページから別のページへのリンクを作成するためにも使用されます。インターネット上のすべてのリンクはハイパーテキスト部分を使用して作成されます htmlコード.

- これが一番最も単純な言語！それを勉強しようと決めたのなら、それは難しいことではないことを最初から理解することが重要です。学校のコンピューターサイエンスの授業では、子供たちははるかに困難な時間を過ごしていると自信を持って言えます。

それでは始めましょう。付属のメモ帳にコードを書いておくと良いでしょう。標準プログラムオペレーティング·システムウィンドウズまたは無料プログラム「メモ帳++」。

まず、タグとは何かを定義しましょう。タグはセルそのものです html言語、一般的にはそこから構築されます。ブラウザはタグを使用して、テキストの表示方法と画像を挿入する場所を理解します。タグはマークアップ要素そのものです。

Webサイトのフレームワークを作成するためのHTMLタグ

タグはペアにすることもペア解除することもできます。ペアになっているものは開閉します。つまり、閉じているものにはバックスラッシュ「/」が含まれています。

ブログページを作成するときに、HTML ドキュメントに最初に含める必要があるのは次のとおりです。

— その間にあるものはすべて HTML コードであることをブラウザーに伝えます。
- 英語から「head」には、検索エンジンの名前、エンコーディング、メタタグが含まれます。
名前— メタタグは主に検索エンジン用で、内部にドキュメントの名前が含まれており、ブラウザの上部に表示されます。
- ブラウザへの言語エンコードを示す単一のタグ。ここで、windows-1251 - このページのテキストがロシア語であることを示します（英語の場合は windows-1252）。
— サイトのキーワードの場合。
— ページの概要。
文書の本文- 英語から「body」にはサイトのページ全体が含まれます。

これらが 標準のHTMLコードタグ、変更を加えずに、サイト/ブログのすべてのページは次の形式で始まる必要があります。

ページの本文にある html タグのリスト

タグ間サイトページの本文は次の場所にあります。

タイトル
- 最も重要な 1レベル;
と
字幕
による
字幕
— それぞれレベル 2、3、4、5、6 の小見出し。
アンカーリンク- リンク。「target=”_blank”」は新しいウィンドウで開く属性です。「title=”」はリンク先の名前です。
および — 太字で強調表示するタグ。 "" は非推奨であるため、" を使用することをお勧めします。 »;
- 斜体の場合。
— ページ上に画像を挿入する役割を担う単一のタグ。
- 英語の「p」。「段落」は、テキストを段落に分割することを意味します。デフォルトでは左揃えです。
— 行の終わりと次の行への移行を示す論理タグ。
— テキストを中央に揃える属性。
— テキストを右に揃える属性。
—
color="green" はテキストの色を担当します。この場合は緑色です。「緑」という単語は通常、「#088f47」などの 16 進数のカラーコードに置き換えられます。
face="verdana" - テキスト内のフォントを示す属性。
size=”3″ — フォントサイズ。
1. 初め
2. 2番
3. 三番目
- 番号付きリスト;
- 言葉
- 言葉
- 言葉
- 箇条書きリスト;

テーブルを作成するための HTML タグ

表自体の内部には、表の枠線の色の変更、表内の単語の整列など、多くのタグが存在しますが、この記事では主なタグについて説明しているため、表を作成するためのタグのみに焦点を当てます。自体。

— テーブルの作成を担当するタグ。「1」はテーブルの境界線の幅、「450」はテーブルの幅、そして「center」はすでにわかっています。
- タグは「」内にあります
" そしてテーブルに行を作成します。
- " タグ内に位置する行に列を作成します」おそらくすでにお察しのとおり、「150」は列の幅です。

完全に htmlテーブルタグ次のようになります:

セルNo.1	セルNo.2	セル番号 3
セル番号 4	セル番号5	セルNo.6

これらは HTML コードの主要なタグであり、多くの変更を加えることができることをもう一度強調します。また、HTML コード自体はテンプレートであり、CSS がなければ、一般に、それを使用して価値のあることを行うことは不可能であることにも注意してください。 html と css は一緒に使用するだけで驚異的に機能しますが、css についての深い知識がなくても、純粋に html だけで簡単なことを実行できます。

「HTML とは何ですか?」というテーマのビデオレッスンインデックス HTML ファイル:

気に入ったらシェアしてください:

次のことについても興味があるかもしれません:

テーブルの本体が配置されます。本体は行と列で構成されます。テーブルは 1 行ずつ埋められます。

各タグ新しい行を作成します。さらにネストされた列が作成されます。複数の列を作成できます。この場合、各行の列数を監視する必要があります。たとえば、最初の行に 5 列がある場合、次の行にも 5 列が必要です。そうしないとテーブルが浮いてしまいます。セルを結合することが可能です。

HTMLでテーブルを作る方法

HTML コードの例を次に示します。

テーブルの例

列 1 列 2

細胞に注目してください。特別なcolspan属性を使用して、セルを水平方向にスパンします。その数値は、マージされる列の数を示します。この属性に類似したタグもあります。 (テーブルヘッダー)、ここにもcolspanを入力する必要があります。結果は同じになります。ただし、多くの場合、通常の TD が使用されます。

次に、すべてのタグ属性を詳しく見てみましょう

タグの属性とプロパティ

開始タグへ

さまざまな属性を指定できます。

1. プロパティ align="parameter" - テーブルの配置を設定します。次の値を取得できます。

上の例では、テーブルを中央に揃えています align="center" 。

この属性はテーブルだけでなく、テーブルの個々のセルにも適用できます。

。したがって、セルが異なれば配置も異なります。

例えば

, , , または

Cols - 列の間に線が表示されます

なし - すべての境界線が非表示になります

rows - タグを通じて作成されたテーブル行の間に境界線が引かれます

12. プロパティ width="number" - テーブルの幅をピクセルまたはパーセンテージで設定します。

13. プロパティ class="class_name" - テーブルが属するクラスの名前を指定できます。

14. プロパティ style="styles" - スタイルはテーブルごとに個別に設定できます。

ここで、テーブルの内部に進み、テーブルのセルの属性を見てみましょう。これらの属性は開始タグに記述する必要があります

そしてと同じオプションが利用可能ですすべてに階層的に適用されます , , , または ;
Cols – 列の間に線が表示されます。
none – すべての境界線が非表示になります。
rows – タグによって作成されたテーブルの行の間に境界線が引かれます .

幅="値"

width パラメーターは、テーブルの希望の幅を指定します。デフォルトでは、ブラウザはセルの内容に基づいて表の幅と高さを自動的に計算します。幅を形成する原理は、文書を読むときに、文書をさらに水平方向にスクロールすることなく、上から下に見るのが便利であるという事実に基づいています。したがって、ブラウザは、水平スクロールを防ぐために、表の幅を HTML ドキュメントの幅以下に設定しようとします。ただし、Web 開発者が厳密に定義された幅の値を指定する必要がある場合があります。これを行うには、たとえば次のようにテーブルの幅をピクセルまたはパーセンテージで決定する幅パラメータを使用できます。

または線

...

2. プロパティbackground="URL" - 背景画像を設定します。 URLの代わりにアドレスを記述する必要があります背景画像.

例

テーブルの例

列 1 列 2

ページ上で次のように変換されます。

上の例では、背景画像は img フォルダー (HTML ページと同じディレクトリ内) にあり、画像の名前は fon.gif です。タグに style="color:white;" を追加したことに注意してください。。背景が黒に近いので、文字が背景に溶け込まないように文字を白にしました。

3. プロパティ bgcolor="color" - テーブルの背景色を設定します。パレット全体から任意の色を選択できます (HTML 色のコードと名前を参照)

4. プロパティ border="number" - テーブルの境界線の太さを設定します。前の例では、 border="1" を指定しました。これは、境界線の太さが 1 ピクセルであることを意味します。

5. プロパティ bordercolor="color" - 境界線の色を設定します。 border="0" の場合、境界線はなくなり、境界線の色は意味を持ちません。

6. プロパティ cellpadding="number" - フレームからセルの内容までのインデントをピクセル単位で指定します。

7. プロパティ cellpacing="number" - セル間の距離 (ピクセル単位)。

8. プロパティcols="number" - 列の数。設定しない場合、ブラウザ自体が列数を決定します。唯一の違いは、このパラメーターを指定すると、テーブルの読み込み速度が向上する可能性が高いことです。

9. プロパティ Frame="parameter" - テーブルの周囲に境界線を表示する方法。次の値を取得できます。

void - 境界線を描画しません
ボーダー - テーブルの周りのボーダー
上 - テーブルの上端に沿った境界線
以下 - 表の下部の境界線
hsides - 水平方向の境界線 (表の上部と下部) のみを追加します。
vsides - 垂直境界線 (表の左右) のみを描画します。
rhs - テーブルの右側のみの境界線
lhs - テーブルの左側のみに境界線を付けます

10. プロパティ height="number" - テーブルの高さをピクセルまたはパーセンテージで設定します。

11. プロパティ rules="parameter" - セル間の境界線を表示する場所。次の値を取得できます。

all - 表の各セルの周囲に線が引かれます
グループ - タグによって形成されたグループ間に線が表示されます

属性とプロパティ

1. プロパティ align="parameter" - 個々のテーブルセルの配置を設定します。次の値を取得できます。

左 - 左揃え
中心 - 中心揃え
右 - 右揃え

2. プロパティbackground="URL" - セルの背景画像を設定します。 URLの代わりに背景画像のアドレスを記載します。

3. プロパティ bgcolor="color" - セルの背景色を設定します。

4. プロパティ bordercolor="color" - セルの境界線の色を設定します。

5. プロパティ char="letter" - 位置合わせの元となる文字を指定します。 align 属性の値は char に設定する必要があります。

6. プロパティcolspan="number" - 結合する水平セルの数を設定します。

7. プロパティ height="number" - テーブルの高さをピクセルまたはパーセンテージで設定します。

8. プロパティ width="number" - テーブルの幅をピクセルまたはパーセンテージで設定します。

9. プロパティ rowspan="number" - 結合する垂直セルの数を設定します。

10. プロパティ valign="parameter" - セルの内容の垂直方向の配置。

top - セルの内容を行の上端に揃えます
中央 - 中央の位置合わせ
Bottom - 下端に揃えます
ベースライン - ベースラインへの位置合わせ

注1

タグ用

。 1つのタグのパラメータ

彼の中に

表内のセルの境界線がくっつかないようにする方法

セル間に境界線 (セルの境界線) とゼロパディングを使用すると、セルはくっついたままになり、二重境界線が表示されます。これを回避するには、表スタイルで border-collapse: Collapse を指定する必要があります。

...
読者の皆さん、これで HTML table タグについてさらに詳しく学びました。次のレッスンに進むことをお勧めします。
鬼ごっこ

には次の主なオプションのパラメータがあります。
整列する=" 左 | 中心 | 右"
文書ページ上の表の水平方向の配置を実行します。テーブルを定義するときに align パラメータを省略した場合、テーブルは左端に配置され、テキストはテーブルの周りを折り返されません (図 3.3a)。値 align=left または right が設定されている場合、表はテキストの折り返しにより左端または右端に沿って配置されます (図 3.3、b)。配置が中央で実行される場合、テキストは表の周囲に回り込みません (図 3.3、c)。
米。 3.3 表とテキストの相対位置: a – align パラメータがありません。 b – パラメータ align=right; in – パラメータ align=center
背景=" URL"
このパラメータは、テーブルの背景画像を設定するために使用されます。 URL 値で指定された画像はテーブルの高さと幅に合わせて拡大縮小されず、画像の関連部分のみが表示されることに注意してください。画像の幅および/または高さがテーブルのより小さい場合は、それが繰り返され、それに応じて領域全体が埋められます。
バックカラー="色"
テーブルの背景色を設定します。このパラメータの値として、赤、緑、青などの指定された色定数と、#RRGGBB 形式の 16 進数の色の値の両方を使用できます。たとえば、次のようになります。

...
テーブルの赤い背景色と一致します。テーブルの背景色は、背景画像の色に近づけることがよくあります。背景画像がサーバーからロードされるまで、または背景画像のロードに失敗した場合に表示されます。
border="厚さ"
border パラメーターは、テーブルの周囲の境界線の太さを設定します。デフォルトでは、境界線は 0 であり、テーブルには境界線が描画されません。
表を枠線なしで表示すると、作成するときに非常に便利です。 HTMLマークアップ- ページ。セルの内容がユーザーによって 1 つのドキュメントとして認識される場合。これは、複数段のテキストやテキスト内のリストなどを作成するときにも便利です。
border パラメーターは、セルの周囲ではなく、テーブルの周囲のみの境界線の太さを設定することに注意してください。たとえば、border=10 を設定すると、次のような視覚効果が得られます (図 3.4)。
米。 3.4. border=10 パラメータを持つテーブル
セルパディング="番号"
このパラメータは、セルの境界線とその内容の間の距離をピクセル単位で指定します。パラメータのデフォルト値は 1 です。この属性はセルに空白を追加し、その結果セルのサイズが増加します。セルパディングがないと、表内のテキストがフレームに「くっついて」しまい、認識が低下します。セルパディングを追加すると、テキストの読みやすさが向上します。境界線がない場合、この属性には特別な意味はありませんが、セル間に空白を設定する必要がある場合に役立ちます。
セル間隔="数値"
隣接する表のセル間 (より正確には、セルフレーム間) の距離を水平方向と垂直方向に同時にピクセル単位で設定します。フレームがない場合、このパラメータは cellpadding パラメータと同様の効果になります。テーブルがパラメータのセットを使用する場合
...
そうすると、セル間に距離がなくなり、セルが結合して単一の連続した空間が形成されます。テーブルのこの特性は、たとえば、単一の画像の断片がセル内に配置され、結合することでそのような情報全体の自然な視覚認識を形成するグラフィカルメニューを表示する場合に非常に便利です。
Cols="数値"
Cols 属性はテーブル内の列の数を指定し、ブラウザがテーブルを表示する準備をするのに役立ちます。この属性がないと、テーブルの内容がすべてブラウザに読み込まれて解析された後にのみテーブルが表示されます。 Cols 属性を使用すると、テーブルの内容の表示をいくらか高速化できます。
フレーム="値"
テーブルの周囲に境界線を引く方法を決定します。このパラメータには次の値を指定できます。
ボイド – フレームなし。
border – テーブルの周囲にフレームを描画します。
上記 - テーブルの上にフレームを描画します。
以下 – テーブルの下部にフレームを描画します。
hsides – テーブルの上部と下部にのみ境界線を描画します。
vsides – 垂直方向の境界線のみを描画します。
rhs – 右側に境界線を描きます。
lhs – 左側に境界線を描画します。
デフォルトでは、このパラメータはボーダーに設定されています。
ルール = "値"
ブラウザにセル間の境界線を表示する場所を指示します。この場合、表の外枠の太さはborder属性で設定します。デフォルトでは、各セルの周囲に境界線が引かれ、グリッドが形成されます。このような線の太さは 1px です。
このパラメータには次の値を指定できます。
all – 表の各セルの周囲に線が引かれます。
グループ – タグによって形成されたグループ間に線が表示されます。

...

最初のケースでは、幅は 200 ピクセルに設定され、2 番目のケースでは、ドキュメントの幅全体に拡大縮小されます。したがって、文書の幅が変化すると、テーブルの幅も変化します。

このパラメータを使用するときは、必要なテーブル幅が指定されていることを常に覚えておいてください。つまり、ブラウザが幅で指定された値まで幅を減らすことができない場合、テーブルはより広く表示されます。たとえば、表のセルに画像が含まれており、その合計幅が width で指定された幅より大きい場合、すべてのデータを正しく表示するために表の幅が拡大されます。

HTML 言語はタグの概念に基づいています。 鬼ごっこ- タグ、ラベル)。タグは山括弧 (< >) とコンテナ (開始タグと終了タグ) のペアを形成します。たとえば、コンテナ HTMLドキュメントとタグのペアですそして。 Web ページには、ドキュメントのタイトル (ヘッド) を担当するコンテナが含まれており、追加情報、ドキュメントのコンテンツ自体 (本文) を担当するコンテナーも含まれます。それらを図に示します。

したがって、HTMLドキュメントはコンテナに含まれています、ヘッダーからコンテナーまで、コンテナ内のドキュメントのコンテンツ。容器、ヘッダー (コンテナー) にあります。 ) に表示されるテキストが含まれています。トップラインブラウザウィンドウ。エンコーディングを含むタグをヘッダーコンテナーに追加することもできます。キーワード Web ページ、およびカスケードテーブルファイルを接続するためのコード CSS スタイル、プログラミング言語JavaScript、VBScriptなど。

例最も単純な HTML主要なタグのみを含むページ:

ページタイトル簡単なページの内容

このコードの結果を図に示します。

例からわかるように、「簡易ページの内容」というテキストが通常のテキストで表示されます。このテキストをフォーマットするには、特別なタグを使用する必要があります。フォーマットタグの使用例を図に示します。

フォント、色、サイズを変更するには、タグを使用しますパラメーターは「顔」、「色」、「サイズ」です。たとえば、フォント「arial」を赤色、サイズ 14 に設定するには、次のコードを記述する必要があります。

テキストの書式を設定する

テキスト内の段落を強調表示するには、タグを使用します

通常、テキストの各段落はコンテナー内に配置されます。タグはタイトルの作成に使用されます

ページ」のいずれかを指定する必要があります。「target」パラメータを使用すると、新規または既存のブラウザウィンドウで Web ページを開くことができます。
Web ページに画像を挿入するには、タグを使用しますパラメーターは src (画像へのパス)、width (画像の幅)、height (画像の高さ)、border (画像の周囲のフレーム) です。画像を挿入するコード例:
Webページを作成する際、背景色や背景画像を設定する必要がある場合が多いです。これにはタグ属性が使用されます「bgcolor」または「background-image」。背景色の挿入例:
背景画像の挿入例：
指定した属性はタグ以外にも使用できますだけでなく、テーブル、エリア、その他のタグについても同様です。これらについては、次のトピックで説明します。

HTML言語の基本タグ。 基本的なHTMLタグ