tableタグ(テーブル,表)の使い方の解説

超初心者でも簡単にできるホームページ作成HTML基礎講座 EasyStudyHTML TOP

tableタグ(テーブル,表)でのレイアウトの仕方など基礎から解説

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



table,th,tr,tdタグ:表の作成・表の見出し・表の行、列 携帯リストマーク clear.gif
【解説】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>
pcリストマークサンプル表示
表の回りに画像や文章を回り込ます
<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>
pcリストマークサンプル表示
表・セルのサイズ指定
<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>
pcリストマークサンプル表示
表の背景に色を付ける
<table bgcolor="(1)">・・・</table>
(1)色コード・・・カラーコード参照
表の背景に画像を指定
<table background="(1)">・・・</table>
(1)画像のURL
表の1行だけに色を付ける
<tr bgcolor="(1)">・・・</tr>
(1)色コード
表の1行の背景だけに画像を指定
<tr background="(1)">・・・</tr>
(1)画像URL
セルに色を付ける
<td bgcolor="(1)">・・・</td>
(1)色コード
セルの背景に画像を指定
<td background="(1)">・・・</td>
(1)画像URL
サンプルソ−ス
<table bgcolor="#0000ff">・・・</table>
<table background="画像URL">・・・</table>
<tr bgcolor="#0000ff">・・・</tr>
<tr background="画像URL">・・・</tr>
<td bgcolor="#0000ff">・・・</td>
<td background="画像URL">・・・</td>
pcリストマークサンプル表示
表の枠を表示
<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>
pcリストマークサンプル表示
セルの間隔・セル内の余白
<table cellspacing="(1)" cellpadding="(2)">・・・</table>
(1)セルの間隔(ピクセル値)
(2)セル内の余白
サンプルソ−ス
<table border="1" sellspacing="10" cellpading="5">
pcリストマークサンプル表示
縦にまたがるセルの作成
<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>
pcリストマークサンプル表示

ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora