HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点

地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！

そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。

【こちらもおすすめ】
☞ 均等割り付けで美しい表デザインを実現するjQueryを作ってみました。

table作成時に参考になるサイト

本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。

table専門参考ページ5選

table専門の参考ページを5つほど選んでみました。

• CSS3を使って美しく装飾されたテーブルの作り方｜Webpark

  http://weboook.blog22.fc2.com/blog-entry-329.html

  CSS3でのtableの作り方を、見た目とソースから解説してあります。

• Tableのデザインまとめ | DesignWalker

  http://www.designwalker.com/2009/01/table.html

  日本はもちろん海外のtable専門サイトなども紹介されていて、見応え十分です。

• テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScript Room

  http://phpjavascriptroom.com/?t=css&p=cssdesign_table

  使いやすいtableのサンプル画像と設置用のソースがあってとても親切です。

• TABLE（テーブル）のデザイン・CSSの参考になるサイト・記事をまとめてみた[シンプルからかっこいい系] ・ 気になる備忘録

  http://peacepopo.net/blog-entry-122.html

  CSSテクニック系・角丸テーブル系・海外系など、カテゴライズされていて便利です。

• レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

  http://design-spice.com/2012/11/01/responsive-table/

  この時代だからこそ、押さえておきたい！
  タブレットやスマートフォンなどに対応する技が紹介されています。

実際のコーディング例

さて、ここからは実際に仕事としてコーディングしたtableを、前述した記事で紹介されていたように、HTML5＋CSS3でアレンジしてご紹介します。

CSSだけで実現できるtable

実現にあたって注意が必要なものについては解説を加えます。

フラットデザイン向け三角矢印つきtable



thの:after擬似要素に、吹き出しでよく使うCSSを使います。
ただし、FireFox（以下FF）ではtable系のdisplay要素にはabsoluteが使えません。そこで一工夫必要です。
なお、IEでは縦の中央に三角が出てこないので、もし上手くできる方法があったらコメント欄などで教えてください。

CSS

table.company {
	width: 500px;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 0px 15px;
	font-size: 12px;
}

table.company th,
table.company td {
	padding: 10px;
}

table.company th {
	background: #295890;
	vertical-align: middle;
	text-align: left;
	width: 100px;
	overflow: visible;
	position: relative;
	color: #fff;
	font-weight: normal;
	font-size: 15px;
}

table.company th:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #295890;
	border-width: 10px;
	margin-top: -10px;
}
/* firefox */
@-moz-document url-prefix() { 
	table.company th::after {
		float: right;
		padding: 0;
		left: 30px;
		top: 10px;
		content: " ";
		height: 0;
		width: 0;
		position: relative;
		pointer-events: none;
		border: 10px solid transparent;
		border-left: #295890 10px solid;
		margin-top: -10px;
	}
}

table.company td {
	background: #f8f8f8;
	width: 360px;
	padding-left: 20px;
}

HTML

<table class="company">
	<tbody>
		<tr>
			<th class="arrow_box">会社名</div></th>
			<td>株式会社LIG</td>
		</tr>
		<tr>
			<th class="arrow_box">所在地</th>
			<td>
				〒110-0015<br>
				東京都台東区東上野2-18-7 共同ビル 10F
			</td>
		</tr>
		<tr>
			<th>TEL</th>
			<td>
				03-6240-1253
			</td>
		</tr>
		<tr>
			<th>事業内容</th>
			<td>
				ウェブサイト制作事業<br>
				（企画、マーケティング、デザイン制作、システム開発）<br>
				自社メディア運用事業<br>
				プロモーション・コンテンツ企画制作事業
			</td>
		</tr>
	</tbody>
</table>

次のページ
次はタイル調のtableです。