ホームページ > ウェブフロントエンド > htmlチュートリアル > htmlでのテーブルの詳しい説明

htmlでのテーブルの詳しい説明

墨辰丷
リリース: 2018-05-16 11:03:29
オリジナル
3982 人が閲覧しました

この記事では主に HTML でのテーブルを紹介します。興味のある方はぜひ参考にしてください。

  1. 通常のテーブル、単純な HTML テーブルは、table 要素と tr、td、th 要素で構成されます。tr はテーブルの行を指し、td はセルを指し、th はヘッダーを定義します。空のセルを未入力のままにするか、 を使用してください。

<table>	
<tr>		
<th>表头</th>		
<th>表头</th>		
<th>表头</th>	
</tr>	
<tr>		
<td>单元格1
</td>		
<td></td>		
<td>单元格3</td>	
</tr>	
</table>
ログイン後にコピー

2. ボーダー付きのテーブル。 border 要素はテーブルの境界線を表し、Cellspcing はテーブル間の間隔を表します。

<table border="1" cellspacing="10" cellpadding="30">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>
ログイン後にコピー

3. 背景画像または色を含むテーブル 注: bgcolor は色を意味します。 背景は HTML に直接色を追加できません。(この文は間違っています。間違った方法で使用されています。インライン形式を直接使用してください)スタイルの書き込みは style="background:red" または style="background-color:red") をテーブルに追加することは、別の tr または td に設定することを意味します。単一の行またはセルを設定します。



<table border="1">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>
ログイン後にコピー

4. 行と列にまたがるテーブルの場合、rowspan は行にまたがることを意味し、colspan は列にまたがる場合は、現在のテーブル行で削除されます。の場合は、以下の表の行から削除されます。

<table border="1">
	<caption>跨行</caption>
		<tr>
		  <th>姓名</th>
		  <td>Bill Gates</td>
		</tr>
		<tr>
		  <th rowspan="2">电话</th>
		  <td>555 77 854</td>
		</tr>
		<tr>
		  <td>555 77 855</td>
		</tr>
	</table>
ログイン後にコピー
<table border="1">
	<caption>跨列</caption>
		<tr>
		  <th>姓名</th>
		  <th colspan="2">电话</th>
	</tr>
	<tr>
		  <td>Bill Gates</td>
		  <td>555 77 854</td>
		  <td>555 77 855</td>
	</tr>
</table>
ログイン後にコピー

5. タイトル付きの表は、表のタイトルを表すために p タグなどを使用することもできます。デフォルトはテーブルの中心に揃えられます。


6. セルに段落やリストなどを追加するなど、表のセル内のコンテンツを配置します。

<table border="1">
	<tr>
		<td>
			<p>这是一个段落,hello World!</p>
		</td>
		<td>
			<ul>
				<li>这是一个列表
					<ul>
						<li>html</li>
						<li>css</li>
						<li>javascript</li>
					</ul>
				</li>
			</ul>
		</td>
	</tr>
</table>
ログイン後にコピー
7.frame フレーム属性、

外枠のどの部分を表示するかを指定します。 //当面は使用しません。

関連する推奨事項:

HTMLページへのテーブルスクロールバーの実装

ElTableColumn拡張メソッドの詳細な説明

SQL ALTER TABLEステートメントの関連操作について

以上がhtmlでのテーブルの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート