IT初心者の分かったメモ

3.1. 1行目 タイトル行

<table class="sample-table">
  <tr>
    <th colspan="3" class="title-cell">サービス料金表</th>
  </tr>
</table>

この行は表全体のタイトル（見出し帯）になるので見出しとなるthを使います。さらに、thにcolspan=”3″を付けて横3列分を1つのセルに結合しています。また、ここで「3列分」と宣言しているため、この後に続く行は各行が3列分のセル構成である前提になります。

3.2. 2行目 見出し行

<table class="sample-table">
  <tr>
    <th colspan="3" class="title-cell">サービス料金表</th>
  </tr>

  <tr>
    <th>アイコン</th>
    <th>プラン名</th>
    <th>料金</th>
  </tr>
</table>

次に各列の見出しをthで並べていきます。ここで列の「意味」を決めるので、今回は1列目＝アイコン、2列目＝プラン名、3列目＝料金の順に合わせて値を入れます。こうすることで、1行目3列分の結合セルとの整合性がとれます。

3.3. 3行目 データ行その1

<table class="sample-table">
  <tr>
    <th colspan="3" class="title-cell">サービス料金表</th>
  </tr>

  <tr>
    <th>アイコン</th>
    <th>プラン名</th>
    <th>料金</th>
  </tr>

  <tr>
    <td><img src="image/icon_a.png" alt="アイコン"></td>
    <td>スタンダード</td>
    <td>1,000円</td>
  </tr>
</table>

サービス料金表
アイコン	プラン名	料金
	スタンダード	1,000円

通常のデータ行です。tdを3つ並べて、上の見出し行と列の対応を保っています。今回はセル内に画像が使われているのでセル内にimgタグが入っています。このように、セルには画像やリンクなどテキスト以外の要素も入れることができます。

3.4. 4行目 データ行その2

<table class="sample-table">
  <tr>
    <th colspan="3" class="title-cell">サービス料金表</th>
  </tr>

  <tr>
    <th>アイコン</th>
    <th>プラン名</th>
    <th>料金</th>
  </tr>

  <tr>
    <td><img src="image/icon_a.png" alt="アイコン"></td>
    <td>スタンダード</td>
    <td>1,000円</td>
  </tr>

  <tr>
    <td rowspan="2"><img src="image/icon_b.png" alt="アイコン"></td>
    <td>プレミアムA</td>
    <td>2,500円</td>
  </tr>
</table>

サービス料金表
アイコン	プラン名	料金
	スタンダード	1,000円
	プレミアムA	2,500円

ここでrowspan=”2″を使い、1列目のtdタグをこの行と次行（2行分）を結合させる設定をしておきます。今回は一列目に画像があるので、「同じアイコンが4行目と5行目の両行にまたがる」ようなレイアウトになります。また、rowspanを使うと次の（下の）行ではその列分のtdタグを書かないことに注意してください。具体的には、次行で1列目のtdタグを省略します。

3.5. 5行目 データ行その3

<table class="sample-table">
  <tr>
    <th colspan="3" class="title-cell">サービス料金表</th>
  </tr>

  <tr>
    <th>アイコン</th>
    <th>プラン名</th>
    <th>料金</th>
  </tr>

  <tr>
    <td><img src="image/icon_a.png" alt="アイコン"></td>
    <td>スタンダード</td>
    <td>1,000円</td>
  </tr>

  <tr>
    <td rowspan="2"><img src="image/icon_b.png" alt="アイコン"></td>
    <td>プレミアムA</td>
    <td>2,500円</td>
  </tr>

  <tr>
    <td>プレミアムB</td>
    <td>3,000円</td>
  </tr>
</table>

サービス料金表
アイコン	プラン名	料金
	スタンダード	1,000円
	プレミアムA	2,500円
	プレミアムB	3,000円

前行のrowspan=”2″により、1列目はすでに上の行と結合されているため、ここには 2列目・3列目のみを書きます。行内のセル数が見かけ上「2つ」でも、表全体の列数は変わらず3列分として扱われるます。このようにcolspan/rowspanを混ぜると列数や行数の数え方が複雑になります。常に列数の総合性を意識してください。

4.1. border-collapse: collapse（線をまとめる）

collapseは隣り合うセルの罫線を一本にまとめる設定です。今回の見本でcollapseが使われているように、線を均一にした表を作る際にオススメです。

サービス料金表
アイコン	プラン名	料金
	スタンダード	1,000円
	プレミアムA	2,500円
	プレミアムB	3,000円

4.2. border-collapse: separate（線を分けて描画する）

separateは、各セルが独立した箱として扱われる設定です。セル同士の枠線が独立するため、線が重なる部分があると太く見えることがあります。また、プロパティ値がseparateの場合、枠線が独立するためセル間に余白（セル間距離）を作ることができます。その際に利用できるプロパティにborder-spacingというものがあり表内で余白を持たせたいときや二重線を表したいときに便利です。

.sample-table {
    margin: 30px 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
    background-color: #fafafa;
}

サービス料金表
アイコン	プラン名	料金
	スタンダード	1,000円
	プレミアムA	2,500円
	プレミアムB	3,000円