 |
ホームページ作成 HTML基礎講座 tableタグ（表）
ホームページ作成・HTML基礎・スタイルシート（CSS)・javascript・SEO対策
|
|
■table,th,tr,tdタグ：表の作成・表の見出し・表の行、列  |
 |
|
【解説】tableタグはレイアウトの構成にも使えます。
表を作成します。
※キャプションについてはcaptionタグを参照して下さい。 |
見出しなし
<table>
<tr>
<td>（1）</td>
</tr>
</table>
見出しがある場合は<th></th>タグを記述する。
<th>（2）</th>
（1）内容（列の数だけ<td>タグ繰り返します）
<tr>タグは表の行
<td>タグは表の列
（2）見出し（太字・中揃えで表示されます） |
サンプルソ−ス（見出しなし）
<table>
<tr>
<td>国語</td>
<td>80点</td>
</tr>
<tr>
<td>数学</td>
<td>85点</td>
</tr>
<tr>
<td>英語</td>
<td>90点</td>
</tr>
</table>
サンプルソ−ス(見出しあり)
<table>
<tr>
<th>教科</th>
<th>点数</th>
</tr>
<tr>
<td>国語</td>
<td>80点</td>
<tr>
<td>数学</td>
<td>85点</td>
</tr>
<tr>
<td>英語</td>
<td>90点</td>
</tr>
</table> |
 サンプル表示 |
表の回りに画像や文章を回り込ます
<table align="（1）">・・・</table>
（1）位置（キーワード）
left:左に配置、right:右に配置、none:回り込みしない
表の回りに画像や文章を回り込ませてその間に余白を入れる
<table align="（1）" hspace="（2）" vspace="（3）">・・・</table>
（1）位置
left:左に配置、right:右に配置
（2）左右の余白（ピクセル値）
（3）上下の余白（ピクセル値） |
サンプルソ−ス（わかり易いように枠を"border"で表示しています）
<table border="2" align="left">
<tr>
<td>国語</td>
<td>10位</td>
</tr>
<tr>
<td>数学</td>
<td>7位</td>
</tr>
<tr>
<td>英語</td>
<td>3位</td>
</tr>
</table> |
| サンプル表示 |
表・セルのサイズ指定
<table width="（1）" height="（2）">
<tr>
<td width="（3）" height="（4）">・・・</td>
</tr>
</table>
（1）表の横幅（ピクセル値または"%"指定）
（2）表の縦幅（ピクセル値または"%"指定）
（3）セルの横幅（ピクセル値）
（4）セルの縦幅（ピクセル値） |
サンプルソ−ス（わかり易いように枠を"border"で表示しています）
<table border="2" width="306" height="86">
<tr>
<td width="120" height="20">合計点</td>
<td width="180" height="20">順位</td>
</tr>
<tr>
<td width="120" height="20">255点</td>
<td width="180" height="20">15位</td>
</tr>
</table> |
| サンプル表示 |
表の背景に色を付ける
<table bgcolor="（1）">・・・</table>
（1）色コード・・・カラーコード参照
表の背景に画像を指定
<table background="（1）">・・・</table>
（1）画像のＵＲＬ
表の1行だけに色を付ける
<tr bgcolor="（1）">・・・</tr>
（1）色コード
表の1行の背景だけに画像を指定
<tr background="（1）">・・・</tr>
（1）画像ＵＲＬ
セルに色を付ける
<td bgcolor="（1）">・・・</td>
（1）色コード
セルの背景に画像を指定
<td background="（1）">・・・</td>
（1）画像ＵＲＬ |
サンプルソ−ス
<table bgcolor="#0000ff">・・・</table>
<table background="画像ＵＲＬ">・・・</table>
<tr bgcolor="#0000ff">・・・</tr>
<tr background="画像ＵＲＬ">・・・</tr>
<td bgcolor="#0000ff">・・・</td>
<td background="画像ＵＲＬ">・・・</td> |
| サンプル表示 |
表の枠を表示
<table border="（1）">・・・</table>
（1）外枠の太さ（ピクセル値）
※枠を非表示にするには"0"を指定 |
サンプルソ−ス
<table border="1">
<tr>
<td>aaa</td><td>bbb</td>
</tr>
<tr>
<td>000</td><td>111</td>
</tr>
</table>
サンプルソ−ス（枠に色を付ける）
<table border="3" bordercolor="#ff0000" bordercolorlight="#ff0000 "bordercolordark="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
<tr>
<td>000</td>
<td>111</td>
</tr>
</table> |
| サンプル表示 |
セルの間隔・セル内の余白
<table cellspacing="（1）" cellpadding="（2）">・・・</table>
（1）セルの間隔（ピクセル値）
（2）セル内の余白 |
サンプルソ−ス
<table border="1" sellspacing="10" cellpading="5"> |
| サンプル表示 |
縦にまたがるセルの作成
<td rowspan="（1）">・・・</td>
<th rowspan="（1）">・・・</th>
（1）セル数（整数値）
横にまたがるセルの作成
<td colspan="（1）">・・・</td>
<th colspan="（1）">・・・</th>
（1）セル数（整数値） |
サンプルソ−ス（縦またがり）
<b>縦またがり</b><br>
<table border="1">
<tr>
<td rowspan="2">aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>000</td>
<td>111</td>
</tr>
</table>
<br>
<hr>
サンプルソ−ス（横またがり）
<b>横またがり</b><br>
<table border="1">
<tr>
<td colspan="2">aaa</td>
</tr>
<tr>
<td>000</td>
<td>111</td>
</tr>
</table> |
| サンプル表示 |
|
|
|
ページトップへ |