19/4/30学習記録②　HTMLとCSSによるテーブル(表)作成

テーブルの背景はtable,tr,tdの順に塗りつぶされる

行の結合＝colspan
列の結合＝rowspan

tableタグ→テーブル全体
trタグ→行
thタグ→見出し
td→テーブル内のデータ

テーブルの罫線
セルに罫線を引く時は、thタグ・tdタグにborderプロパティを設定する。

セルごとに罫線を引くか、セルとセルの間の線を1本にまとめるか指定するには、border-collapseプロパティを使う。

複数のセレクタに同じスタイルを適用させるには
カンマ（,）で区切る。

実体参照
￥ は、正しく入力しないとOSによっては正しく表示されない。
文字化けする可能性があるものや、「”」「<」「>」「&」などHTML要素のコンテンツに使用できない文字を使用したい時は、”実体参照”を使う。

キャプションは<table>開始タグのすぐ次の行に記述する。

:nth-child(n)セレクタ

同じ要素が連続するテーブルや箇条書きなどにCSSを適用するときに便利なセレクタ。

横スクロール可能なテーブルを作るには

通常、要素のボックスはコンテンツが収まるように幅も高さも調整される。
したがって、コンテンツが親要素をはみ出すことはない。
しかし、要素に対してwidthやheightプロパティを適用していて、そのサイズが親要素より大きい場合、コンテンツがはみ出してしまうことになる。

きれいな表としての体裁を保ちつつ、テーブル全体を表示するためには、スクロール可能にするのが良い。

横スクロール可能なテーブルの、HTML構造とCSS

<div class="table-wrapper">
  <table class="scroll-table">
  ...
  </table>
</div>

HTMLはこんな感じ。
まずはじめに<table>全体を<div>で囲む。

.table-wrapper {
  overflow-x: scroll;
  }

.scroll-table {
  width: 1000px;
  }

次に<table>を囲んだ<div>に対して、CSSで「 oveflow-x: scroll; 」を適用する。

overflowの役割とは？

コンテンツが要素からはみ出ているときに、そのはみ出ている部分をどうやって表示させるのかを決めることができる。

簡単な表にまとめてみよう。

セル内のコンテンツ(テキスト)を改行したくないときには、「white-space」プロパティを使う

テーブルのセル幅は、コンテンツが収まる最小限に自動調整される。
しかし、テキストが長すぎる場合は、改行されてしまう。

どうしても改行されたくない時(見出しなど）があるときは、「white-space」プロパティで対応ができる。
例として、テーブルの見出し部分(thタグ)を改行しないときのCSSは下記のようになる。

.th {
  white-space: nowrap;
  }