■いろいろな表  TABLE:表全体  TR:行 (row)  TD:セル (data)  TH:見出し (header)


HTMLの指定
画面表示
<table border="1">
  <tr>
      <td>○○</td><td>△△</td>
 </tr>
 <tr>
      <td>●●</td><td>▲▲</td>
 </tr>
</table>
◇テーブルの基本形
(枠線あり border="1")

○○  △△
●●   ▲▲
 
<table border="1">
  <tr>
       <th>まる</th>
       <th>さんかく</th>
   </tr>
  <tr><td>○○</td><td>△△</td></tr>
  <tr><td>●●</td><td>▲▲</td></tr>
</table>
◇見出し付き (th)
(自動的に太字、センタリング)

まる さんかく
○○ △△
●● ▲▲
  
<table border="1">
 <tr>
  <th width="80" height="40">まる</th>
  <th width="120">さんかく</th>
 </tr>
 <tr><td>○  ○</td><td>△     △</td></tr>
 <tr><td>●●</td><td>▲▲</td></tr>
</table>
◇セル幅と高さの指定
(幅 width  高さ height)

まる さんかく
○  ○ △     △
●● ▲▲
<table border="1">
 <tr>
  <th width="80">まる</th>
  <th width="120">さんかく</th>
 </tr>
 <tr align="center"><td>○ ○</td><td>△    △</td></tr>
 <tr><td align="center">●●</td><td align="right">▲▲</td></tr>
</table>
◇文字の配置(align指定)
(中央 center   右 right)

まる さんかく
○ ○ △    △
●● ▲▲

<table border="3" cellspacing="6" cellpadding="10" >
 <tr>
  <th width="80">まる</th>
  <th width="120">さんかく</th>
 </tr>
  <tr><td>○  ○</td><td>△     △</td></tr>
  <tr align="center"><td>●●</td><td>▲▲</td></tr>
</table>
◇内枠の太さ cellspacing
  セル内の余白 cellpadding 

まる さんかく
○  ○ △     △
●● ▲▲
<table border="1">
  <tr bgcolor="pink">
     <th width="80">まる</th>
     <th width="120">さんかく</th>
 </tr>
 <tr>
     <td>○  ○</td>
     <td bgcolor="#99ccff">△     △</td>
  </tr>
 <tr align="center">
     <td bgcolor="#99ff99">●●</td>
     <td>▲▲</td>
  </tr>
</table>

◇背景色の指定
(bgcolor="色")
 
まる さんかく
○  ○ △     △
●● ▲▲

<table border="1">
 <tr bgcolor="gold">
   <th colspan="2">都道府県名</th>
   <th>県庁所在地</th>
 </tr>
 <tr>
      <th rowspan="4" bgcolor="gold" width="60">関東</th>
      <td width="70">東京都</td>
      <td width="100">東京</td>
 </tr>
 <tr>
      <td>神奈川県</td>
      <td>横浜</td>
  </tr>
 <tr>
      <td>千葉県</td>
      <td>千葉</td>
  </tr>
 <tr>
      <td>栃木県</td>
      <td>宇都宮</td>
  </tr>
</table>

◇セルの連結

都道府県名 県庁所在地
関東 東京都 東京
神奈川県 横浜
千葉県 千葉
栃木県 宇都宮

横に連結  colspan="2"
(2列分を1個のセルにする)


縦に連結 rowspan="4"
(4行分を1個のセルにする)

※align、bgcolor、width、height、csllspacing、csllpadding属性:HTML5では廃止