■いろいろな表  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 style="width:80px ; height:40px">まる</th>
  <th style="width:120px">さんかく</th>
 </tr>
 <tr><td>○ ○</td><td>△  △</td></tr>
 <tr><td>●●</td><td>▲▲</td></tr>
</table>
◇セル幅と高さの指定
(幅 width  高さ height)

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

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

<table border="5">
 <tr>
  <th style="padding:20px">まる</th>
  <th style="padding:20px">さんかく</th>
 </tr>
  <tr><td style="padding:30px">○○</td><td>△△</td></tr>
  <tr><td>●●</td><td>▲▲</td></tr>
</table>
◇セル内の余白 padding 

まる さんかく
○○ △△
●● ▲▲
<table border="1">
  <tr style="background:yellow">
  <th style="width:80px">まる</th>
  <th style="width:120px">さんかく</th>
 </tr>
 <tr>
     <td>○  ○</td>
     <td style="background:#99dd33">△     △</td>
  </tr>
 <tr align="center">
     <td style="background:#ff00ff">●●</td>
     <td>▲▲</td>
  </tr>
</table>

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

<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属性:HTML5では廃止