Table と div の導入と使用法の簡単な分析

Web フロントエンド 1

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

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

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

<table border="1" cellpacing="0" cellpadding="0" align="center">
</テーブル>

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

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

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

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

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

<本体>
				<tr>
					<td>01</td>
					<td>張三</td>
					<td>男性</td>
					<td>20</td>
				</tr>
				<tr>
					<td>02</td>
					<td>李思</td>
					<td>女性</td>
					<td>21</td>
				</tr>
				<足>
					<tr>
						<tdcolspan="3">合計人数:</td>
						<td>60</td>
					</tr>
				</tfoot>
			</tbody>

Tfoot はテーブルのフッターを定義し、通常は概要情報を表示します。

 <足>
					<tr>
						<tdcolspan="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>

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

 <tdcolspan="3">合計人数:</td>

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

Cellpadding はテーブルの余白を定義します

<table border="1" cellpacing="0" cellpadding="10">

Div は部門を定義します

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

機能: ブロックレベルのラベルを新しい行に表示します

ブロックレベルのタグとインラインタグの違いは次のとおりです。

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

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

インラインラベル: スパン・ア・ブラブル・アイエム

ブロックレベル要素の特性: 表示:ブロック

各ブロックは新しい行から始まり、後続の要素は新しい行で始まります。要素の幅、高さ、行の高さ、および内側と外側のマージンはすべて設定可能です。要素の幅が設定されていない場合は、それが設定されます。高さを設定しない限り、親コンテナの 100%

インライン要素の特徴: 表示: インライン

これらはすべて、他の要素と同じ行にあります。要素の幅、高さ、行の高さ、内側と外側の余白は設定できません。要素の幅は、要素に含まれるテキストまたは画像の幅となり、変更できません。 。

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

他の要素はすべて同じ行上にあり、幅、高さ、行の高さ、内側と外側のマージンをすべて設定できます。

要約する

Table と div の簡単な紹介と使用法に関するこの記事はこれで終わりです。Table と div の紹介と使用法の詳細については、downcodes.com で以前の記事を検索するか、引き続き次の関連記事を参照してください。今後ともcomをよろしくお願いします！