テーブルの形を変更と余白設定
サンプル5は、テーブルの形を変更と余白の設定、行や列を増やす方法や結合など紹介しています。
以下をテーブルの基本形として説明していますので覚えておいてください。
テーブルの形を変更と余白設定
セル1 | セル2 |
セル3 | セル4 |
<table border="1" cellspacing="1" cellpadding="5" width="500">
<tr><td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3
</td><td>セル4</td></tr>
</table>
<tr>~</tr>が行(横一列)を表し、<td>~</td>がセルを表します。
行を増やす
テーブルの行(横一列)が使用している数だけセルを足します。
行を増やす方法
セル1 | セル2 |
セル3 | セル4 |
セル5 | セル6 |
<table border="1" cellspacing="1" cellpadding="5" width="500">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
<tr><td>セル5</td><td>セル6</td></tr>
</table>
列を増やす
テーブルの列(縦一列)全てにセルを足します。
列を増やす方法
セル1 | セル2 | セル3 |
セル4 | セル5 | セル6 |
<table border="1" cellspacing="1" cellpadding="5" width="500">
<tr><td>セル1</td><td>セル2</td><td>セル3</td></tr>
<tr><td>セル4</td><td>セル5</td><td>セル6</td></tr>
</table>
横に結合
colspan ⇒ 数字分だけ横(右)に結合、数字-1右のセルを削除
横に結合した場合
セル1 | セル3削除 |
セル4 | セル5 | セル6 |
<table border="1" cellspacing="1" cellpadding="5" width="500">
<tr><td>セル1</td><td colspan="2">セル3削除</td></tr>
<tr><td>セル4</td><td>セル5</td><td>セル6</td></tr>
</table>
縦に結合
rowspan ⇒ 数字分だけ縦(下)に結合、数字-1下のセルを削除
縦に結合した場合
セル1 | セル2 |
セル4 | セル8削除 |
セル7 |
<table border="1" cellspacing="1" cellpadding="5" width="500">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル4</td><td rowspan="2">セル8削除</td></tr>
<tr><td>セル7</td></tr>
</table>
cellpadding
cellpadding ⇒ 文字と枠線の間に余白を入れます。
<table border="1" cellspacing="0" cellpadding="10">
セル1 | セル2 |
セル3 | セル4 |
■CSS - HTML5
table{border-collapse:collapse; border-spacing:0px; border:1px solid #000000;}
td{padding:10px; border:1px solid #000000;}
cellspacing
cellspacing ⇒ 枠線に余白を入れます。
<table border="1" cellspacing="10" cellpadding="0">
セル1 | セル2 |
セル3 | セル4 |
■CSS - HTML5
table{border-collapse:separate; border-spacing:10px; border:1px solid #000000;}
td{padding:5px; border:1px solid #000000;}
border
border ⇒ 枠線の太さを設定します。"0"に指定すると枠線が消えます。
<table border="10" cellspacing="0" cellpadding="5">
セル1 | セル2 |
セル3 | セル4 |
■CSS - HTML5
table{border-collapse:collapse; border-spacing:0px; border:10px solid #000000;}
td{padding:5px; border:10px solid #000000;}
前のページ >> 解説に戻る