HTMLセルに画像を入力します。 ほとんど標準モード
1. HTMLテーブルとは何ですか？なぜ彼らは必要なのですか？
hTMLテーブル - これは各HTMLページの最も基本的なコンポーネントの1つであり、それぞれ各サイトです。 たとえば、サイトサイトはすべてテーブル：写真、テキスト、リンク、登録フォームで構成されています。
2. HTMLテーブルからのタグは何ですか？
タグHTMLテーブルを指定することは次のように書かれています。
しかし、私たちが知っているので、すべてのテーブルは線と列（セル）で構成されているので、タグとそれらのために設定する必要があります。
そして、すべてのタグを1つのテーブルにマージしようとしましょう。 これを行うには、2行と3列からなるHTMLテーブルを作成します。
このHTMLは非常に簡単に行われます。 まず、テーブル自体のタグを置き、内側に必要な行数を置く（例2行の例2）。
その後、各文字列は列タグを使用してセルに分割されます。
| - セル1.1。 | - セル1.2。 | - セル1.3。 |
| - セル2.1 | - セル2.2。 | - セル2.3。 |
実際、碑文の最初の図は数字番号であり、第2のセル数（1×2は1行目、第2のセルなど）です。
3. HTMLテーブルの背景色を設定する方法
そして今、テーブルの背景や各セルの背景を別々に指定しましょう。
そのため、属性は背景を設定するために使用されます bgcolor \u003d "color_fone".
たとえば、プレート全体に1色を設定する必要がある場合は、次のようになります。
| - セル1.1。 | - セル1.2。 | - セル1.3。 |
| - セル2.1 | - セル2.2。 | - セル2.3。 |
たとえば、黄色いタブレットを作る必要がある場合は、書きます。
必要に応じて 背景色の行を設定します HTMLテーブル、その属性 bgcolor \u003d "color_fone" タグに適用されます
|
| 1.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.3 |
この場合、属性 セル番号 タグ内のテキストに白色を指定します。
同様に、 各セルの色を別々に。 たとえば、青のセル1.2の色を変更する必要がある場合は、開始タグ内の内側にあります。
4.テーブルのHTMLセルの幅と高さを設定する方法？
したがって、セルの幅と高さを手動で設定するには、高さと幅の属性を使用します。 それらは、1行、セル（列）のテーブル全体に設定できます。 高さと幅はピクセルとパーセンテージの両方に設定できます。 私たちの場合は、列（セル）のピクセル単位と高さを設定します。
高さ - 属性セルの高さを設定します
幅。 - セルの幅を定義する属性
そして今の例について：
今、私たちはそれぞれの行の中に一度だけ細胞の高さを設定した理由を説明します。
これにもかかわらず、あなたの行のすべてのセル（列）が高さが最も高くなるでしょう。 そして各行の幅は別々に設定されています！
テーブル全体の高さと幅を設定できます。 この場合、すべてのセル（列）と行は、個人的にこれらのパラメータを指定しないと（テーブルまたはピクセルの合計幅（高さ））。
また、身長の高さと幅の幅を設定する必要があります パーセントで:
この例のように、セルに40パーセントの幅を指定した場合、それは私たちが残りのセルのためにさらに60パーセントが残っていることを意味します、すなわち それらの幅の量は60パーセントを超えてはいけません。 すべてが非常に簡単です：私たちが100％しかない量で。 私たちは信じています：100 - 40 \u003d 60。
5.テキストをHTMLテーブルの中に整列させる方法は？
そして今度は、HTMLテーブルのテキストを左端に沿って右端と中央に表示する方法を考え出しましょう。
これは属性を使用して行われます。
align \u003d "left" - 左端のHTMLテーブル内のレベルテキスト
align \u003d "center" - レベル hTMLテキスト 中央のテーブル
align \u003d "right" - 右端のHTMLテーブル内のレベルテキスト
したがって、整列属性はより正しい値と左の値をとることができます。 タグと一緒に使用すると価値を正当化する
例えば、 hTMLコード テキスト、そのテキストは中央に位置合わせされ、次のようになります。
|
属性を指定します align \u003d "center" 開口部で
| 1x1 | 1.2 | 1x3 |
| 2.1 | 2×2。 | 2.3 |
そして、HTMLテーブル内のテキストを上または下のエッジの中にあるテキスト、つまりセルの内容が正確にITの途中にあるだけであるようにする方法の例を考慮します（デフォルト）。そして、そして底部と同じようにさえも。
垂直方向の整列は属性によって設定されます。
valign \u003d "top" - コンテンツはセルの上部にあります
valign \u003d "middle" - コンテンツはセルセンターにあります
valign \u003d "下" - コンテンツはセルの下部に配置されます
この例でこれらの属性を検討しましょう。
|
それが私たちがブラウザを見ると属性の作業の結果を見れば私たちが得るものです 整列します。 そして 貴族。:
| 1x1 | 1.2 | 1x3 |
| 2.1 | 2×2。 | 2.3 |
6.セルと列のHTMLテーブルを組み合わせる方法？
私たちの記事のこの部分では属性について話します コルシャン。 そして rowspan。.
コルシャン。 - 配布する列数を決定します このセル
rowspan。 - このセルが配布されている行数を決定する
値 コルシャン。 そして rowspan。 2以上の値、すなわち セルは2つ以上の列（行）に伸びることができます。
したがって、この例では、セル1x1を2列（セル）に引き伸ばします。 これを行うには、COLSPAN \u003d "2"属性を使用し、1x1セルの場合はそれを話します。 コードは次のようになります。
見ているように、1x1のセルは2つのセルの長さに広がります。 したがって、その長さはこれら2つのセルの集計可能な長さ（160ピクセル）に等しい。 セル1x1の幅属性を処方していませんでしたが、それを行うことにした場合は、幅は160ピクセルに尋ねられます。 また、この例では、セル1x3はなく、すなわち 最初の行では、なぜ2つのセルのみがすでに説明したのです.Colspan属性のおかげで、既に説明しました。
Colspan属性とRowaPanの属性を使用すると、非常に慎重に連絡する必要があります。 エラーはあなたのサイトが「行く」という事実につながる可能性があります。
そして今、colspanパラメータを扱うときRowspanパラメータに対処しましょう。 行動の原則は同じです。
|
| 1.1 | 1.2 | |
| 2.1 | 2.2 | |
したがって、我々は細胞とHTMLテーブルの列のセルを組み合わせることを学びました。
7.インデントを削除、追加、変更する方法とHTMLフレームテーブルの設定方法は？
そのため、以前は、インデントのセルの間にHTMLテーブルを作成しました。 さらに見やすくするために、テーブルのためにフレームを追加しましょう。 これは属性を使用して行われます。
border \u003d「フレーム幅単位」 - フレームの幅を設定します
borderColor \u003d "Frame Color"- フレームの色を設定します
たとえば、HTMLテーブルのブラックフレーム1ピクセルを作成しましょう。
このタグのために。
|
|||||
ブラウザの結果を見ると、セル間の距離が明確にわかります（ セルペーシングこのHTMLテーブルは10ピクセルに増加し、テキストとセルの内縁との間の距離は20ピクセル増加しました。
| 1.1 | 1.2 | |
| 2.1 | 2.2 | |
一般的にインデントを削除する必要がある場合は、 cellpadding \u003d "0"そして cellSpacing \u003d "0".
8. 1つのHTMLテーブルはどのように挿入されますか？
HTMLテーブルを研究するために最終段階に近づきます。 今度はもう一方のテーブルを挿入することを学びます。
この例では、セル1.2の内側に、1行と2列からなる新しいテーブルを挿入します。 内部HTMLテーブルREDフレーム2ピクセル幅とセル0ピクセル間の距離を設定します。 また、内側のテーブルはセルの上部に置きます。
とても簡単に行われます。
|
|||||||
これは、私たちのテーブルの新しい変換の結果として起こったことです（赤いセル - 大きいテーブルの内側にある内部テーブル）。
| 1.1 |
|
|||
| 2.1 | 2.2 | |||
この段階で、この記事を終えます。 私はそれが成功し、理解のため難しくないことが判明したと思います、そして私はあなたがテーブルを使ってもっと持っていないでしょう。
そのテーブルは、Webページの目に見えないフレームを作成するのに非常に重要な役割を果たします。 そしてこれは、テキスト、メニュー、写真などを均等にそして美しく手配するのを助けます
理解を深めるために、私があなたに伝えようとしているもの、Webページフレームの例を見てください。
そう、 hTMLでシンプルなテーブルを作る方法?
テーブルを作成するには、3つのタグを使用します。
テーブル
–
このタグはテーブルを開くために必要です。 これは他の要素を含む一種のコンテナです。 ここでは、ドーナツなしでは理解できないように着ています。 何もない、例を見ると共有します。
閉じる
テーブルは行で構成されています
| 行1。 | 行1。 |
| シリーズ2。 | シリーズ2。 |
| 行3。 | 行3。 |
| セル1。 | セル2。 |
| セル1。 | セル2。 |
| セル1。 | セル2。 |
tr – テーブルの新しい行を作成します。 閉じる 義務的な。
TD。 – 行に新しいセルを作成します。 閉じる 義務的な。
上記のすべてをよりよく理解するための例を考えてみましょう。
| 行1セル1 | rANGE1 CELL 2。 |
| シリーズ2セル1 | 行2セル2. |
| 範囲3セル1 | 範囲3セル2 |
これが結果です。
| 行1セル1 | rANGE1 CELL 2。 |
| シリーズ2セル1 | 行2セル2. |
| 範囲3セル1 | 範囲3セル2 |
すべてを説明しましょう。 私は彼らが考え出したと思いますか？ 誰かがどの属性のものを忘れた場合 境界。タグで使っています いくつかの例を見てください テーブルを作成しました そしてあなたはさらに行くことができます：
結果： テーブルに写真を挿入するには、HTMLファイル内のイメージがどのように挿入されるかについての基本的な初期の知識を所有する必要があります。 私はそれについて話しています。 HTMLのイメージに関するメインニュアンスがわかったので、テーブルに写真を挿入しようとすることができます。 これは次のようにすることができます。 タグ間の文字列に
結果： テーブル内のセルをマージするには、そのような属性を使用する必要があります。
結果： テーブルの高さと幅を設定するには、そのような属性を使用します。 幅 - テーブル幅。 サイズはピクセルまたはパーセンテージで設定されています。
結果： 表の内側の内容（テキスト、写真）を揃えるために、そのような属性を使用できます。 整列します。 - テーブル内の水平コンテンツアライメント。 貴族。 - テーブル内のコンテンツの垂直方向のアライメント。
結果： また、各セルと個別に各セルを組み合わせたすべてのセルに対してバックグラウンドテーブルを設定することもできます。 背景を色で設定できます。また、映像もできます。 背景のためには2つの属性があります。 b b - テーブル全体または各セルの色の背景を別々に。 色はコードまたは単語によって設定されます。 注意： 背景色を設定してください 創立パターン テーブル全体、属性をタグにインストールする必要があります 理解を深めるために、例を見てください。
結果： 注意： 画像がセルよりも小さい場合、セルを最後まで埋めるまで繰り返されます。 画像がセルごとに大きい場合、画像の背景はサイズサイズで切り取られます。 そして最後に、私はあなたに話します 2つの便利な属性. 突然すべてのセル間の距離を増やしたい場合は、次の属性が役立ちます。 セルパッシング - HTMLテーブルの各セルのフレームとその中のコンテンツの間の内部。
結果： セルペーシング - 隣接セルの境界を転送する。
結果： FUH、言った！ 湯本 hTMLのテーブル。 それはセルの交差点にある一連の行と列です。 テーブルをHTMLに作成するのは簡単ですが、最終的なモデルを想像するだけです。 HTML言語では、テーブルはデータを送信するだけでなく、テキストブロック、画像などを配置するために使用できます。 Webページで、すなわち ヘルプを使用すると、ページ自体のレイアウトを作成できます。 要素はHTML言語でテーブルを作成するために使用されます。 テーブルコード全体 （その内容） テーブルはタグの間に配置されています
。 この要素の属性テーブル全体の値を設定します。 青い背景、1pxの線の厚さのテーブルコードの例を書きなさい 白色、2ピクセルセル内および外側の傲慢なページ、ページから100％の幅： bgcolor \u003d "blue" border \u003d "1" bordercolor \u003d "white" cellpadding \u003d "10" cellspacing \u003d "2" width \u003d "100％"\u003e 各テーブルでは少なくとも1行になる必要があります。タグで設定されます。
。 次の例では、文字列を追加する例が表示されます。 bgcolor \u003d "blue" border \u003d "1" bordercolor \u003d "white" cellpadding \u003d "10" cellspacing \u003d "2" width \u003d "100％"\u003e セルはテーブルの垂直列を形成し、それらはタグで示されます
。 テーブルにセルを追加します。 bgcolor \u003d "blue" border \u003d "1" bordercolor \u003d "white" cellpadding \u003d "10" cellspacing \u003d "2" width \u003d "100％"\u003e セル№1 結果の表を参照してください。 場合によっては、属性が適用されるために、複数の行の1つの列をストレッチする必要があるかもしれません。 rowspan。その値が組み合わせに必要な行数を決定します。 例を見ます： bgcolor \u003d "blue" border \u003d "1" bordercolor \u003d "white" cellpadding \u003d "10" cellspacing \u003d "2" width \u003d "100％"\u003e rowspan \u003d "2"\u003e行番号1と√2を組み合わせた セル番号3。 行番号3。 ブラウザが表示されます。 列は属性を使用して同じ原則で組み合わされます。 コルシャン。。 例を見ます： bgcolor \u003d "blue" border \u003d "1" bordercolor \u003d "white" cellpadding \u003d "10" cellspacing \u003d "2" width \u003d "100％"\u003e cOLSPAN \u003d "2"\u003e列ν1とν2を組み合わせた セル№1 セル番号4。 ブラウザが表示されます。 属性 コルシャン。 そして rowspan。 同時に使用できます。 ブラウザでは、次のようになります。 またはこのように： そして自分でコードを書いてみてください！ テーブル全体の両方に高さと幅を尋ねることができ、個々の行と列のためにいくつかの身近な属性でこれを行うことができます。 幅。 そして 高さ値はピクセル単位で、パーセントの両方で指定されます。 水平テーブルの整列は属性によって設定されます 整列します。、あなたはすでに意味を知っています： 左、中央、右。 そしてテーブルセル内のテキストを調整するために、水平方向の整列属性 整列します。 各タグに適用する必要があります tD。。 から cSSを使用する。 それはずっと簡単です。 属性は、セルの内容を整列させる垂直方向に適用されます。 貴族。。 彼はまたその意味を持っています - 中央の垂直方向の配置 中間、 頂点で 上。 そして底に bottom ベースライン（現在の行のテキストが配置されている行）。 背景画像または色はテーブル全体と単一のセルの両方に尋ねられていますが、それはすべてhauntingの目標に依存します。 これは設定されています - image-attribute. バックグラウンド。その値は必要なグラフィカルファイルへのパスに規定されています。 カラーの背景のため - 属性 b bここでは値は色の名前です。 これは一般に、エントリレベルに必要なものすべてです。 HTMLのテーブルの構築上のセクションの最後に、HTMLの最初の知り合いが終了しました。 via hTMLのテーブル。 簡単なWebページテンプレートを作成することができますので、今すぐ最初のフリッジを作成することをお勧めします。 材料はこれに十分に十分に通過しました。 Hyperspaceの征服への前方 スタイルを介してテーブルを作成し、そのパラメータ（フィールドとセル間の距離）を指定します。 テーブルは、テキストと図面を含めることができる行とセル列で構成されています。 Webページにテーブルを追加するには、タグを使用しています。
各創造の前に 新しい表 タグが開きます
.
次に、コンテナの真ん中に置きます
鬼ごっこ
.
新しい行の先頭について何が話されません。
.
この行では、タグ付きのコンテンツで2つのセルを挿入します
行1セル1
RANGE1 CELL 2。
タグの数を閉じます
別のシリーズタグを開く
.
タグの数を閉じます
3番目のシリーズタグを開く
もう一度2つのセルを挿入してください。
.
タグの数を閉じます
閉じるタグを閉じる
これがフレームの厚さであることを思い出します。 In. 境界。 値 "0"が設定され、テーブルの境界が見えなくなります。
行1セル1
シリーズ2セル1
画像を挿入します。
行1セル1
範囲1セル2
行1セル1.
範囲1セル2
そしてテーブル内のセルを組み合わせる方法は？
コルシャン - 列数を決定します。
デフォルト値1。
rowspan。 - 行数を決定します。
デフォルト値1。
セルを組み合わせたものです 属性を使用して一番上の行に コルシャン。
:
行1セル1 + 2
シリーズ2セル1 行2セル2.
テーブルのサイズを設定する方法
高さ - テーブルの高さ サイズはピクセルまたはパーセンテージで設定されています。
行1セル1 rANGE1 CELL 2。
シリーズ2セル1 行2セル2.
テーブル内のコンテンツを合わせます
帰属する 整列します。 値を割り当てます。 左（デフォルト）, センター、 正しい.
左 -左側にあるコンテンツを押します。
センター -中央に取り付けます。
正しい -右側の部分にコンテンツを押します
帰属する 貴族。 値を割り当てます。 上、下、中央.
上。
–
内容を上に押します。
bottom
–
下部にコンテンツを押します。
中間
–
中央のコンテンツを設定します
行1セル1
rANGE1 CELL 2。
シリーズ2セル1
行2セル2.
背景テーブルの作り方
バックグラウンド。 - テーブルにテーブルが入力されています。
。 そして、特定のセルにのみ、その後タグの中で
.
行1セル1
rANGE1 CELL 2。
シリーズ2セル1
行2セル2.
行1セル1
rANGE1 CELL 2。
シリーズ2セル1
行2セル2.
行1セル1
rANGE1 CELL 2。
シリーズ2セル1
行2セル2.
行1セル1
rANGE1 CELL 2。
シリーズ2セル1
行2セル2.
行1セル1
rANGE1 CELL 2。
シリーズ2セル1
行2セル2.
私が対処し、アクセス可能なタスクで私が知っていたすべてを説明したことを願っています hTMLテーブル。 そして材料をよく保護することをお勧めします。
独自のテーブルを作成してみて、HTMLテーブルからWebページの全体のフレームをより良くしてみてください。
あなたが良いのはすべてです！
私のブログを訪問してくれてありがとうテーブル要素、テーブルを作成します
文字列を追加します
セルを追加します
セル番号2。
セル番号3。文字列を組み合わせる
セル1。
セル2。
セル番号4。
セル番号5。
セル番号6。行番号1と√2を組み合わせた
セル1。
セル2。
セル番号3。
セル番号4。
行番号3。
セル番号5。
セル番号6。
列を組み合わせる
列番号3。
セル番号2。
セル番号3。
セル番号5。
セル番号6。寸法と位置合わせテーブル
背景表
最後に
/
それでは、Webサイトを作成しないことはありません。
∼
∼
仕事
決定
