CSSでつくる！！実用性のある綺麗にデザインされたテーブルの数々

2012.08.16 Category:CSS Tag:CSS3

テーブルデザインで個性というのもなんだかな感じがしますが、綺麗に見やすいテーブルというのは大事だと思います。

そこで、テーブルデザインを求めていろいろと見ていたのですが、CSS Table Gallery というサイトを発見したのですが、これひたすらテーブルデザインがずらずらっとでてくるという素晴らしいサイトです。

Design Nameの列がテーブルデザインの名前となっていて、お好きなところをクリックしてもらうとデザインが変わるのがわかるかと思います。

いいなと思うデザインがありましたら、Downloadよりダウンロードすることが可能です。

その中から気になるものをご紹介したいと思います。

CSS Table Gallery - mintgreen

色合いがとても綺麗で目を引きました。

CSS Table Gallery - mintgreen

対応ブラウザ Google Chrome / Safari / Firefox / Opera / InternetExplorer 10

DEMO

/**************************************************
 * Data Tables and Cascading Style Sheets Gallery *
 *  http://icant.co.uk/csstablegallery/index.php  *
 *  --------------------------------------------  *
 * Author: Taimar Teetlok > http://taimar.pri.ee/ *
 **************************************************/

table {
	width:93%;
	color:#212424;
	margin:0 0 1em 0;
	font:80%/150% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Lucida, Helvetica, sans-serif;
	border-spacing:0;
	border-collapse:collapse;
	margin: 20px 0 0 30px;
}
th, td {
	padding:1em 0;
}
caption {
	width:95%;
	height:39px;
	font-size:0;
	line-height:0;
	text-indent:-5000em;
	background: url("img/caption.gif") no-repeat 99% 0;
}
caption:hover {
	background-position:99% 100%;
}
/* HEADER */
thead {
	background:#524123;
}
thead tr th {
	text-align:center;
	color:#faf7d4;
	border-bottom:3px solid #A5D768;
}
/* FOOTER */
tfoot {
	color:#fff;
	background:#524123;
}
tfoot tr th, tfoot tr td {
	padding:.2em .6em;
	border-top:2px solid #a5d768;
}
tfoot tr th {
}
tfoot tr td {
	text-align:right;
}
/* BODY */
tbody tr td {
	background:#ddf0bd url("img/bg_cell.gif") no-repeat top left;
}
tbody tr.odd td {
	background-color:#d0eba6;
}
tbody tr td:hover, tbody tr.odd td:hover {
	background:#c5e894;
}
tbody tr th, tbody tr td {
	padding:5px;
	border:1px solid #a6ce39;
}
tbody tr th {
	padding-right:1em;
	text-align:right;
	font-weight:normal;
	background:#c5e894 url("img/bg_cell.gif") no-repeat top left;
	text-transform:uppercase;
}
tbody tr th:hover {
	background:#d0eba6;
}
table a[href*="taimar.pri.ee"] {
	float:left;
	width:64px;
	height:64px;
	font-size:0;
	text-decoration:none;
	background:transparent url("http://taimar.pri.ee/examples/table-design/taimar.gif") no-repeat 0 0;
}
table a[title^="Download"] {
	float:none;
	width:auto;
	height:auto;
	font-size:100%;
	background:none;
}
/* LINKS */
table a {
	color:#854400!important;
	text-decoration:none;
}
table a:visited {
	text-decoration:line-through;
}
table a:hover {
	text-decoration:underline;
}

100

101

102

103

/**************************************************

* Data Tables and Cascading Style Sheets Gallery *

* http://icant.co.uk/csstablegallery/index.php *

* -------------------------------------------- *

* Author: Taimar Teetlok > http://taimar.pri.ee/ *

**************************************************/

table {

width:93%;

color:#212424;

margin:0 0 1em 0;

font:80%/150% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Lucida, Helvetica, sans-serif;

border-spacing:0;

border-collapse:collapse;

margin: 20px 0 0 30px;

}

th, td {

padding:1em 0;

}

caption {

width:95%;

height:39px;

font-size:0;

line-height:0;

text-indent:-5000em;

background: url("img/caption.gif") no-repeat 99% 0;

}

caption:hover {

background-position:99% 100%;

}

/* HEADER */

thead {

background:#524123;

}

thead tr th {

text-align:center;

color:#faf7d4;

border-bottom:3px solid #A5D768;

}

/* FOOTER */

tfoot {

color:#fff;

background:#524123;

}

tfoot tr th, tfoot tr td {

padding:.2em .6em;

border-top:2px solid #a5d768;

}

tfoot tr th {

}

tfoot tr td {

text-align:right;

}

/* BODY */

tbody tr td {

background:#ddf0bd url("img/bg_cell.gif") no-repeat top left;

}

tbody tr.odd td {

background-color:#d0eba6;

}

tbody tr td:hover, tbody tr.odd td:hover {

background:#c5e894;

}

tbody tr th, tbody tr td {

padding:5px;

border:1px solid #a6ce39;

}

tbody tr th {

padding-right:1em;

text-align:right;

font-weight:normal;

background:#c5e894 url("img/bg_cell.gif") no-repeat top left;

text-transform:uppercase;

}

tbody tr th:hover {

background:#d0eba6;

}

table a[href*="taimar.pri.ee"] {

float:left;

width:64px;

height:64px;

font-size:0;

text-decoration:none;

background:transparent url("http://taimar.pri.ee/examples/table-design/taimar.gif") no-repeat 0 0;

}

table a[title^="Download"] {

float:none;

width:auto;

height:auto;

font-size:100%;

background:none;

}

/* LINKS */

table a {

color:#854400!important;

text-decoration:none;

}

table a:visited {

text-decoration:line-through;

}

table a:hover {

text-decoration:underline;

}

<div id="itsthetable">
    <table summary="Submitted table designs">
        <caption>Table designs</caption>
        <thead>
            <tr>
                <th scope="col">Design Name</th>
                <th scope="col">Author</th>
                <th scope="col">Country</th>
                <th scope="col">Comment</th>
                <th scope="col">Download</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th scope="row">Total</th>
                <td colspan="4">5 designs</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row" id="r5"><a href="#">Design Name5</a></th>
                <td><a href="">Link</a></td>
                <td>User5</td>
                <td>Description.</td>
                <td><a href="#">Link</a></td>
            </tr>
            <tr class="odd">
                <th scope="row" id="r4"><a href="#">Design Name4</a></th>
                <td><a href="">Link</a></td>
                <td>User4</td>
                <td>Description.</td>
                <td><a href="#">Link</a></td>
            </tr>
            <tr>
                <th scope="row" id="r3"><a href="#">Design Name3</a></th>
                <td><a href="">Link</a></td>
                <td>User3</td>
                <td>Description.</td>
                <td><a href="#">Link</a></td>
            </tr>
            <tr class="odd">
                <th scope="row" id="r2"><a href="#">Design Name2</a></th>
                <td><a href="">Link</a></td>
                <td>User2</td>
                <td>Description.</td>
                <td><a href="#">Link</a></td>
            </tr>
            <tr>
                <th scope="row" id="r1"><a href="#">Design Name1</a></th>
                <td><a href="">Link</a></td>
                <td>User1</td>
                <td>Description.</td>
                <td><a href="#">Link</a></td>
            </tr>
        </tbody>
    </table>
</div>

<caption>Table designs</caption>

<thead>

<tr>

<th scope="col">Design Name</th>

<th scope="col">Author</th>

<th scope="col">Country</th>

<th scope="col">Comment</th>

<th scope="col">Download</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope="row">Total</th>

<td colspan="4">5 designs</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="row" id="r5"><a href="#">Design Name5</a></th>

<td>Description.</td>

</tr>

<th scope="row" id="r4"><a href="#">Design Name4</a></th>

<td>Description.</td>

</tr>

<tr>

<th scope="row" id="r3"><a href="#">Design Name3</a></th>

<td>Description.</td>

</tr>

<th scope="row" id="r2"><a href="#">Design Name2</a></th>

<td>Description.</td>

</tr>

<tr>

<th scope="row" id="r1"><a href="#">Design Name1</a></th>

<td>Description.</td>

</tr>

</tbody>

</table>

</div>

A CSS styled table

こちらは、CSS Table Galleryからのご紹介ではないのですが可愛らしいなと思ってメモしておいたのを引っ張り出してきました。

A CSS styled table

対応ブラウザ Google Chrome / Safari / Firefox / Opera / InternetExplorer 10

DEMO

#mytable {
    width:700px;
    margin: 50px 0 0 40px; padding:0;
    border:0;
    border-spacing:0;
    border-collapse:collapse;
}
caption {
    padding:0 0 5px 0;
    font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align:right;
}
th {
    font:bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color:#4f6b72;
    border:1px solid #c1dad7;
    letter-spacing:2px;
    text-transform:uppercase;
    text-align:left;
    padding:6px 6px 6px 12px;
    background:#cae8ea url("img/bg_header.jpg") no-repeat;
}
th.nobg {
    border-top:0;
    border-left:0;
    background:none;
}
td {
    border:1px solid #c1dad7;
    background:#fff;
    padding:6px 6px 6px 12px;
    color:#4f6b72;
}
td.alt {
    background:#F5FAFA;
    color:#797268;
}
th.spec {
    background:#fff url("img/bullet1.gif") no-repeat;
    font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
    background:#f5fafa url("img/bullet2.gif") no-repeat;
    font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color:#797268;
}

#mytable {

width:700px;

margin: 50px 0 0 40px; padding:0;

border:0;

border-spacing:0;

border-collapse:collapse;

}

caption {

padding:0 0 5px 0;

font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

text-align:right;

}

th {

font:bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color:#4f6b72;

border:1px solid #c1dad7;

letter-spacing:2px;

text-transform:uppercase;

text-align:left;

padding:6px 6px 6px 12px;

background:#cae8ea url("img/bg_header.jpg") no-repeat;

}

th.nobg {

border-top:0;

border-left:0;

background:none;

}

td {

border:1px solid #c1dad7;

background:#fff;

padding:6px 6px 6px 12px;

color:#4f6b72;

}

td.alt {

background:#F5FAFA;

color:#797268;

}

th.spec {

background:#fff url("img/bullet1.gif") no-repeat;

font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

}

th.specalt {

background:#f5fafa url("img/bullet2.gif") no-repeat;

font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color:#797268;

}

<table id="mytable">
  <caption>Table 1:Power Mac G5 tech specs </caption>
  <tr>
    <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
    <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
    <th scope="col" abbr="Dual 2">Dual 2GHz</th>
    <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
  </tr>
  <tr>
    <th scope="row" abbr="Model" class="spec">Model</th>
    <td>M9454LL/A</td>
    <td>M9455LL/A</td>
    <td>M9457LL/A</td>
  </tr>
  <tr>
    <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
    <td class="alt">Dual 1.8GHz PowerPC G5</td>
    <td class="alt">Dual 2GHz PowerPC G5</td>
    <td class="alt">Dual 2.5GHz PowerPC G5</td>
  </tr>
  <tr>
    <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
    <td>900MHz per processor</td>
    <td>1GHz per processor</td>
    <td>1.25GHz per processor</td>
  </tr>
  <tr>
    <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
  </tr>
</table>

<caption>Table 1:Power Mac G5 tech specs </caption>

<tr>

<th scope="col" abbr="Configurations" class="nobg">Configurations</th>

</tr>

<tr>

<th scope="row" abbr="Model" class="spec">Model</th>

</tr>

<tr>

<th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>

<td class="alt">Dual 1.8GHz PowerPC G5</td>

<td class="alt">Dual 2GHz PowerPC G5</td>

<td class="alt">Dual 2.5GHz PowerPC G5</td>

</tr>

<tr>

<th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>

<td>900MHz per processor</td>

<td>1GHz per processor</td>

<td>1.25GHz per processor</td>

</tr>

<tr>

<th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>

<td class="alt">512K per processor</td>

</tr>

</table>

セルが影付きのテーブル

ものすごくシンプルなのですが、少し立体的にみえるテーブルです。

対応ブラウザ Google Chrome / Safari / Firefox / Opera / InternetExplorer 10

DEMO

table.table021 {
  margin-top: 0.2em;
  margin-bottom: 5em;
  margin-left: -60px;
  width: 570px;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 100%;
}

table.table021 caption {
  margin-top: 1em;
  text-align: right;
}

table.table021 th,
table.table021 td {
  padding: 4px 6px;
}

table.table021 th {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: #FFD9F3;
  text-align: center;
  white-space: nowrap;
  font-size: 92%;
}

table.table021 {

margin-top: 0.2em;

margin-bottom: 5em;

margin-left: -60px;

width: 570px;

border-collapse: separate;

border-spacing: 2px;

font-size: 100%;

}

table.table021 caption {

margin-top: 1em;

text-align: right;

}

table.table021 th,

table.table021 td {

padding: 4px 6px;

}

table.table021 th {

border-bottom: solid 1px #B2B2B2;

border-right: solid 1px #B2B2B2;

background: #FFD9F3;

text-align: center;

white-space: nowrap;

font-size: 92%;

}

  <table class="table021">
  <caption>アクセス解析月ごとの集計</caption>
  <tr>
    <th scope="col">年月</th>
    <th scope="col">セッション</th>
    <th scope="col">ページビュー</th>
    <th scope="col">新規セッション率</th>
    <th scope="col">平均滞在時間</th>
    <th scope="col">コンバージョン数</th>
  </tr>
  <tr>
    <td>2012-01</td>
    <td>5624</td>
    <td>8021</td>
    <td>75.2%</td>
    <td>00:42</td>
    <td>4</td>
  </tr>
  <tr>
    <td>2012-02</td>
    <td>5021</td>
    <td>7533</td>
    <td>70.1%</td>
    <td>01:06</td>
    <td>5</td>
  </tr>
  <tr>
    <td>2012-03</td>
    <td>5847</td>
    <td>9105</td>
    <td>81.3%</td>
    <td>00:36</td>
    <td>2</td>
  </tr>
  <tr>
    <td>2012-04</td>
    <td>6185</td>
    <td>10230</td>
    <td>84.9%</td>
    <td>00:53</td>
    <td>6</td>
  </tr>
  <tr>
    <td>2012-05</td>
    <td>5133</td>
    <td>7688</td>
    <td>76.0%</td>
    <td>01:15</td>
    <td>5</td>
  </tr>
</table>