htmlでのテーブルの詳しい説明-htmlチュートリアル-php.cn

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

墨辰丷

リリース： 2018-05-16 11:03:29

オリジナル

3997 人が閲覧しました

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

通常のテーブル、単純な 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 フレーム属性、

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