table要素とhover

こんにちは、okkyです。

今回はHTMLとCSSの話です。tableとホバーエフェクトについて。

ただダラーっと述べても面白くないので、物は試し。いろんなことをやってみましょう。

まず先に<table>から。

<table>要素で遊ぼう
ホバーエフェクト
1. ホバーエフェクトとは
2. 実際にやってみた
まとめ

<table>要素で遊ぼう

<table>要素とは

そもそも<table>とはなんぞやという話ですが、

HTML の <table> 要素は表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

要はエクセルとかnumbersのような表をHTMLで作ってしまえというものです。

サクッと作るとこうなります。

<table>要素は「行」を作成する<tr>要素とセルを作成する<th>,<td>要素を組み合わせて作ります。
<th>要素は<tableheader>の略で、テーブルの見出しのセル。
<td>要素は<tabledata>の略で、テーブルの内容のセルを指します。わかりやすいですね。

ここでは1,2,3が見出しセル、あ,い,うが内容のセルです。

表を作る

ここまで来たら線を引いて表にしていきましょう。勝手に線がつくとか、エクセルほど親切ではないので自分で線をつける必要があります。

だいたい察しがつくと思いますが、CSSにborderプロパティを記述することで、線を引くことができます。

table要素にborderプロパティをつけることで外枠を作成することができ、td,th要素にborderプロパティをつけることで、セルに対して枠をつけることができます。

また、そのまま作成するとセル同士に隙間が生まれてしまい、少し見にくい表となってしまいます。
border-collapseプロパティの値「collapse」を用いることで、隙間を消すことができます。

セル結合をしてみよう

ここまでできれば、エクセルの初歩中の初歩「セルの結合」をしてみましょう。
エクセルであればセル結合を使えばチョチョイのチョイですが、HTMLはそうはいきません。

セル結合をするにはHTMLの<th>または<td>要素にそれぞれ結合する方向と結合する数を記入する必要があります。

横方向のセルを結合をするには「colspan=”結合する数”」、
縦方向のセルを結合するには「rowspan=”結合する数”」をth,tdタグの横に記入してください。

<th>要素を横方向へセル結合、<td>要素を縦方向へセル結合してみました。

paddingプロパティをつけることで、文字に対してのセルの大きさも変更することができますし、
widthやheightでセルの大きさを変更することもできます。

テーブルに色をつける

ここまできたら、セルに色をつけて見やすくしたいですよね。
現状ではthとtdの違いは文字の太さのみなので、わかりやすくしようと思います。

単純に<tr>要素や<th>,<td>にbackground-color:をつけても良いのですが、それでは列が増えた時に使いづらいと思います。
そこでやってくるのが<thead>,<tbody>,<tfoot>要素です。

難しそうですが、HTMLの構造と同じく、
tableの頭の部分（ここでいう<th>）が<thead>
中の部分が（ここでいう<td>）が<tbody>
最後の部分（合計とか書くような場所）が<tfoot>となります。

ざっくりと書くと

のようになります。必ずしもあるべきと言うものではないと思いますが、あるとセルの内容が扱いやすくなるのではないでしょうか。(tfootに関しては単純な表を作る場合使わないケースも多いのでは）

では色をつけます。
何も難しいことはせず、background-color:で色を指定してあげれば良いだけです。

ドイツ国旗をイメージしました。

これ、いろんなもの作れるんじゃね？

ドイツ国旗を作って思ったのですが、セルの大きさを変更したり、rowspanやcolspanプロパティやカラーを組み合わせることで、いろんなものを作れるのではないかと。やってみました。

Microsoft企業ロゴ

市松模様

ピート・モンドリアン「Composition with Red, Blue and Yellow」

boderやwidth、rowspan、colspanを駆使することで、かの有名なピート・モンドリアンの超名作までコードで作成することができました。
制作時間は１時間ほど。あまり実用的ではありませんが、意外と自由自在なことがご理解いただけましたでしょうか。

こんな感じで<table>要素は少し扱いに苦労することもありますが、慣れてしまえば簡単に自分好みの表を作ることができるのです。

ホバーエフェクト

だいぶ<table>が重くなりましたが、まだまだ続きます。HTMLを楽しみましょう。

ホバーエフェクトです。

ホバーエフェクトとは

:hover は CSS の擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル (マウスポインター) を要素の上でかざしたときにそうなります。
https://developer.mozilla.org/ja/docs/Web/CSS/:hover

マウスカーソルが上に来たら何やらアクションがつくアレです。
HTMLタグにCSSで:hoverを指定することで機能します。

難しい言葉で言うと「ユーザー操作擬似クラス」と言います。ユーザーの操作によって、まるでクラス名がついたかのようにCSSが作動しているという意味合いです。

よくリンクに利用されていると思いますが、意外と何にでも使えます。