テーブルでのHTMLの使用

コンピュータ

HTMLには非常に多くの要素があります。それぞれが独自の方法でユニークです。テーブルは非常に興味深く、要求され重大な対象です。そのおかげで、便利な形式で情報を提供するだけでなく、サイト全体を構築することもできます。

以前は、ほぼすべてのウェブマスターがサイトレイアウト用のテーブルを使用していました。最初は、このためのテーブルは発明されていませんでした。したがって、サイトマークアップでは、ブロックdiv要素を使用する必要があります。

初心者のままにしたくない場合は、すぐにすべてをすることに慣れています。これはHTMLでは非常に重要です。テーブルでは、サイト全体ではなく、通常の情報(テキスト、リンク、リスト、イメージなど)のみを配置する必要があります。

HTMLテーブルを作成するには?

表は複雑な要素です。多数の他の要素。セルや行を作成するときは、必ず一度に終了タグを配置する必要があります。さもなければ、すべてが飛ぶでしょう。ブラウザのハンドラは要素の終わりを探し、見つかるまで他のすべてがテーブルに含まれます。結果はお粥になります。

「メモ帳」にウェブサイトを書く場合は、すべてあなたの手で行う必要があります。完成したエディタでは、通常は「テーブルを挿入する」、「画像を挿入する」などのボタンがあります。

表2〜表2の例

<table width = "100%" border = "1">

<tr>

<td>最初の行の最初のセルのテキスト</ td>

<td> 1行目の2番目のセルのテキスト</ td>

</ tr>

<tr>

<td> 2行目の最初のセルのテキスト</ td>

<td> 2行目の2番目のセルのテキスト</ td>

</ tr>

</ table>

<table>タグと</ table>タグは、テーブルの先頭と末尾を示します。 <tr>タグと</ tr>タグは、行の先頭と末尾です。 1行に<td>タグと</ td>タグで定義されるセルができるだけ多く存在することができます。

主なルール:各行のセル数は同じでなければなりません。これはテーブルです。

テーブルのhtml

しかし、WordやExcelのエディタのように、細胞は互いに組み合わせることができます。

どのようにテーブル内のセルをマージする?

結合するには、Colspan属性とRowspan属性を使用します。スパンは「抱擁」または「重複」と解釈されます。文字通りの意味は、細胞/系統をカバーすることである。

テーブル内のセルをマージする方法

この属性の値では、ブロックする行数またはセル数を指定する必要があります。以下は、両方のHTML属性を表で使用する良い例です。

タグHTMLテーブル

この例では、最初の行では3colspan = "3"属性を使用します。次に、2行目の最初のセルを4行に伸ばしました。最初のセルでのみストレッチ/結合することを忘れないでください。そのプロパティはさらに拡張されます。前に行ったことは影響を受けません。

5つのセルがあり、2から4にマージしたい場合は、セル番号2にcolspan = "3"属性を指定するだけです。

上記の図のセル番号9に注意してください。彼らはすぐに細胞と系統を結合した。そのような行為は禁止されていません。

情報を修正する別の例を見てください。いくつかは属性を混同し、時にはセルの代わりに文字列を組み合わせることがあるためです。

文字列を結合するhtml

テーブルの設計

通常の標準的なHTMLの場合を取る。表には2つのセルからなる2つの行があります。

タグHTMLテーブル

コードの結果は次のようになります。

htmlの表

ご覧のとおり、効果はありません。フレームを追加して幅と高さを指定できます。

htmlテーブルの属性

アライメントでプレイすることもできます。高さと幅の両方を揃えることができます。

テーブルの配置

水平方向の整列のための整列、垂直整列のための整列。ここに結果があります。

htmlで表を作成する例

align属性とvalign属性は、文字列全体に適用できます。その中にあるすべてのセルは、これらの属性に従います。

<td>タグと<tr>タグに加えて、追加のタグがあります<th>。実際、これは<td>のアナログですが、最初の行でのみ使用され、ヘッダーとして機能します。デフォルトでは、<th>内のテキストは中央揃えで太字になっています。

どのようにスタイルをテーブルに接続するのですか?

他のHTMLタグと同様に、テーブルはスタイルを通して変容した。 <head>スタイルシートは、領域または完成したスタイル(頭にもあります)で指定する必要があります。

<head>

...

<style type = "text / css">

テーブル{

font-family:Verdana、Arial、Helvetica、sans-serif;

色:#000000;

}

.my_class

{

色:#666666;

}

</ style>

...

</ head>

あなたがテーブルだけを指定した場合、このスタイルページのすべての表に適用されます。絶対すべてに。しかし、ピリオドを含む任意の名前を指定する2番目の方法を使用すると、他のテーブルに影響を与えることなく、このスタイルを任意のテーブルに適用できます。

<table class = "my_class">

クラスはテーブルタグと特定のセルまたは文字列の両方に使用できます。

<table class = "style_table" width = "100%" border = "1">

<tr class = "style_row1">

<td class = "style_td1">最初の行の最初のセルのテキスト</ td>

<td class = "style_td2"> 1行目の2番目のセルのテキスト</ td>

</ tr>

<tr class = "style_row2">

<td> 2行目の最初のセルのテキスト</ td>

<td> 2行目の2番目のセルのテキスト</ td>

</ tr>

</ table>

スタイルの名前に誤りがある場合は、結果は表示されません。スタイル自体に間違いがありますが、名前が一致しても効果はありません。各カンマまたはコロンは重要です。

表の追加属性

スタイルクラスにはどのような属性を記述できますか?テーブルには非常に多くの属性が適用されます。あなたが必要とする最も基本的なものを考えてみましょう。

整列する

水平方向の整列

バージン

垂直整列

背景

セル/テーブル内の背景画像

bgcolor

セルの背景色

ボーダーカラー

表/セルの境界線の色

高さ

セルの高さ

行内のテキストの転送を禁止します。

セル/テーブルの幅

ご覧のとおり、膨大な数の「ツール」を使ってテーブルのHTMLを使用することができます。

htmlテーブルの例

美しいHTMLテーブルを使用して作成されます。例

スタイルのおかげで、様々な美しいテーブルを作成することができます。それはあなたの好きなものや方法によって決まります。

HTMLテーブルの例
それは料理のようなものです。成分は同じですが、レシピがたくさんあります。

htmlテーブルの作成方法

ご覧のように、HTMLタグを使用すると、テーブルは認識を超えて変換できます。可能性の限界はあなたの想像力によって決まります。