表の作り方

表を作ろう

 表を作る <table border="幅の数位"> 
 基本は(1)罫線表示 (0)を指定した場合は罫線は表示しません。
 </table> 終了タグーは必ず付けましょう
1 2 3
a b c
         <table border="1"> 
 <tr><td>1</td><td>2</td><td>3</td></tr> 
 <tr><td>a</td><td>b</td><td>c</td></tr> 
 <tr><td>あ</td><td>い</td><td>う</td></tr> 
 </table>    

 

 表のそれぞれのセルの中のデータに付ける <td> <table>(データ) 
 横のよこ一行ずつに付ける <tr> <table row> 
 表全体に付ける <table>

 


 線無しで、横に並べる 

           <table border="0"><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></table> 

 


 上に2行 下に2行 

a b
           <table border="0"> 
 <tr><td>a</td><td>b</td></tr> 
 <tr><td>あ</td><td>い</td></tr> 
 </table> 

 


 線を入れる <table border="数位">

a b
          <table border="1">
<tr><td>a</td><td>b</td></tr> 
<tr><td>あ</td><td>い</td></tr> 
</table>

 


 表の横にヘッダにを付ける (左上側が強調)
 (<td>の変わりに<th>を使います)

 
a b
           <table border="1">
<tr><th>a</th><td>b</td></tr> 
<tr><td>あ</td><td>い</td></tr> 
</table>


 表の縦にヘッダにを付ける (左側が強調)

 (<td>の変わりに<th>を使います)
a b
              <table border="1">
<tr><th>a</th><td>b</td></tr> 
<tr><th>あ</th><td>い</td></tr> 
</table>

 


 表の縦・横にヘッダにを付ける (左側・上側が強調)

 ( <td>の変わりに<th>を使います )
  1 2
a b c
          <table border="1">
<tr><th></th><th>1</th><th>2</th></tr> 
<tr><th>a</th><td>b</td><td>c</td></tr> 
<tr><th>あ</th><td>い</td><td>う</td></tr> 
</table>

 


 キャプション(題名/説明文)を付ける [表の上に付ける]

  <caption>

 
題名/説明文
テイト 次  
下です
            <table border="1">
<caption>題名/説明文</caption> 
<tr><th>テイト</th><td>次</td></tr> 
<tr><th>た</th><td>下です</td></tr> 
</table>

 


 キャプション(題名/説明文)を下に付ける 

  <caption align="bottom">
題名/説明文
テイト
下です
            <table border="1">
<caption align="bottom">題名/説明文</caption> 
<tr><th>テイト</th><td>次</td></tr> 
<tr><th>た</th><td>下です</td></tr> 
</table> 

 


 キャプション(題名/説明文)を左に付ける 

  <caption align="left">題名/説明文
題名/説明文
テスト______ テスト______
       <table border="1">
<caption align="left">題名/説明文</caption>
<tr><th>テイト</th></tr><th>テスト </th></tr> 
</table> 

 キャプション(題名/説明文)を右に付ける 

  <caption align="right">題名/説明文

題名/説明文
テスト______ テスト______
         <table border="1">
<caption align="right">題名/説明文</caption>
<tr><th>テイト</th></tr><th>テスト </th></tr> 
</table> 

   複数の項目にまたがるセルを作る   

 横にまたがるセルを作る 
  <th colspan="またがる数">

 
テイト
下です
            <table border="1">
<tr><th colspan="3">テイト</th></tr> 
<tr><th> た </th><td>下です</td><td> く </td></tr> 
</table> 

 


 縦にまたがるセルを作る 

  <th rowspan="またがる数">

 
テイト
中です
下です
           <table border="1">
<tr><th rowspan="3">テイト</th><td>次</td><td>か</td></tr> 
<tr><td>い</td><td>中です</td></tr> 
<tr><td>た</td><td>下です</td></tr> 
</table> 

 


 縦横にまたがるセルを作る 

  <th rowspan="またがる数"colspan="またがる数">

 
  横セル


a b c
d e f
           <table border="1">
<tr><td></td><th colspan="3">横セル</th></tr> 
<th rowspan="3">縦<br>セ<br>ル<td>a</td><td>b</td><td>c</td></tr> 
<tr><td>d</td><td>e</td><td>f</td></tr> 
<tr><td>た</td><td>下</td><td>り</td></tr> 
</table> 

 


 セルの中のテキストをレイアウトする 

  (横方向)<td> <th> <tr>に有効

 
 テキストを左・中・右に振り分ける(寄せる) 

 <td align="位置"> ("left" 左) ("center" 中) ("right" 右)

 
左・・・・・・・中・・・・・・・・右
          <table border="1">
<tr><td>左・・・・・・・中・・・・・・・・右</td></tr> 
<tr><td align="left">左</td></tr> 
<tr><td align="center">中</td></tr> 
<tr><td align="right">右</td></tr> 
</table> 

 


 セルの中のテキストをレイアウトする 
  (縦方向)<td> <th> <tr>に有効

 
 テキストを上・中・下に振り分ける(寄せる) 
 
<td rowspan="またがる数"valign="位置">  ("top" 上) ("middle" 中) ("bottom" 下)

 
上です 中です 下です aaa
ooo
zzz
         <table border="1"> 
<tr>
<td rowspan="3"valign="top">上です</td> 
<td rowspan="3"valign="middle">中です</td> 
<td rowspan="3"valign="bottom">下です</td> 
<td>aaa</td></tr> 
<tr><td>ooo</td></tr> 
<tr><td>zzz</td></tr> 
</table>


 セル内のフォントのサイズを変えたい 
 <font size="大きさ">  ("1"<"7")

<table border="1">
<tr><td>普通の文字・・・・・</td>
<td><font size="6">大きい文字・・・・・</td>
</tr> 
</table>

普通の文字・・・・・・! 大きい文字・・・・・・!

 セル内のフォントのサイズを変えたい 
 左右のセルの1行めの文字を揃えたい (下ぞろえ)
  <valign="baseline">  ("baseline" ) 

<table border="1">
<tr valign="baseline">
<td>普通の文字・・・・</td>
<td><font size="6">大きい文字・・・・・・</td>
</tr> 
</table>

普通の文字・・・・・! 大きい文字・・・・!

 表の大きさを設定したい 
  <table width="横幅"height="縦幅">   線長指定

大きく成ったかな?
        <table border="1" width="300" height="100">
<tr>大きく成ったかな?</tr>
</table>

 


 線の画面あたりのパーセント 
  <table width="横幅%"height="縦幅%"> 

 <table border="1" width="60%" height="50%"><tr>大きく成ったかな?</tr></table>

大きく成ったかな?

 セル内のテキスト、との間隔を調節したい 
  <table border="1" cellpadding="間隔数位"> 0〜

  
11 22 33
a b c
ああ いい うう
       <table border="1" cellpadding="20">
<tr><td>11</td><td>22</td><td>33</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>ああ</td><td>いい</td><td>うう</td></tr>
</table>


 罫線に色を色を付けたい 
<table border="幅" bordercolor="#色No">

 罫線  線に色が付いたかな?
 罫線2  線に色が付いた?
       <table border="1" bordercolor="#ff8000">
<tr><th> 罫線</th><td> 線に色が付いたかな?</td></tr> 
<tr><th> 罫線2</th><td> 線に色が付いた?</td></tr> 
</table>

 罫線の中に色を付けたい 
<table border="幅" bgcolor="#色No">

罫線  中に色が付いたかな?
罫線  中に色が付いた?
     <table border="1">
<tr><th>罫線</th> <td bgcolor="#80ff80">中に色が付いたかな?</td></tr>
<tr><th>罫線</th> <td bgcolor="#ff00ff">中に色が付いた?</td></tr>
</table>

 表のバックに画像を入れたい 
  <table background="画像">   画像指定

画像が入ったかな?
      <table background="POST.GIF">
<tr>画像が入ったかな?</tr>
</table>

 罫線の外枠の表示させる部分を選ぶ 
  <table border="幅" frame="表示部分指定">
  frame=(表示部分指定一個だけ指定)
  frame="box"   四方全部を表示 余り意味がない(笑)
  frame="void"   周り全部を表示し無い
  frame="hsides" 上下のみを表示
  frame="vsides" 左右だけを表示
  frame="above" 上部だけを表示
  frame="below" 下部だけを表示
  frame="lhs"   左だけを表示
  frame="rhs"   右部だけを表示

 罫線  線が表示したかな?
 罫線2  線が消えたたかな?
         <table border="1" frame="rhs">
<tr><th> 罫線</th><td> 線が表示したかな?</td></tr> 
<tr><th> 罫線2</th><td> 線が消えたたかな?</td></tr> 
</table>

 罫線の内線の表示させる部分を選ぶ 
  <table border="幅" rules="表示部分指定">
  rules=(表示部分指定一個だけ指定)
  rules="all"    中全部を表示 余り意味がない(笑)
  rules="none"   罫線の表示し無い
  rules="groups" グループ間の境界線のみを表示
  rules="rows"   横列の罫線のみを表示
  rules="cols"   縦行の罫線のみを表示

 罫線  線が表示したかな?
 罫線2  線が消えたたかな?
      <table border="1" rules="cols">
<tr><th> 罫線</th><td> 線が表示したかな?</td></tr> 
<tr><th> 罫線2</th><td> 線が消えたたかな?</td></tr> 
</table>

 罫線(外)め太さを指定して立体に見せたい (立体指定)
 <table border="外枠幅の値数">  (0〜 )数字が大きいほど立体に見える。

 罫線  立体に成ったかな?
 罫線2  立体に成った?
         <table border="20">
<tr><th> 罫線</th>
<td> 立体に成ったかな?</td></tr> 
<tr><th> 罫線2</th>
<td> 立体に成った?</td></tr> 
</table>

 罫線(外)の太さを指定して 谷に見せたい (立体指定)
 <table border="外枠幅の値数" bordercolorlight="#上枠色の値数" bordercolordark="#下枠色の値数">
 (0〜 )数字が大きいほど引っ込んで見える。

 罫線  へこんだかな?
 罫線2  凹んだかな? 
        <table border="20" bordercolorlight="#777777" bordercolordark="#cccccc">
<tr><th> 罫線</th>
<td> へこんだかな?</td></tr> 
<tr><th> 罫線2</th>
<td> 凹んだかな? </td></tr> 
</table>

 罫線(外)の太さを指定して 色を付けたい
 <table border="外枠幅の値数" bordercolor="#外枠色の値数">  (#0〜 )色が付く

 罫線  幅広枠?
 罫線2  広く成ったかな? 
        <table border="20" bordercolor="#cc0000">
<tr><th> 罫線</th>
<td> 幅広枠?</td></tr> 
<tr><th> 罫線2</th>
<td> 広く成ったかな? </td></tr> 
</table>

 罫線の太さを全部太くしたい 
 <table border cellspacing="値数">   (0〜 )数字が大きいほど厚く見える。

 罫線  幅広く成ったかな?
 罫線2  幅広くに成った?
       <table border cellspacing="20">
<tr><th> 罫線</th>
<td> 立体に成ったかな?</td></tr> 
<tr><th> 罫線2</th>
<td> 立体に成った?</td></tr> 
</table>

 罫線(外&中)の太さを指定して 上記の組合わせ
 <table border="外枠幅の値数" cellspacing="内線幅の値数" bordercolorlight="#上枠色の値数" bordercolordark="#下枠色の値数">

 罫線  幅広枠?
 罫線2  中の線には色が付けられない残念 
         <table border="20" cellspacing="20" bordercolorlight="#777777" bordercolordark="#cccccc">
<tr><th> 罫線</th>
<td> 幅広枠?</td></tr> 
<tr><th> 罫線2</th>
<td> 中の線には色が付けられない残念 </td></tr> 
</table>

 罫線(下にだけ罫線を付ける)
 <table border="外枠幅の値数" cellspacing="内線幅の値数" cellpadding="5" frame="below" rules="rows" width="300">
         <table  border="1" cellspacing="0" cellpadding="5" frame="below" rules="rows" width="300">
<tr>
<td>中</td></tr>
<tr><td>中</td></tr>
<tr><td>中</td></tr>
</tr>
</table>

エンド です。


更新日2008/03/13 Copyright (C) 1997/4