[HTML]簡単な表をつくる[CSS]

HTMLで簡単な表を作っていきます。

タグ
単純な表
見出しとフッターのある表
セルを結合する
1. 横方向にセルを結合する
2. 縦方向にセルを結合する

単純な表

まずは単純な表を作成してみましょう。
今回つくる表の構成を図にすると、下の画像になります。

表全体を<table>で囲い、一行を<tr>で囲みます。<tr>のなかに<td>を配置します。

コード

html

<table>
  <tr>
    <td>国語</td>
    <td>英語</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>物理</td>
    <td>倫理</td>
    <td>体育</td>
  </tr>
</table>

css

table, td {
  border: 1px solid;
}

table {
  border-collapse: collapse;
  text-align: center;
  width: 600px;
}

borderプロパティ（cssの2行目）

線の太さ、種類、色をスペースで区切って一括指定します。
値は順不同です。
線の種類はsolid（実線）、dashed（破線）、dotted（点線）、double（二重線）など。border-styleプロパティで指定することもできます。
※線の種類の初期値はnoneのため、設定しないと線が表示されません。

border-collapseプロパティ（cssの6行目）

隣接する枠線の処理。collapse（崩れる）。
初期値はseparate。枠線を分けて表示。
collapseにすると隣接する線を一本に合わせます。

text-alignプロパティ（cssの7行目）

テキストの整列。
初期値はstart。日本語や英語のように左から右に向かう書式なら左寄せになります。
end（startの逆）、center（中央寄せ）、left（左寄せ）、right（右寄せ）、justify（両端寄せ）などがあります。

widthプロパティ（cssの8行目）

横幅を設定します。
ピクセル単位（px）や、親要素を100とした場合のパーセント（％）で指定します。
htmlのフォントサイズを基準とした場合のrem、親要素のフォントサイズを基準とした場合のemなどもあります。
縦幅を設定するプロパティにheightがあります。

イメージ画像

表になっていて、上段に、国語、英語、数学、下段に物理、倫理、体育、と表示されている。

参考としてCSSで別の設定をした表の画像を掲載します。
border-styleをdashedにして枠組みの線を破線にし、text-alignを未設定にすることでデフォルトの左寄せにし、border-collapseも未設定にしたので<table>と各<td>の枠線が分かれて表示されています。

枠線が破線になって、それぞれの教科を囲む枠線が表示、教科の配置が左寄せになった表。

見出しとフッターのある表

次は、見出しとフッターをつけた表を作ってみましょう。

タグには<thead>、<tbody>、<tfoot>を使います。

今回作成する表のタグ構成です。

tableの中にthead、tbody、tfootがあり、theadの中のtrにthが四つ入っている。tbodyの中のtrにtdが四つはいっている。tfootの中のtrの中にthが一つ、tdが三つある。

単純な表に、ヘッダー部を囲う<thead>、バディを囲む<tbody>、フッターを囲む<tfoot>が追加された形です。<thead>の中には<tr>があり、さらにその中に<td>ではなく、<th>が入っています。

コード

html

<table>
  <caption>売り上げ（円）</caption>
  <thead>
    <tr>
      <th>日付</th>
      <th>りんご</th>
      <th>みかん</th>
      <th>いちご</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>8/1</td>
      <td>2000</td>
      <td>3200</td>
      <td>5000</td>
    </tr>
    <tr>
      <td>8/2</td>
      <td>3000</td>
      <td>1500</td>
      <td>8200</td>
    </tr>
    <tr>
      <td>8/3</td>
      <td>1000</td>
      <td>500</td>
      <td>4000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <td>6000</td>
      <td>5200</td>
      <td>17200</td>
    </tr>
  </tfoot>
</table>

css

table {
  border: 1px solid gray;
  text-align: center;
  width: 600px;
}

tbody {
  background-color: #f8c6bd;
}

thead, tfoot {
  background-color: #ff4500;
  color: white;
}

イメージ画像

キャプション「売り上げ（円）」。りんご、みかん、いちごの日付ごとの売り上げと各合計。

<thead>、<tbody>、<tfoot>は使わなくてもテーブル表示に影響はありません（cssで指定した場合を除く）
これらは構成をわかりやすくし、コードを読む人に対して有用な情報となります。

<table>の直後に<tr>を配置した場合、<thead>、<tbody>、<tfoot>は使用できません。

セルを結合する

横方向にセルを結合する

横方向にセルを結合するには、<th>や<td>に属性「colspan」を使います。columun-spanの略で、結合する列の長さを数値で指定します。

下記htmlの4行目を参照してください。

html

<table>
  <thead>
    <tr>
      <th colspan="2">名前</th>
    </tr>
    <tr>
      <th>姓</th>
      <th>名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>磯野</td>
    　<td>サザエ</td>
    </tr>
    <tr>
      <td>磯野</td>
      <td>カツオ</td>
    </tr>
  </tbody>
</table>

css

table {
  text-align: center;
  border-collapse: collapse;
  width: 600px;
}

table, th, td {
  border: 1px solid;
}

イメージ画像

表。一番上に名前、その下に姓と名の項目がある。磯野、サザエ、磯野、カツオが入っている。

「名前」の部分は二つの列を結合しているので、「colspan="2"」としています。
もし三つの列ならば"3"、四つなら"4"に変えるだけです。

縦方向にセルを結合する

縦方向なら<th>や<td>に「rowspan」属性を使用します。
結合したい行の長さを指定します。

下記htmlの13行目です。

html

<table>
  <thead>
    <tr>
      <th colspan="2">名前</th>
    </tr>
    <tr>
      <th>姓</th>
      <th>名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">磯野</td>
    　<td>サザエ</td>
    </tr>
    <tr>
      <td>カツオ</td>
    </tr>
  </tbody>
</table>

※cssは横方向を結合で使用したものと共通。

イメージ画像

表。一番上に名前、その下に姓と名の項目がある。姓は磯野がひとつ。名にはサザエ、カツオがそれぞれ入っている。

htmlの16～18行目に注目してください。<td>がひとつしかないことが見て取れると思います。
結合した場合、その分のデータを省くようにしなければいけないことも注意してください。

もう少し複雑な表は以下で扱っていきます。