サンプル5

テーブルの形を変更と余白設定

サンプル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;}

前のページ >> 解説に戻る

サンプル5、テーブルの形を変更と余白設定。パソコン付属のテキストエディタを利用した、初心者向け無料ホームページ作成方法の解説。無料hp作成の参考に!

ページTopヘ

Top >> 無料 ホームページ作成

Access Ranking!

  1. 無料 求人 派遣 土日のみ 単発
  2. 無料 海外旅行保険 クレジットカード 傷害
  3. 無料 アンケート
  4. 無料 クレジットカード 審査 甘い
  5. 無料 ホームページ作成 無料hp作成
  6. 無料 クレジットカード 初心者
  7. 無料 オリックスカード 審査
Copyright©2017 www.syousai.com.All rights reserved. XTML, CSS,