画像を使わずCSSで装飾するシンプルなテーブル要素のデザイン

Publish:

Category:Design, CSS

  • Hatena Bookmark:
  • Twitter:

Webデザインを作成しているときに必ずテーブル要素のデザインを行う。

単純に線の色、テーブルヘッダの背景色を決めるくらいでサクッと終えてしまう事が多いのだけれど普通とは違うデザインにしたい。けれど背景画像や画像を駆使した特殊なデザインをするのも更新制に欠ける…どこまでシンプルなHTMLソースでデザインできるんだろう? とかぼんやりと考えたりすることがあって、現在思いつく限りのサンプルを作成してみた。

ページ内の見出し一覧

<table>(テーブル)要素の装飾サンプル

下記SampleボタンでテーブルのCSS切り替え。

サンプル1

タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル タイトル タイトル
テキスト テキスト テキスト
テキスト テキスト テキスト
タイトル タイトル タイトル
タイトル テキスト テキスト
タイトル テキスト テキスト

サンプル1 HTML変更箇所

CSSのborder-spacingプロパティがIE6/7に対応していないので、IE6/7用にHTMLの<table>にcellspacingを追加する。

<table cellspacing="1">

サンプル1 適用CSS

table {
	border: 1px solid #CCC;
	border-spacing: 1px;
}

th, td {
	border: 1px solid #999;
}

th {
	background-color: #EAEAEA;
}

thead th {
	background-color: #CCC;
}

サンプル2 適用CSS

table {
	border-collapse: collapse;
	border: 3px double #999;
}

td {
	border: 1px solid #999;
}

th  {
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	background-color: #DDD;
}

thead th {
	background-color: #BBB;
}

サンプル3 適用CSS

table {
	border-collapse: collapse;
	border: 3px double #999;
}

td {
	border: 1px dotted #999;
}

th  {
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	background-color: #DDD;
}

thead th {
	background-color: #BBB;
}

サンプル4 適用CSS

table {
	border: 1px solid #999;
	border-collapse: collapse;
}

th, td {
	border: 1px solid #999;
}

th {
	background-color: #EAEAEA;
}

thead th {
	background-color: #CCC;
}

サンプル5 適用CSS

table {
	border: 1px solid #999;
	border-collapse: collapse;
}

th {
	border: 1px solid #999;
	background-color: #EAEAEA;
}

td {
	border: 1px dotted #999;
}

thead th {
	background-color: #CCC;
}

サンプル6 HTML変更箇所

CSSのborder-spacingプロパティがIE6/7に対応していないので、IE6/7用にHTMLの<table>にcellspacingを追加する。

<table cellspacing="0">

サンプル6 適用CSS

table {
	border-left: 1px solid #999;
	border-top: 1px solid #999;
	border-spacing: 0;
}

th, td {
	border-color: #FFF #999 #999 #FFF;
	border-style: solid;
	border-width: 1px;
}

th {
	background-color: #EAEAEA;
}

thead th {
	background-color: #CCC;
}

サンプル7 HTML変更箇所

CSSのborder-spacingプロパティがIE6/7に対応していないので、IE6/7用にHTMLの<table>にcellspacingを追加する。

<table cellspacing="1">

サンプル7 適用CSS

table {
	border: 1px solid #CCC;
	border-spacing: 1px;
}

th {
	background-color: #DDD;
}

thead th {
	background-color: #BBB;
}

td {
	background-color: #F6F6F6;
}

サンプル8 適用CSS

table {
	border-collapse: collapse;
}

th, td {
	border: 1px solid #FFF;
}

tbody th {
	background-color: #DDD;
}

thead th {
	background-color: #BBB;
}

td {
	background-color: #F6F6F6;
}

サンプル9 HTML変更箇所

CSSのborder-spacingプロパティがIE6/7に対応していないので、IE6/7用にHTMLの<table>にcellspacingを追加する。

<table cellspacing="1">

サンプル9 適用CSS

table {
	background-color: #999;
	border-collapse: separate;
	border-spacing: 1px;
}

th  {
	border: 1px solid #FFF;
	background-color: #EEE;
}

thead th  {
	background-color: #CCC;
}

td {
	background-color: #FFF;
}

サンプル10 適用CSS

table {
	border-collapse: collapse;
	border: 2px solid #999;
}
th, td {
	border: 1px solid #999;
}
th  {
	background-color: #EEE;
}
thead th {
	background-color: #BBB;
}

サンプル11 適用CSS

table {
	border-collapse: collapse;
	border: 2px solid #999;
}

th, td {
	border: 1px solid #CCC;
}

th {
	border-right: 1px solid #999;
	background-color: #EEE;
}

thead th  {
	border-bottom: 1px solid #999;
	background-color: #BBB;
}

サンプル12 適用CSS

table {
	border-collapse: collapse;
	border: 2px solid #999;
}

th {
	border: 1px solid #999;
	border-right: 1px solid #999;
	background-color: #EEE;
}

thead th  {
	border-bottom: 1px solid #999;
	background-color: #BBB;
}

td {
	border: 1px dotted #999;
}

サンプル13 適用CSS

CSS3非対応ブラウザにも適応にする場合は行の一番最後のセルにclass=”last”をつける。
CSS3対応ブラウザのみの適応の場合はHTMLは変更しなくても大丈夫。

table {
	border-collapse: collapse;
	border-top: 1px solid #999;
}

th, td {
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
}

th  {
	background-color: #EEE;
}

thead th  {
	background-color: #BBB;
}

/* 行の一番最後のセルにclass="last"をつける */
.last {
	border-right: none;
}

/* CSS3の場合は上部.lastを削除してこちらをイキに
thead th:last-child ,
td:last-child {
	border-right: none;
}*/

サンプル14 適用CSS

CSS3非対応ブラウザにも適応にする場合は行の一番最後のセルにclass=”last”をつける。
CSS3対応ブラウザのみの適応の場合はHTMLは変更しなくても大丈夫。

table {
	border-collapse: collapse;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

th {
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	background-color: #EEE;
}

td {
	border-right: 1px dotted #999;
	border-bottom: 1px dotted #999;
}

thead th  {
	background-color: #BBB;
}

/* 行の一番最後のセルにclass="last"をつける */
.last {
	border-right: none;
}

/* CSS3の場合は上部.lastを削除してこちらをイキに
thead th:last-child ,
td:last-child {
	border-right: none;
}*/

サンプル15 適用CSS

CSS3非対応ブラウザにも適応にする場合は行の一番最後のセルにclass=”last”をつける。
CSS3対応ブラウザのみの適応の場合はHTMLは変更しなくても大丈夫。

table {
	border-collapse: collapse;
	border-top: 1px dotted #999;
}

th, td {
	border-right: 1px dotted #999;
	border-bottom: 1px dotted #999;
}

/* 行の一番最後のセルにclass="last"をつける */
.last {
	border-right: none;
}

/* CSS3の場合は上部.lastを削除してこちらをイキに
thead th:last-child ,
td:last-child {
	border-right: none;
}*/

サンプル16 適用CSS

table {
	border-top: 1px solid #999;
	border-collapse: collapse;
}

th, td {
	border-bottom: 1px solid #999;
}

th {
	background-color: #EEE;
}

thead th {
	background-color: #BBB;
}

サンプル17 適用CSS

table {
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	border-collapse: collapse;
}

th {
	border-bottom: 1px solid #999;
	background-color: #EEE;
}
thead th {
	background-color: #BBB;
}

td {
	border-bottom: 1px dotted #999;
}

サンプル18 適用CSS

table {
	border-top: 1px dotted #999;
	border-collapse: collapse;
}

td, th {
	border-bottom: 1px dotted #999;
}

サンプル19 適用CSS

table {
	border-collapse: collapse;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
}

th {
	border-bottom: 1px solid #CCC;
}

サンプル20 適用CSS

table {
	border-collapse: collapse;
	border-top: 1px dotted #666;
	border-bottom: 1px dotted #666;
}

th {
	border-bottom: 1px dotted #666;
}

サンプル21 適用CSS

CSS3非対応ブラウザにも適応にする場合はCSS3 PIE等を使って背景グラデーションを適応させる。

table {
	border: 1px solid #999;
	border-collapse: collapse;
}

th, td {
	border: 1px solid #999;
}

th {
	background: #EEEEEE;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEEEEE), to(#F9F9F9));
	background: -moz-linear-gradient(#EEEEEE, #F9F9F9);
	background: linear-gradient(#EEEEEE, #F9F9F9);
	/* CSS3 PIEでIEにも適用*/
	-pie-background: linear-gradient(#EEEEEE, #F9F9F9);
	behavior: url(/PIE.htc);
}

thead th {
	background: #DDDDDD;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#DDDDDD), to(#BBBBBB));
	background: -moz-linear-gradient(#DDDDDD, #BBBBBB);
	background: linear-gradient(#DDDDDD, #BBBBBB);
	/* CSS3 PIEでIEにも適用*/
	-pie-background: linear-gradient(#DDDDDD, #BBBBBB);
	behavior: url(/PIE.htc);
}

サンプル22 HTML変更箇所

CSSのborder-spacingプロパティがIE6/7に対応していないので、IE6/7用にHTMLの<table>にcellspacingを追加する。

<table cellspacing="0">

サンプル22 適用CSS

CSS3非対応ブラウザにも適応にする場合はCSS3 PIE等を使って背景グラデーションを適応させる。

table {
	border-left: 1px solid #999;
	border-top: 1px solid #999;
	border-spacing: 0;
}

th, td {
	border-color: #FFF #999 #999 #FFF;
	border-style: solid;
	border-width: 1px;
}

th {
	background: #DDDDDD;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#DDDDDD), to(#F9F9F9));
	background: -moz-linear-gradient(#DDDDDD, #F9F9F9);
	background: linear-gradient(#DDDDDD, #F9F9F9);
	/* CSS3 PIEでIEにも適用*/
	-pie-background: linear-gradient(#DDDDDD, #F9F9F9);
	behavior: url(/PIE.htc);
}

thead th {
	background: #BBBBBB;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#BBBBBB), to(#DDDDDD));
	background: -moz-linear-gradient(#BBBBBB, #DDDDDD);
	background: linear-gradient(#BBBBBB, #DDDDDD);
	/* CSS3 PIEでIEにも適用*/
	-pie-background: linear-gradient(#BBBBBB, #DDDDDD);
	behavior: url(/PIE.htc);
}

元にする<table>(テーブル)要素

下記3種類のテーブル要素を様々なCSSで装飾していく。

<!-- 1つ目のテーブル -->
<table>
	<tr>
		<th scope="row">テキスト</th>
		<td>テキスト</td>
	</tr>
	<tr>
		<th scope="row">テキスト</th>
		<td>テキスト</td>
	</tr>
	<tr>
		<th scope="row">テキスト</th>
		<td>テキスト</td>
	</tr>
</table>
<!-- 2つ目のテーブル -->
<table>
	<thead>
		<tr>
			<th scope="row">テキスト</th>
			<th scope="row">テキスト</th>
			<th scope="row">テキスト</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
		</tr>
		<tr>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
		</tr>
	</tbody>
</table>
<!-- 3つ目のテーブル -->
<table>
	<thead>
		<tr>
			<th scope="col">テキスト</th>
			<th scope="col">テキスト</th>
			<th scope="col">テキスト</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">テキスト</th>
			<td>テキスト</td>
			<td>テキスト</td>
		</tr>
		<tr>
			<th scope="row">テキスト</th>
			<td>テキスト</td>
			<td>テキスト</td>
		</tr>
	</tbody>
</table>
		

CSSとJavaScriptを使った横ストライプの実装

あらかじめセルをストライプ装飾用のクラス…例えば「odd」(奇数)「even」(偶数)等を用意し、JavaScriptで適用させる。

以下、stripeTableクラスのついたtable要素のセルを横ストライプにするスクリプト。
JavaScript版とjQuery版。

JavaScriptで記述する場合

function stripeX() {
	if (!document.getElementsByTagName || !document.createTextNode) return;
	var tables = document.getElementsByTagName('table');
	for(var i = 0; i <tables.length; i++){
		if(tables[i].className=='stripeTableX'){ 
			for (var j = 0; j < tables[i].rows.length; j++) {
				tables[i].rows[j].className = (j % 2 == 1 ? 'even' : 'odd');
			}
		}
	}
}

jQueryで記述する場合

$(function(){
	//奇数行に適用
	$('table.stripeTableX tr:nth-child(odd)').addClass('odd');
	//偶数行に適用
	$('table.stripeTableX tr:nth-child(even)').addClass('even');
});

CSS

.stripeTableX tr.even {
	background-color: #EEE;
}

実装結果

上記のスクリプト実行結果(jQuery版)。

タイトル タイトル タイトル タイトル タイトル
テキスト テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト テキスト

CSSとJavaScriptを使った縦ストライプの実装

あらかじめセルをストライプ装飾用のクラス…例えば「odd」(奇数)「even」(偶数)等を用意し、JavaScriptで適用させる。

以下、stripeTableクラスのついたtable要素のセルを縦ストライプにするスクリプト。
JavaScript版とjQuery版。

JavaScriptで記述する場合

function stripeY() {
	if (!document.getElementsByTagName || !document.createTextNode) return;
	var tables = document.getElementsByTagName('table');
	for(var i = 0; i <tables.length; i++){
		if(tables[i].className=='stripeTableY'){
			for (var j = 0; j < tables[i].rows.length; j++) {
				for (var k = 0; k < tables[i].rows[j].cells.length; k++) {
					tables[i].rows[j].cells[k].className = (k % 2 == 1 ? 'even' : 'odd');
				}
			}
		}
	}
}

jQueryで記述する場合

$(function(){
	$('table.stripeTableY tr').each(function () {
		//奇数列に適用
		$(this).find('td:odd').addClass('odd');
		//偶数行に適用
		$(this).find('td:even').addClass('even');
	});
});

CSS

.stripeTableY td.odd {
	background-color: #EEE;
}

実装結果

上記のスクリプト実行結果(jQuery版)。

タイトル タイトル タイトル タイトル タイトル
タイトル テキスト テキスト テキスト テキスト
タイトル テキスト テキスト テキスト テキスト
タイトル テキスト テキスト テキスト テキスト
タイトル テキスト テキスト テキスト テキスト

Post Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Return to page top