テーブル(table)のカスタマイズ
テーブルには色々な設定をすることができます。
基本的な所ではテーブルの幅や高さの変更から、セルの大きさやセルの連結など、その他にも色々な設定があります。ここではそんなテーブルのカスタマイズ方法について説明していきます。
表全体の大きさを指定する
表全体の大きさを指定するには、
<table width="幅">～</table>
と記入します。幅の値はピクセル、または%での指定ができ、数値の後ろに何も記入しない場合はピクセル単位が適用されます。
それでは、実際にtableタグを使って下のようなテーブルを作ってみましょう。
【作成例 幅300ピクセル】
| セル１ | セル２ | セル３ |
| セル４ | セル５ | セル６ |
| セル７ | セル８ | セル９ |
【記入例】
<table width="300"border="1">
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
</tr>
・
・
</table>
セルの大きさを指定する
セルの大きさを指定するには、
<td width="幅" height="高さ">～</td>
<th width="幅" height="高さ">～</th>
と記入します。幅・高さの値はピクセル単位で指定することができます。
それでは、セル１の幅を150ピクセル、高さを30ピクセルに設定してみましょう。
【作成例 セル1(幅150px 高さ30px)】
| セル１ | セル２ | セル３ |
| セル４ | セル５ | セル６ |
| セル７ | セル８ | セル９ |
【記入例】
<table width="300" border="1">
<tr>
<td width="150" height="30">セル１</td>
<td>セル２</td>
<td>セル３</td>
</tr>
・
・
</table>
ひとつのセルの幅を指定すると、基本的に他のセルでは余った幅を均等に分割して表示します(この例でいえば余った150pxを2つのセルで分割)。
ただし、上のようにタグのなかでセルの大きさの変更をするのは、現在のHTMLでは非推奨になっています。このような設定はスタイルシートを利用して行うのが無難かもしれません。
セルを連結する
セルの連結とは、複数のセルを1つのセルとしてまとめることを言います。
<td rowspan="縦方向の連結数" >～</td>
<th rowspan="縦方向の連結数" >～</th>
<td colspan="横方向の連結数" >～</td>
<th colspan="横方向の連結数" >～</th>
それでは、1行目(セル1～セル３)の連結を行ってみましょう。
【作成例 セル1～セル3の連結】
| セル１～セル３の連結セル | ||
| セル４ | セル５ | セル６ |
| セル７ | セル８ | セル９ |
【記入例】
<table width="300" border="1">
<tr>
<td colspan="3">セル１～セル３の連結セル</td>
</tr>
<tr>
<td>セル４</td>
<td>セル５</td>
<td>セル６</td>
</tr>
・
・
・
</table>
次に、セル１・セル4・セル7の縦1列のセルを連結します。
【作成例 セル1の列を連結】
| セル１・セル４・セル７ | セル２ | セル３ |
| セル５ | セル６ | |
| セル８ | セル９ |
【記入例】
<table width="300" border="1">
<tr>
<td rowspan="3">セル１・セル４・セル７</td>
<td>セル２</td>
<td>セル３</td>
</tr>
<tr>
<td>セル５</td>
<td>セル６</td>
</tr>
<tr>
<td>セル８</td>
<td>セル９</td>
</tr>
</table>
上のようにセルを連結した場合には、連結される前のセルは消去する必要があります。例えば、セル１～セル３の連結の場合は<td>セル１</td>～<td>セル３</td>を消去して、代わりに<td colspan="3">セル１～セル３の連結セル</td>を記入する、といった感になります。
セルとセルの間隔を指定する
各セルと各セルの間隔を指定するには、
<table cellspacing="セルの間隔" >～</table>
と記入します。例えば、セル間隔を5ピクセル開けたい場合は、
【作成例 各セル間隔 5px(ピクセル)】
| セル１ | セル２ | セル３ |
| セル４ | セル５ | セル６ |
| セル７ | セル８ | セル９ |
【記入例】
<table width="300" border="1" cellspacing="5">
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
</tr>
・
・
・
</table>
と記入します。
セル枠とセルの内容との間隔を指定する
セルの枠とセルの内容(文字など)との間隔を指定するには、
<table cellpadding="間隔" >～</table>
と記入します。例えば、セル枠とせるの内容とを10ピクセル開けたい場合は、
【作成例 セル枠と内容の間隔 10px(ピクセル)】
| セル１ | セル２ | セル３ |
| セル４ | セル５ | セル６ |
| セル７ | セル８ | セル９ |
【記入例】
<table width="300" border="1" cellpadding="10">
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
</tr>
・
・
・
</table>
と記入します。この間隔は上下左右に均等に設定されます。(注：この例の場合は文字数がセル幅に届いていないので右側に空白があります。)
 |
 |
 |
|---|
