表組みにする<TABLE>(Table)

セルの数の関係と欠損セルの配置

TABLEの属性

<要素 属性1="値" 属性2="値"属性3="値"・・・・・ >

<TABLE
width="表示する幅の値(pixcelかパーセント値）"
frame="外枠の表示設定(指定属性）"
rules="セルとセルの間の罫線の表示設定(指定属性）"
border="外枠の太さの値(pixcel値）"
cellpadding="セル内部の余白の値(pixcel値）"
cellspacing="セルとセルの間隔の値(pixcel値）">

• 定義する順序は順不同である。自分で判りやすい設定（W3Cで定義された順番や、アルファベット順など)を設けておこう。
  
  
• 未定義の場合は、デフォルトの値に設定されて表示される。まず全体を創ってから順次追加して実験してみよう。
  
  
• その種別によって与える事の許される値が定義されている。誤った値を設定しないように気を付けよう。
  
  
• タグの一部なので、当然ながら半角英数での記述が基本である（一部は日本語も可）。見易くする為に、要素を大文字・属性を小文字，或いはその逆というようなルールを作ると後で見易い。
  

• 幅を設定するwidth
  表の幅を設定したい場合は、属性にwidthを与えれば良い。書式は以下の通り。
  

  <TABLE width="数値">

  設定された幅で表示され、表内部の内容はそれに従って折り返される。つまり、表全体でいうと、内容が指定幅より多く必要とされる場合には、表が縦に自動的に伸ばされるということである。
  設定出来る数値は、更に以下に別れる。
  • ピクセル指定
    単純に数値だけを入れた場合はその数のピクセル数により幅が固定された表になる。
    サンプルを表示した状態でブラウザWindowの幅を広げたり狭めたりしてみよう。固定の幅で表示されるのが判る。レイアウト上、固定した方が観易いと考えられる場合に用いればよい。但し、クライアントの表示できる環境に配慮する必要はある。無駄に横スクロールがされないようにしよう。
  • パーセント指定
    パーセンテージによる指定（数値に%を付ける）をすると、属する親要素に対するパーセンテージによってレンダリングされる。BODY要素内に在ればその幅に、他の要素中であればその要素の中での比率となる。
    
• 外枠表示を設定するframe
  外側の枠の表示を設定する。上下左右のどの部分に表示するかを単語で表す。書式は以下の通り。
  

  <TABLE frame="設定">

  設定は、以下の値の何れかを採る。
  

  設定	void	above	below	hsides	lhs	rhs	vsides	box	border
  表示位置	無し （デフォルト)	上	下	上下	左	右	左右	上下左右	上下左右
  表示サンプル	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4

  ※サンプルは現在使用しているブラウザによって表示が変わる可能性があります。
  

• セル間の罫線を設定するrules
  セルとセルの間に表示する罫線の設定を行う。書式は以下の通り。
  

  <TABLE rules="設定">

  設定は、以下の値の何れかを採る。frameの設定によって表示が変わるレンダリングがなされるブラウザも在るので、双方を設定する事が望ましい。
  

  設定	none	groups	rows	cols	all
  表示位置	無し （デフォルト)	グループ毎 (THEAD等で 分割した形)	行毎	列毎	全て
  表示サンプル	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4

  ※サンプルは現在使用しているブラウザによって表示が変わる可能性があります。
  

  
  
• 外枠の太さを設定するborder
  外枠の太さをピクセル値で設定する。書式は以下の通り。
  

  <TABLE border="ピクセル値">

  設定が0の場合は、frame="void"と同等のレンダリングがなされる。frameだけを設定した場合、IE・NNではブラウザのデフォルト値でレンダリングされる。また、rulesの設定がなされていない場合でも、この値が≠0の場合にはrules="all" と同じレンダリングがなされる。

  設定	0	5	10	20
  表示サンプル	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4

  ※サンプルは現在使用しているブラウザによって表示が変わる可能性があります。
  

  
  
• セル内の余白を設定するcellpadding
  セル内部のコンテンツに対する余白を設定する。書式は以下の通り。
  

  <TABLE cellpadding="ピクセル値">

  設定値はピクセル値なので、解像度依存しないように気を付けよう。サンプルを示す（ここではrules="all"にしてあります）。

  設定	0	5	10	20
  表示サンプル	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4

  ※サンプルは現在使用しているブラウザによって表示が変わる可能性があります。
  

  
  
• セル間の間隔を設定するcellspacing
  セルとセルの間隔（罫線の太さ）を設定する。書式は以下の通り。
  

  <TABLE celspacing="ピクセル値">

  設定値はピクセル値なので、解像度依存しないように気を付けよう。サンプルを示す（ここではrules="all"にしてあります）。

  設定	0	5	10	20
  表示サンプル	1 2 3 4	1 2 3 4	1 2 3 4	1 2 3 4

  ※サンプルは現在使用しているブラウザによって表示が変わる可能性があります。
  

  
  

セルの属性

• セル間の行方向の結合を設定するcolspan
  セルの結合する個数を設定する。書式は以下の通り。
  

  <td colspan="個数">

• セル間の列方向の結合を設定するrowspan
  セルの結合する個数を設定する。書式は以下の通り。
  

  <td rowlspan="個数">