少し複雑な表をつくる

HTML&CSS
2021.09.05

列の色を変えたり、テーブルの幅の固定方法、行の折り返し方、スクロールバーのある表をつくっていきます。

簡単な表をつくる
単純な表や見出しとフッターのある表、セルを縦に結合する方法と横に結合する方法を書きました。
fuji-pocketbook.net
2021.08.25
スポンサーリンク
スポンサーリンク

列の色やスタイルを変える

列の色やスタイルを変更するには、列を<colgroup>でグループ化し、クラスを設定することでcssに反映させます。

ふた通りのやり方があります。

  • <colgroup>にspan属性を使う。
  • <colgroup>と<col＞を使用する。

span属性

span=""のダブルクォーテーションの中で長さを指定します。
デフォルトは１です。

ではさっそくやってみましょう。
列ごとに背景色を設定します。

cssと表のイメージは共通のため、先にそちらを掲載します。

css

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

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

.red {
  width: 25%;
  background-color: red;
}

.green {
  width: 25%;
  background-color: #3cb371;
}

.yellow {
  width: 25%;
  background-color: yellow;
}

一列あたりのwidthを25%にすることで均等な列幅になるように設定しています。
テーブルの幅が100%、4列――100/4=25%。

イメージ画像

赤色の列が２つ、緑色の列、黄色の列が一つずつある。赤色の列には赤い果物、緑の列には緑の果物、黄色の列には黄色の果物の名前が入っている。
  • <colgroup>にspanを使った書き方

色ごとにredクラス、greenクラス、yellowクラスを設定し、spanで列の長さを指定します。

html

<table>
  <colgroup span="2" class="red"></colgroup>
  <colgroup span="1" class="green"></colgroup>
  <colgroup span="1" class="yellow"></colgroup>
  <tr>
    <td>りんご</td>
    <td>いちご</td>
    <td>キウイ</td>
    <td>バナナ</td>
  </tr>
  <tr>
    <td>さくらんぼ</td>
    <td>ザクロ</td>
    <td>梨</td>
    <td>洋梨</td>
  </tr>
</table>

spanで指定した列数と色の列が対応しています。

spanのデフォルト値は1のため省略が可能です。そのため、htmlの3行目は
<colgroup class="green"></colgroup>とすることもできます。4行目も同様です。

  • <colgroup>と<col>を使った書き方

<col>に色ごとのクラスを設定し、spanで列数を指定します。

html

<table>
  <colgroup>
    <col span="2" class="red"></colgroup>
    <col class="green"></colgroup>
    <col class="yellow"></colgroup>
  </colgroup>
  <tr>
    <td>りんご</td>
    <td>いちご</td>
    <td>キウイ</td>
    <td>バナナ</td>
  </tr>
  <tr>
    <td>さくらんぼ</td>
    <td>ザクロ</td>
    <td>梨</td>
    <td>洋梨</td>
  </tr>
</table>

コードの4行目と5行目は「span="1"」で省略可能なのでそうしています。

<colgroup>にspanを設定し、<col>を配置した場合、<colgroup>のspanは無視されます。

テーブルの幅を固定する

<th>や<td>の内容（コンテンツ）が長い文字列の場合、cssで特に指定しなければ、コンテンツの長さにともなってセルが横に長くなります。

データの数が多い場合や、長い文字列を扱うときには、自分が意図した表にならないことがあります。

以下の画像は長い文字をセルに配置した表です。
赤い枠線はbodyのwidthで、630pxに設定しています。表の幅はそれの100%に設定していますが、どうでしょうか、表の枠がbodyを超えてしまっています。

テーブルの幅がbodyの幅を超えてしまっている。

html

<table>
  <thead>
    <tr>
      <th>10文字</th>
      <th>20文字</th>
      <th>40文字</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>aaaaaaaaaa</td>
      <td>aaaaaaaaaaaaaaaaaaaa</td>
      <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>
    <tr>
      <td>bbbbbbbbbb</td>
      <td>bbbbbbbbbbbbbbbbbbbb</td>
      <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
    </tr>
  </tbody>
</table>

css

body {
  width: 630px;
  border: 5px solid red;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
  
table, th, td {
  border: 1px solid;
}

table-layout

テーブルを意図通りに設定するには、cssのプロパティ「table-layout」を「fixed」にします。
そうすることで、コンテンツに影響されずにテーブルの幅（またはセルの幅）を設定できます。

table-layoutを変更し、最初の列のセル幅を20%、二番目の列のセル幅を35%、最後を45%に変更してみます。列の幅を設定するのに<colgroup>を使ってもいいのですが、グループ化するほどでもないので、cssの擬似クラスを使ってみます。

追加css

table {
  table-layout: fixed;
}

th:nth-child(1) {
  width: 20%;
}

th:nth-child(2) {
  width: 35%;  
}

th:nth-child(3) {
  width: 45%;
}

th:nth-child(n)

ｎ番目のthにcssを適用させる
表の一行目（今回の場合は見出し）のセル幅を設定しておけば、他の行もそれにならって設定される

イメージ画像

bodyの幅にテーブルが収まった。ただテーブルとbodyを文字が突き抜けてしまった。

テーブルとセル幅の固定はできました。
しかし、固定化したことで文字があふれてしまいました。

次は長い行を折り返す方法と、設定した幅を超えた場合にスクロールできるように設定してみましょう。

行を折り返す

前提条件として、日本語だと特に設定しなくても長ければ自動で改行されます。アルファベットや数字、英文の場合、間にスペースが入っていればこれも同じように改行されます。

上がアルファベット、下がひらがなの入った表。文字列は改行され、表の枠内に収まっている。

overflow-wrap

長い単語をテーブル内でも折り返しさせるには、cssで「table-layout: fixed」に設定し、改行を制御するプロパティ「overflow-wrap」を「break-word」にします。

html

<table>
  <thead>
    <tr>
      <th>10文字</th>
      <th>20文字</th>
      <th>40文字</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>aaaaaaaaaa</td>
      <td>bbbbbbbbbbbbbbbbbbbb</td>
      <td>ccccccccccccccccccccXddddddddddddddddddd</td>
    </tr>
  </tbody>
</table>

css

table {
  width: 630px;
  text-align: center;
  border-collapse: collapse;
  table-layout: fixed;
  overflow-wrap: break-word;
}
  
table, th, td {
  border: 1px solid;
}

th:nth-child(1) {
  width: 20%;
}

th:nth-child(2) {
  width: 35%;  
}

th:nth-child(3) {
  width: 45%;
}

イメージ画像

改行されて表の枠内に文字が収まっている

word-break

「overflow-wrap: break-word;」に動作が似ているものに「word-break: break-all;」があります。一行に収まらない長い単語の場合の動作は同じですが、一行に複数の単語があるときの動作が異なります。

例として<p>What is the meaning of supercalifragilisticexpialidocious?</p>という一文があって、<p>のfont-sizeが20px、widthが200pxだった場合を見てみましょう。
赤い枠線は<p>のborderです。

未設定の場合

「What is the」で改行、「meaning of」で改行、「supercalifragilisticexpialidocious?」が途中で枠を突き抜けている。

overflow-wrap・break-wordの場合

「What is the」で改行、「meaning of」で改行、「supercalifragilisticex」で改行されて「pialidocious?」

word-break・break-allの場合

単語の途中でも改行されている。

overflow-wrapの方は、単語の手前で改行して意味の区切りを保とうとしている事に対し、word-breakの方は行からあふれたところで改行しています。
例えば一行に長い単語や、数字、URLなどの長いアルファベットならば動作は同じになります。

<p>を使って説明しましたが、表でも効果は一緒です。

スクロールバーを設定する

いくつかプロパティを指定します。

テーブルでもスクロール可能にするには、displayプロパティをblockにします。

そして折り返ししないように、white-spaceをnowrapにします。

overflowプロパティをscroll、またはautoにすることで縦と横にスクロールバーを設定します。

縦だけスクロールバーを設定するならoverflow-y、横ならoverflow-xを使います。

scrollとautoの違い

overflow、同-x、同-yの値「scroll」は、範囲内に収まった場合でもスクロールバーを表示します。
「auto」は挙動がブラウザに依存し、範囲内に収まらないときにスクロールバーを表示します。

例・overflow:scroll。
縦方向のスクロールバーは機能しないが表示はされている。

3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628

例・overflow:auto。

3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628

では実際に表を作ってみます。

html

<table>
  <thead>
    <tr>
      <th>作者名</th>
      <th>作品名</th>
      <th>書き出しの一文</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>芥川龍之介</td>
      <td>蜘蛛の糸</td>
      <td>ある日の事でございます。</td>
    </tr>
    <tr>
      <td>太宰治</td>
      <td>女生徒</td>
      <td>あさ、眼をさますときの気持は、面白い。</td>
    </tr>
    <tr>
      <td>夏目漱石</td>
      <td>硝子戸の中</td>
      <td>硝子戸の中から外を見渡すと、霜除よけをした芭蕉だの、赤い実の結った梅もどきの枝だの、無遠慮に直立した電信柱だのがすぐ眼に着くが、その他にこれと云って数え立てるほどのものはほとんど視線に入って来ない。</td>
    </tr>
  </tbody>
</table>

css

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

table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  white-space: nowrap;
  overflow: auto;
}

th {
  padding: 5px 10px;
  text-align: left;
　background-color: rgb(166, 187, 206);
}

td {
  padding: 10px;
}

tbody tr:nth-child(odd) {
  background-color: skyblue;
}

cssの23行目

tbody tr:nth-child(odd)
tbodyの子要素で、奇数番のtrにcssを適用させます。
偶数を指定する場合は(even)とします。

作者名 作品名 書き出しの一文
芥川龍之介 蜘蛛の糸 ある日の事でございます。
太宰治 女生徒 あさ、眼をさますときの気持は、面白い。
夏目漱石 硝子戸の中 硝子戸の中から外を見渡すと、霜除よけをした芭蕉だの、赤い実の結った梅もどきの枝だの、無遠慮に直立した電信柱だのがすぐ眼に着くが、その他にこれと云って数え立てるほどのものはほとんど視線に入って来ない。
タイトルとURLをコピーしました