CSS テーブル デザイン

デザイン五輪書

CSSでテーブルタグをデザインする

読了までの目安時間:約 58分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

CSSでテーブルタグをデザインする

テーブルタグ

テーブルタグとは?

テーブルタグとは、ウェブサイト上に表を表示する際に使用する、便利なタグの事です。

テーブルタグ

テーブルタグの構成としては、table要素の中に、部品となるいくつかの要素を記述する事で、一つのテーブルを作り上げます。

<table>
  <tr>
    <th scope="col">氏名</th>
    <th scope="col">年齢</th>
    <th scope="col">性別</th>
  </tr>
  <tr>
    <td>宮本武蔵</td>
    <td>28</td>
    <td>男性</td>
  </tr>
  <tr>
    <td>佐々木小次郎</td>
    <td>48</td>
    <td>男性</td>
  </tr>
</table>

テーブルタグと言うと、以前は、テーブルレイアウトと言って、テーブルタグをデザイン目的に使用する方法が流行しました。
その理由は、テーブルタグでサイトを作れば、デザイン崩れを起こしにくいからです。

しかし、HTML5が登場してからは、タグに構造上の意味を持たせるようになりました。
ですので、本来の使い方から反れているテーブルレイアウトは、現在、推奨されていません。
使用できなくはないですが、サイト自体の評価が下がってしまいます。

上記理由から、テーブルレイアウトは今、ほとんど見る事はありません。
ですが、テーブルタグ自体がなくなったと言う訳ではなく、テーブルタグ自体は本来の使われ方に戻りました。

▲もくじへ戻る

コピペするだけでは意味がない

今回は、このテーブルタグにCSSを使ってデザインをする方法をご紹介したいと思います。

テーブルタグで検索をすると、無料でテーブルタグのソースコードをコピーできるサイトがあります。
ですが、意味も分かっていないのに流用するだけでは、あなたの実力は向上しませんし、テーブルタグのカスタマイズもできません。
結果、あなたオリジナルのテーブルが作れず、どこかで見掛けたような、ありふれているテーブルしか設置する事ができません。

それではあまり意味がありませんので、当記事では、一つ一つ順を追いながら、説明をして行きたいと思います。

▲もくじへ戻る

テーブルタグを記述する

table要素とcaption要素

では、早速作業に入りましょう。
まずは、HTMLでテーブルタグを記述して行きます。

テーブルの作成は、<table>と</table>と言うタグの間に、部品となる要素を記述して行きます。
table要素内では、summary属性でテーブルの説明を記述します。
これは、音声認識ソフトで読み上げられます。

<table summary="参考書一覧表">
</table>

加えて、caption要素を使用し、テーブルのタイトルや補足説明を記述します。
caption要素は<table>タグ直後に記述し、記述した内容はブラウザ上で表示されます。

caption

<table summary="参考書一覧表">
<caption>参考書一覧表</caption>
</table>

▲もくじへ戻る

テーブルの行を記述する

次は、テーブルの行を記述したいと思います。
行とは、テーブルの横の固まりの事を言います。

行

テーブルの行を表す際は、tr要素を使用します。
tr要素を記述した数の分、行が作られます。

今回は、五行作りたいと思います。

<table summary="参考書一覧表">
<caption>参考書一覧表</caption>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

▲もくじへ戻る

テーブルの列と項目を記述する

続いて、テーブルの列を記述します。
列とは、テーブルの縦の固まりの事を言います。

列

テーブルの列は、td要素を使って表します。
td要素は、tr要素の中に記述します。
そして、td要素を記述した数だけ、列が表示されます。

今回の作例では、三列作りたいと思います。

<table summary="参考書一覧表">
<caption>参考書一覧表</caption>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

td要素の中に、テーブルで表示する項目名を記述します。
作例では、PhotoshopIllustratorInDesignに関する参考書の一覧表を作りたいと思います。

<table summary="参考書一覧表">
<caption>参考書一覧表</caption>
<tr>
<td>書籍名</td>
<td>ジャンル</td>
<td>価格</td>
</tr>
<tr>
<td>Photoshopテクニック集</td>
<td>Photoshop</td>
<td>2,980円</td>
</tr>
<tr>
<td>Illustratorテクニック集</td>
<td>Illustrator</td>
<td>2,980円</td>
</tr>
<tr>
<td>Photoshop小技集</td>
<td>Photoshop</td>
<td>1,570円</td>
</tr>
<tr>
<td>早分かりInDesign</td>
<td>InDesign</td>
<td>3,250円</td>
</tr>
</table>

テーブルタグ内の項目を記述した事で、ブラウザ上でもテーブルが確認できるようになりました。

項目を記入

▲もくじへ戻る

テーブルの列に見出しを設定する

最後に、テーブルに見出しを付けましょう。
一行目を見出しに変更します。

1行目を見出しに

見出しは、th要素を使用します。
そして、この見出しは縦列に対する見出しですので、scope属性を書き加えます。
scope属性の値は「col」です。

一行目のtd要素を書き換えて下さい。

<table summary="参考書一覧表">
<caption>参考書一覧表</caption>
<tr>
<th scope="col">書籍名</th>
<th scope="col">ジャンル</th>
<th scope="col">価格</th>
</tr>
<tr>
<td>Photoshopテクニック集</td>
<td>Photoshop</td>
<td>2,980円</td>
</tr>
<tr>
<td>Illustratorテクニック集</td>
<td>Illustrator</td>
<td>2,980円</td>
</tr>
<tr>
<td>Photoshop小技集</td>
<td>Photoshop</td>
<td>1,570円</td>
</tr>
<tr>
<td>早分かりInDesign</td>
<td>InDesign</td>
<td>3,250円</td>
</tr>
</table>

td要素がth要素に書き換えられた事で、テーブルの一行目は、太字の真ん中寄せになります。

見出しが設定された

これで、HTMLの設定は終了です。

▲もくじへ戻る

caption要素のデザイン

caption要素を太字にする

次はCSSを使って、作成したテーブルタグのデザインを行います。
まずは、caption要素のデザインを設定しましょう。

caption要素を太字にします。
文字を太字に変更する場合は、font-weightプロパティを使用します。
値は「bold」です。

caption{
	font-weight:bold;
}

caption要素を太字に

▲もくじへ戻る

caption要素下部に隙間を空ける

caption要素下部とテーブルとの間がくっ付き過ぎていますので、若干の隙間を設定します。
下部の余白設定はmargin-bottomプロパティを使用します。

値は、1文字の半分を表す、「0.5em」を指定します。
スタイルシートに数値を記述する際、小数点の前にある0は省略する事ができますので、「.5em」と記述します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}

caption要素下部に隙間を

caption要素のデザインはこれで完了です。

▲もくじへ戻る

テーブルのデザイン

セル間の隙間を設定

テーブルタグを使用する際は、セル間の隙間を空けない為に、border-collapseプロパティを設定し直す機会が多いです。

table{
	border-collapse:collapse;
}

セル間の隙間

ですが、この方法を使用すると、テーブル枠を角丸に変更する事ができません。
今回はテーブルを角丸にしますので、border-collapseプロパティを「collapse」に設定変更する方法は行いません。

border-collapseプロパティを「collapse」に設定しない場合は、「separate」に設定します。
ですが、border-collapseプロパティは初期状態で「separate」の設定になっていますので、改めて指定を行う必要はありません。

border-collapseプロパティを「separate」にすると、セル間に隙間が生じてしまいます。
そこで、border-spacingプロパティを使用して、セル間の隙間を「0」に設定します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
}

セル間の隙間を0に

border-collapseプロパティを「collapse」に設定変更した場合と見比べると、枠線部分は重なり合わない為、線が二重になり、まるで、太線を引いたかのように見えてしまいます。
ですので、この方法を行う場合は、枠線が二重にならないように、枠線の表示位置を制限する必要が出て来ます。
具体的な方法は、後ほど説明します。

▲もくじへ戻る

テーブルの外枠の設定

続いて、テーブルの外枠を設定したいと思います。
テーブルの外枠は、「2px」の「直線」で、色には「#F90」の色番号を指定したいと思います。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
}

テーブルの外枠

続けて、表示された外枠の角を丸く設定したいと思います。
外枠の丸み具合は、半径「5px」に設定します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
}

テーブルの角を丸める

▲もくじへ戻る

テーブルの表示位置の設定

最後に、テーブルをコンテンツの真ん中の位置で表示するように設定を行います。
テーブルを真ん中寄せで表示する場合、左右の余白を自動に設定する方法を行います。

左側の余白の設定はmargin-leftプロパティ、右側の余白の設定はmargin-rightプロパティを使用し、自動の設定は、値を「auto」と指定します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}

真ん中寄せで表示された

これで、table要素に対するCSSの設定は完了です。

▲もくじへ戻る

テーブル内に罫線を引く

見出しの罫線

次は、テーブル内に罫線を引いて行きます。

まずは、見出し(th要素)の右側に罫線を引きます。

見出し右側に罫線を

右側に罫線を引く場合、border-rightプロパティを使用します。
右側の罫線は「1px」の「直線」で、色を「#F90」に指定します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
th{
	border-right:solid #F90 1px;
}

見出しに罫線が引かれた

見出しの最終列の部分ですが、右側の罫線とテーブル枠とが並んで、線が太く見えてしまっています。

線が二重に

ですから、見出しの最終列だけ、右側の罫線を表示しないように設定をします。
「最終列だけ」と言う限定的な指定方法をする場合、セレクタに構造擬似クラスの「:last-child」を追記して指定します。

罫線を非表示にする場合は、borderプロパティの値を「none」にします。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
th{
	border-right:solid #F90 1px;
}
th:last-child{
	border-right:none;
}

見出しの最終列右側の罫線が非表示に

▲もくじへ戻る

セルの罫線

次は、セル(td要素)に罫線を引いて行きます。
セルでは、右側に加え、上にも罫線を引きます。

セル右側と上に罫線を

右側に罫線を引く場合、border-rightプロパティを使用します。
そして、上側に罫線を引く場合、border-topプロパティを使用します。
罫線は「1px」の「直線」で、色を「#F90」に指定します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
th{
	border-right:solid #F90 1px;
}
th:last-child{
	border-right:none;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
}

セルに罫線が引かれた

セルも見出しと同様に、最終列が枠と並んで表示されています。

右側の線が二重に

見出しと同様の方法で、セルの最終列の罫線を非表示にします。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
th{
	border-right:solid #F90 1px;
}
th:last-child{
	border-right:none;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
}
td:last-child{
	border-right:none;
}

セルの最終列右側の罫線が非表示に

とてもシンプルなテーブルができ上がりました。

▲もくじへ戻る

セルをデザインする

セルに余白を追加する

続いて、セルにCSSでデザインを追加して行きます。

まずは、セル間に隙間がなく、文字が少し読みづらいですから、セルに余白を追加しましょう。
セル内に余白を設定する場合、paddingプロパティを使用します。
余白は「10px」にします。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
th{
	border-right:solid #F90 1px;
}
th:last-child{
	border-right:none;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
td:last-child{
	border-right:none;
}

セル内に余白が追加された

▲もくじへ戻る

セルの背景色を設定する

続いて、セルの背景色を設定しましょう。
背景色を指定する場合、backgroundプロパティを使用します。

ですが、ただ単に塗りつぶすだけでは特徴がありませんので、行ごとに色を塗り替えてみようと思います。
2色に塗り分ける事で、単色の場合よりも、表の可読性が上がります。

色と可読性

色は奇数行と偶数行とで塗り分けましょう。
奇数行を指定する場合、構造擬似クラスの「:nth-child(odd)」をtr要素に追記して指定します。
偶数行を指定する場合、構造擬似クラスの「:nth-child(even)」をtr要素に追記して指定します。

奇数行の背景色は「#FC6」、偶数行の背景色は「#FE9」に設定します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
th{
	border-right:solid #F90 1px;
}
th:last-child{
	border-right:none;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
td:last-child{
	border-right:none;
}

行ごとに背景色を設定

▲もくじへ戻る

四隅のセルの角を丸める

テーブルに背景色が設定されましたが、四隅を確認してみると、角が尖ったままです。
一方、テーブルの枠は曲線ですので、仕上がりが良くありません。

セルの角

ですから、四隅のセルを全て、角丸に設定し直しましょう。
角丸を設定する場合、border-radiusプロパティを使用します。

四隅のセルは、それぞれ一ヶ所の角のみを丸めます。
ですから、角丸の指定は一ヶ所のみを対象に行います。

border-radiusプロパティを使用する場合、以下の指定方法があります。

border-radius:全体;
border-radius:左上と右下 右上と左下;
border-radius:左上 右上と左下 右下;
border-radius:左上 右上 右下 左下;

角丸の指定位置

これを参考に、四隅のセルの一ヶ所の角のみを角丸に指定していきます。

まずは、テーブルの左上、つまりは、見出しの最初のセルの角を角丸に指定します。

最初の見出しの角を丸める

見出しの最初のセルを指定する場合、th要素に構造擬似クラスである「:first-child」を追記します。

角丸に設定する部分は、左上の角です。
テーブルの枠は半径5pxで丸めましたが、セルは枠線の2px分だけ半径が小さくなりますので、「3px」で丸めます。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
th{
	border-right:solid #F90 1px;
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
td:last-child{
	border-right:none;
}

テーブル左上の角を丸めた

続けて、テーブルの右上、つまりは、見出しの最後のセルの角を角丸に指定します。

最後の見出しの角を丸める

見出しの最後のセルを指定する場合、th要素に構造擬似クラスである「:last-child」を追記します。

角丸に設定する部分は、右上の角です。
セルの角は「3px」で丸めます。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
th{
	border-right:solid #F90 1px;
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
	border-radius:0 3px 0 0;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
td:last-child{
	border-right:none;
}

テーブル右上の角を丸めた

続けて、テーブルの左下、つまりは、最終行の中の最初のセルの角を角丸に指定します。

最終行の中の最初のセルの角を丸める

最終行を指定する場合、tr要素に構造擬似クラスである「:last-child」を追記します。
そして、その中にある最初のセルを指定するので、半角のスペースを空けた後、td要素に擬似クラスである「:first-child」を追記します。

角丸に設定する部分は、左下の角です。
セルの角は「3px」で丸めます。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
th{
	border-right:solid #F90 1px;
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
	border-radius:0 3px 0 0;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
tr:last-child td:first-child{
	border-radius:0 0 0 3px;
}
td:last-child{
	border-right:none;
}

テーブル左下の角を丸めた

最後に、テーブルの右下、つまりは、最終行の中の最後のセルの角を角丸に指定します。

最終行の中の最後のセルの角を丸める

最終行を指定する場合、tr要素に構造擬似クラスである「:last-child」を追記します。
そして、その中にある最後のセルを指定するので、半角のスペースを空けた後、td要素に擬似クラスである「:last-child」を追記します。

角丸に設定する部分は、右下の角です。
セルの角は「3px」で丸めます。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
th{
	border-right:solid #F90 1px;
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
	border-radius:0 3px 0 0;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
tr:last-child td:first-child{
	border-radius:0 0 0 3px;
}
td:last-child{
	border-right:none;
}
tr:last-child td:last-child{
	border-radius:0 0 3px;
}

テーブル右下の角を丸めた

▲もくじへ戻る

マウスポインタを当てた際に強調表示する

次は、テーブル内にマウスポインタを当てた際、対象となる行を強調表示する設定を行いたいと思います。
そうする事で、ユーザーは目的の行のデータを見やすくなります。
ユーザビリティ上、有効な方法ですので、ぜひ、設定を行って下さい。

マウスポインタを当てた際にアクションを起こす設定を行う場合は、ユーザーアクション擬似クラスである「:hover」をセレクタに追記します。
行を強調表示するので、セレクタにはtr要素を指定します。

強調表示の設定ですが、背景色を「#F60」、文字色を「#FFF」に指定します。
文字色を設定する際は、colorプロパティを使用します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
tr:hover{
	background:#F60;
	color:#FFF;
}
th{
	border-right:solid #F90 1px;
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
	border-radius:0 3px 0 0;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
tr:last-child td:first-child{
	border-radius:0 0 0 3px;
}
td:last-child{
	border-right:none;
}
tr:last-child td:last-child{
	border-radius:0 0 3px;
}

マウスポインタを当てると強調表示

▲もくじへ戻る

見出しをデザインする

見出しに余白を追加する

最後に、見出し部分であるth要素に対して、デザイン設定を行って行きます。

まずは、セルと同様に、見出しにも余白を設定します。
見出しの内側の余白設定は、paddingプロパティを使用します。

余白のサイズは、セルと同様に「10px」に設定します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
tr:hover{
	background:#F60;
	color:#FFF;
}
th{
	border-right:solid #F90 1px;
	padding:10px;
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
	border-radius:0 3px 0 0;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
tr:last-child td:first-child{
	border-radius:0 0 0 3px;
}
td:last-child{
	border-right:none;
}
tr:last-child td:last-child{
	border-radius:0 0 3px;
}

見出し内に余白が追加された

▲もくじへ戻る

見出しの背景色を設定する

続いて、見出しの背景色を設定しましょう。
見出しの部分は目立たせたいので、単色で塗るのではなく、グラデーションをかけてみようと思います。

背景にグラデーションをかける際は、backgroundプロパティの値に「:linear-gradient(開始色,終了色)」を指定します。
開始色には「#F90」、終了色には「#FC6」を設定します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
tr:hover{
	background:#F60;
	color:#FFF;
}
th{
	border-right:solid #F90 1px;
	padding:10px;
	background:linear-gradient(#F90,#FC6);
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
	border-radius:0 3px 0 0;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
tr:last-child td:first-child{
	border-radius:0 0 0 3px;
}
td:last-child{
	border-right:none;
}
tr:last-child td:last-child{
	border-radius:0 0 3px;
}

見出しの背景にグラデーションをかける

更に、見出しに立体感を付ける為、光沢を追加したいと思います。
使用するのはbox-shadowプロパティです。

本来、box-shadowプロパティはボックスの外側に影を落とす為のプロパティなのですが、「inset」と言う値を追加する事で、ボックスの内側に影を落とす事ができるようになります。
更に、影の色を明るく薄い色に指定する事で、影ではなく、光沢を表現する事ができるのです。
応用テクニックですが、覚えておくと、表現の幅が広がります。

box-shadow:横オフセット 縦オフセット ブラー スプレッド 色 inset;

作例では、横オフセットと縦オフセットは「2px」、ブラー(ぼかし)は「4px」、スプレッドは指定せず、色は「#FE9」を指定しています。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
tr:hover{
	background:#F60;
	color:#FFF;
}
th{
	border-right:solid #F90 1px;
	padding:10px;
	background:linear-gradient(#F90,#FC6);
	box-shadow:2px 2px 4px #FE9 inset;
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
	border-radius:0 3px 0 0;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
tr:last-child td:first-child{
	border-radius:0 0 0 3px;
}
td:last-child{
	border-right:none;
}
tr:last-child td:last-child{
	border-radius:0 0 3px;
}

見出しの背景に光沢を

▲もくじへ戻る

見出しの文字を設定する

これでほぼ完成ですが、見出しの列にマウスポインタを持って行くと、見出しの文字色が白に変更されてしまいます。

見出しにマウスポインタを持って行くと文字色が変化する

見出しは別に、マウスポインタを合わせる事で強調表示される必要がありません。
必要のない仕掛けは、ユーザーを混乱させてしまいます。
ですから、見出しの色を元から白色にしてしまいましょう。

既にご紹介していますが、文字色を変更する際はcolorプロパティを使用します。
白色を表すカラーコードは「#FFF」です。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
tr:hover{
	background:#F60;
	color:#FFF;
}
th{
	border-right:solid #F90 1px;
	padding:10px;
	background:linear-gradient(#F90,#FC6);
	box-shadow:2px 2px 4px #FE9 inset;
	color:#FFF;
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
	border-radius:0 3px 0 0;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
tr:last-child td:first-child{
	border-radius:0 0 0 3px;
}
td:last-child{
	border-right:none;
}
tr:last-child td:last-child{
	border-radius:0 0 3px;
}

見出しの文字色を白に

見出しの文字色を白色に変更したのは良いですが、いまいち、見出しの文字のインパクトが強くありません。
ですので、見出し文字に立体感を付け、若干、インパクトを追加したいと思います。

使用するのはtext-shadowプロパティです。

text-shadow:横オフセット 縦オフセット ブラー 色;

横オフセット、縦オフセット、ブラーの数値は、いずれも「1px」に設定します。
色は「#F90」を指定します。

caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
tr:hover{
	background:#F60;
	color:#FFF;
}
th{
	border-right:solid #F90 1px;
	padding:10px;
	background:linear-gradient(#F90,#FC6);
	box-shadow:2px 2px 4px #FE9 inset;
	color:#FFF;
	text-shadow:1px 1px 1px #F90;
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
	border-radius:0 3px 0 0;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
tr:last-child td:first-child{
	border-radius:0 0 0 3px;
}
td:last-child{
	border-right:none;
}
tr:last-child td:last-child{
	border-radius:0 0 3px;
}

見出し文字に立体感を

▲もくじへ戻る

まとめ

CSSを組み合わせる!

今回は、CSSでテーブルタグをデザインする手順についてご紹介しました。
テーブルタグの組み方や、CSSの適用方法、そして、応用テクニックについてもご紹介しましたが、いかがでしたか?

画像など使わずとも、色々なCSSを組み合わせる事で、Wordで生成されるようなデザインの表を作る事ができます。
今回学んだテクニックを応用し、あなたオリジナルのテーブルを作ってみて下さい。

今回ご紹介した内容が、あなたのホームページの見栄えを良くする手助けになれば幸いです。

▲もくじへ戻る

完成

完成例
参考書一覧表
書籍名 ジャンル 価格
Photoshopテクニック集 Photoshop 2,980円
Illustratorテクニック集 Illustrator 2,980円
Photoshop小技集 Photoshop 1,570円
早分かりInDesign InDesign 3,250円

▲もくじへ戻る

完成例のソースコード
<table summary="参考書一覧表">
  <caption>
    参考書一覧表
  </caption>
  <tr>
    <th scope="col">書籍名</th>
    <th scope="col">ジャンル</th>
    <th scope="col">価格</th>
  </tr>
  <tr>
    <td>Photoshopテクニック集</td>
    <td>Photoshop</td>
    <td>2,980円</td>
  </tr>
  <tr>
    <td>Illustratorテクニック集</td>
    <td>Illustrator</td>
    <td>2,980円</td>
  </tr>
  <tr>
    <td>Photoshop小技集</td>
    <td>Photoshop</td>
    <td>1,570円</td>
  </tr>
  <tr>
    <td>早分かりInDesign</td>
    <td>InDesign</td>
    <td>3,250円</td>
  </tr>
</table>

▲もくじへ戻る

完成例のスタイルシート
caption{
	font-weight:bold;
	margin-bottom:.5em;
}
table{
	border-spacing:0;
	border:solid #F90 2px;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;	
}
tr:nth-child(odd){
	background:#FC6;
}
tr:nth-child(even){
	background:#FE9;
}
tr:hover{
	background:#F60;
	color:#FFF;
}
th{
	border-right:solid #F90 1px;
	padding:10px;
	background:linear-gradient(#F90,#FC6);
	box-shadow:2px 2px 4px #FE9 inset;
	color:#FFF;
	text-shadow:1px 1px 1px #F90;
}
th:first-child{
	border-radius:3px 0 0;
}
th:last-child{
	border-right:none;
	border-radius:0 3px 0 0;
}
td{
	border-top:solid #F90 1px;
	border-right:solid #F90 1px;
	padding:10px
}
tr:last-child td:first-child{
	border-radius:0 0 0 3px;
}
td:last-child{
	border-right:none;
}
tr:last-child td:last-child{
	border-radius:0 0 3px;
}

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :     

ホームページ作成 Webデザイン   コメント:1

この記事に関連する記事一覧

  • いちご

    こんにちは、大変解りやすいサイトでいつも勉強させていただいています。
    こちらのテーブルのデザイニングも自分のサイトで使わさせていただいているのですが
    「なぜかテーブルのセル内側を丸める」というのだけが出来ないようです。
    CSSは正確に記述したのでクロームやIEでは正しく丸まって表示されているのですが
    ファイアフォックス(46.0.1)でのみセルが丸まらないようです。
    テーブルの淵は丸まっているので尖ったままのセルが突き出してしまうのですが
    何か対処方法はありますでしょうか?よろしければ解決方法をご教示ください。

TOPへ戻る