fotodeo

先日の記事「htmlタグコード TABLE」に引き続き今日もtableネタでスタイルシートを使用してちょっと飾ってみようと思います。

まずは下のコードと実行結果をご覧ください。

-html-

<table border="1" cellpadding="5">
	<caption>テスト表</caption>
	<tr>
		<th>sample１</th>
		<th>sample２</th>
		<th>sample３</th>
	</tr>
	<tr bgcolor="#D8D8D8">
		<td>データ1</td>
		<td>データ2</td>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
		<td>データ6</td>
	</tr>
	<tr>
		<td bgcolor="#D8D8D8">データ7</td>
		<td bgcolor="#D8D8D8">データ8</td>
		<td bgcolor="#D8D8D8">データ9</td>
	</tr>
	<tr>
		<td>データ10</td>
		<td>データ11</td>
		<td>データ12</td>
	</tr>
</table>

-実行結果-

表に線を引く、セルに色を付ける、余白の量これらはtableタグの属性をつけてやることで簡単に見た目を変える事が出来ます。ここで登場している属性は

• border　　：罫線(枠)
• cellpadding：セルの余白
• gbcolor　　：セル背景色

ここで登場しているのは3つ。このあたりの属性で済ますとわりと表が簡単に作れますが、複雑にしようとするとtable全体の色をbgcolorで変えつつセルに更にテーブルを入れてその背景色を変えて罫線の色を変えたように見せたり、
スペースやBRでセルの大きさを変えたりなど・・・
横一列の背景色を変えるのにbgcolorをtd全てに入れ込んだりをたまに見かけます。横一列の背景色変えるならtrに入れ込めばすべてのtr内のtdに対してすべて適応されます。

と、htmlで作業すると結局ややこしくなりますのでCSSの出番となってきます。

スタイルシート使用して飾る

まずは当サイトで使用している（厳密にはもうちょっと触ってる）スタイルをペタッと張り付けただけのテーブルをご覧ください。

-実行結果-

htmlに書き込んでいた属性を一切取り払ってスタイルだけでデザインしています。

-css-

    #test{max-width: 700px;width: 70%;}
    #test caption{text-align: center;font-weight: bold;font-size: 1.2em;color: #fff;}
    #test caption{padding: 2px;background: linear-gradient(#8296b0,#4b5663);box-shadow: 0px 1px 1px rgba(255,255,255,0.9) inset;}
    #test th{padding: 3px;border-right: 2px solid #6a788a;padding-left: 3%;font-weight: bold;}
    #test td{padding: 3px;border-right: 2px solid #6a788a;text-align: center;}
    #test td:first-child, #test th:first-child{border-left: 2px solid #6a788a;}
    #test tr:last-child{border-bottom: 2px solid #6a788a;}
    #test tr:nth-child(odd) td, #test tr:nth-child(odd) th{background: linear-gradient(#F9F9FA,#d0d4d9);}
    #test tr:nth-child(even) td, #test tr:nth-child(even) th{background: linear-gradient(#fafafa,#e4eaed);}

-html-

<table id="test">
	<caption>テスト表</caption>
	<tr>
		<th><b>sample１</b></th>
		<th><b>sample２<b></th>
		<th><b>sample３<b></th>
	</tr>
	<tr>
		<td>データ1</td>
		<td>データ2</td>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
		<td>データ6</td>
	</tr>
	<tr>
		<td>データ7</td>
		<td>データ8</td>
		<td>データ9</td>
	</tr>
	<tr>
		<td>データ10</td>
		<td>データ11</td>
		<td>データ12</td>
	</tr>
</table>

html部はスタイルを呼び出すためのid=”test”しか書き込みが無いのでずいぶんすっきりしました。

自動でレイアウトを作り上げる

htmlだけで組むと、それぞれのコード内に背景色を入れる作業など発生してきますがここでは数行のコードで自動で背景色、罫線などが引かれていきます。

どうゆう事かと簡単に言うとHTMLの部分で下にデータが増えていってもtrとtdとその中に入れたいデータを追記していくだけで勝手に表が出来上がっていきます。

どうゆうカラクリなのか

ちょっと関係ない物も書かれてたりしますが、見せたい部分は　

• :first-child
• :last-child
• :nth-child(odd)
• :nth-child(even)

この四つ。これらを疑似クラスといいます。使用方法としてはテーブル以外の物にも使用できる便利なものになります。

まずは簡単に説明すると親要素に対して指定の要素にだけスタイルが適応されます。どうゆう事か進めます。上から順番に

• 最初の要素に対して
• 最後の要素に対して
• n番目の要素に対して（）内の条件が当てはまれば
• 同上

こんな感じです。まずはfirst-childはここではtableという親内の最初に出てくるtdかthに左縦罫線を引きなさいという事。

last-childはtable内の最後のtr（行）に対してアンダーバーを引きなさいと命令しています。

3番目と4番目は少し違いますが似たようなものです。完全に指定する事が出来ます。例えばn番目の要素が条件に合えば発動するので

td:first-childとtd:nth-child(1)は同じという事

説明するとtdの1番目の要素とはfirst-childの事と同じなのでどちらでも構いません。td:nth-child(3)こう書くと3番目の要素に対してスタイルが発動します。

ではoddとevenの説明になります。察しの良い方は気が付いたでしょうが、
odd（奇数）・even（偶数）となります。

つまりtrに疑似クラス:nth-child()が付いていますので奇数行と偶数行で別々のクラスを発動するようにしているので背景カラーが縞々になるというわけです。

まとめ

ちょっといきなり疑似クラスなんてものが出て戸惑いもあったかもしれませんが、スタイルシートを使うという事は、同じ条件で同じ事を書かなくていいのはもちろんの事、こういった演算的なものも利用して一つ一つ指示をしなくても簡単に一度に表現できるようになります。

たびたび言いますが、私の説明が完璧なわけではありません。この記事に出てきたワードを元にもっと詳しく知りたくなったらグーグル先生で調べてみましょう。もっと世界が広がっていきますよ^^b