Tableとdivの簡単な紹介と使い方

ウェブフロントエンド1

フォームのコンポーネント:

タイトル ヘッダー 本文 フッター

テーブルはテーブルを定義します

<表の境界線="1" セル間隔="0" セルパディング="0" 配置="中央">
</テーブル>

キャプションは表のタイトルを定義します

<caption>ウェブフロントエンド/キャプション>終了 1<

Theadはヘッダー部分を定義します

<頭>
				<tr>
					<th>学生番号</th>
					<th>名前</th>
					<th>性別</th>
					<th>年齢</th>
				</tr>
			</thead>

Tbodyはテーブルの本体を定義します

<t本文>
				<tr>
					<td>01</td>
					<td>張三</td>
					<td>男性</td>
					<td>20</td>
				</tr>
				<tr>
					<td>02</td>
					<td>李思</td>
					<td>女性</td>
					<td>21</td>
				</tr>
				<tfoot>
					<tr>
						<td colspan="3">総人数:</td>
						<td>60</td>
					</tr>
				</tfoot>
			</tbody>

Tfootはテーブルフッターを定義します。通常は要約情報を表示するために使用されます。

<tfoot>
					<tr>
						<td colspan="3">総人数:</td>
						<td>60</td>
					</tr>
				</tfoot>

Trは線を定義する

<tr>
					<th>学生番号</th>
					<th>名前</th>
					<th>性別</th>
					<th>年齢</th>
				</tr>

tdはデータ項目（セル）を定義します。これは通常、表のヘッダーに使用され、太字のスタイルを持ちます。

Tdは通常、太字体なしで本文に使用されます。

<tr>
					<td>01</td>
					<td>張三</td>
					<td>男性</td>
					<td>20</td>
				</tr>

rowspan と colspan は、それぞれセルがまたがる行数と列数を定義します。

<td colspan="3">総人数:</td>

セル間隔はテーブル間の間隔を定義します

セルパディングは表の余白を定義します

<表の境界線="1" セル間隔="0" セルパディング="10">

Divは部門を定義します

<div スタイル="幅: 200px;高さ: 200px;背景色: スカイブルー";>

機能: ブロックレベルタグを新しい行に表示する

ブロックレベルタグとインラインタグの違い:

ブロックレベルのタグは行全体を占めます。インラインタグは左から右の順に並べられます。

ブロックレベルタグ: h1-h6 p ul ol li div table dl form

インラインタグ: span a br label I em

ブロックレベル要素の特性: display:block

• 各ブロックは新しい行で始まり、次の要素も新しい行で始まります。
• 要素の幅、高さ、行の高さ、内側と外側の余白はすべて設定可能です。
• 要素の幅を設定しない場合は、高さを設定しない限り、親コンテナの100%になります。

インライン要素の特性: display: inline

• 他の要素は1行に並んでいます
• 要素の幅、高さ、行の高さ、内側と外側の余白を設定することはできません
• 要素の幅は、そこに含まれるテキストまたは画像の幅であり、変更することはできません。

インラインブロック要素の特性: display: inline-block

• 他の要素は1行に並んでいます
• 幅、高さ、行の高さ、内側と外側の余白をすべて設定できます

要約する

Tableとdivの紹介と使い方については以上です。Tableとdivの紹介と使い方についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。