コピペでブログ記事に使えるTable(表)のCSSデザインサンプル

TABLE

お小遣いサイトの紹介などで、Table(表)を使うとわかりやすいですよね。Table のデザインでサイトの個性を出すのも良いと思います。

今回はそんなTable のHTMLとCSSをコピー&ペーストで使うことができるデザインテンプレートを3つご用意しました。良かったら使ってやって下さい。

Table デザイン一覧

それぞれ違う特徴のある3つのテーブルデザインの一覧です。

ご利用に関してはこちらをお読み下さい

シンプルなTable デザイン
見出し1 内容1のサンプルテキスト
見出し2 内容2のサンプルテキスト
見出し3 内容3のサンプルテキスト

このTable のソースコードをみる

モノトーンなTable デザイン
見出し1 内容1のサンプルテキスト
見出し2 内容2のサンプルテキスト
見出し3 内容3のサンプルテキスト

このTable のソースコードをみる

ポップなTable デザイン
見出し1 内容1のサンプルテキスト
見出し2 内容2のサンプルテキスト
見出し3 内容3のサンプルテキスト

このTable のソースコードをみる

シンプルなTable デザイン

HTML

<table class="simple-table">
    <caption>シンプルなTable デザイン</caption>
	<tbody>
		<tr>
			<th scope="row">見出し1</th>
			<td>内容2</td>
		</tr>
		<tr>
			<th scope="row">見出し2</th>
			<td>内容2</td>
		</tr>
		<tr>
			<th scope="row">見出し3</th>
			<td>内容3</td>
		</tr>
	</tbody>
</table>

CSS

.simple-table {
	width: 100%;
	border: none;
	border-collapse: separate;
	border-spacing: 2px;
}

.simple-table caption{
	padding: 5px;
	border-bottom: 1px solid #DDD;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}

.simple-table th {
	padding: 15px;
	border: none;
	border-left: 5px solid #C03;
	border-bottom: 1px solid #DDD;
	background: #FCF0F3;
	font-weight: normal;
	text-align:center;
	text-shadow: 0 1px #FFF;
	vertical-align: middle;
}

.simple-table td {
	padding: 15px;
	border: none;
	border-bottom: 1px solid #DDD;
	text-align: left;
	vertical-align: baseline;
}

Table デザイン一覧へ

モノトーンなTable デザイン

HTML

<table class="monotone-table">
    <caption>モノトーンなTable デザイン</caption>
	<tbody>
		<tr>
			<th scope="row">見出し1</th>
			<td>内容1のサンプルテキスト</td>
		</tr>
		<tr>
			<th scope="row">見出し2</th>
			<td>内容2のサンプルテキスト</td>
		</tr>
		<tr>
			<th scope="row">見出し3</th>
			<td>内容3のサンプルテキスト</td>
		</tr>
	</tbody>
</table>

CSS

.monotone-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	border: none;
    color: #000;
}

.monotone-table caption{
	margin-bottom: 1px;
	padding: 5px;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	border-bottom: 5px solid #000;
}

.monotone-table th {
	padding: 15px;
	background: url(■ 背景画像URL ■);
	border: none;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	text-shadow: 0 1px #FFF;
}

.monotone-table td {
	padding: 15px;
	border: none;
	border-bottom: 1px solid #000;
	text-align: left;
	vertical-align: baseline;
}

使用背景画像

使用背景画像

わかりやすいように 30 x 30 のものをご用意しましたが、実際は左上から 3 x 3 で切り抜いて使ってください。もちろんそのまま使って頂いても大丈夫です。

Table デザイン一覧へ

ポップなTable デザイン

HTML

<table class="pop-table">
    <caption>シンプルなTable デザイン</caption>
	<tbody>
		<tr>
			<th scope="row">見出し1</th>
			<td>内容2</td>
		</tr>
		<tr>
			<th scope="row">見出し2</th>
			<td>内容2</td>
		</tr>
		<tr>
			<th scope="row">見出し3</th>
			<td>内容3</td>
		</tr>
	</tbody>
</table>

CSS

.pop-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: none;
	border-bottom:5px solid #000;
	color:#000;
}

.pop-table caption{
	height: 60px;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	line-height: 52px;
	border-bottom: 5px solid #FFF;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
	background: #FC0;
}

.pop-table caption:before {
	content: '';
	display: block;
	height: 8px;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
	background-color: #000;
}

.pop-table th {
	padding: 15px;
	border: none;
	border-bottom: 2px solid #FFF;
	background: #F3B15C;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

.pop-table td {
	padding: 15px;
	border: none;
	border-bottom: 2px solid #000;
	text-align: left;
	vertical-align: baseline;
}

.pop-table tr:last-child th,
.pop-table tr:last-child td {
	border-bottom: none;
}

Table デザイン一覧へ

テーブルデザインテンプレートご利用について

お小遣いサイトやその他のブログでも、誰でもご自由に使って下さい。コピペ用のコードテキストの上でダブルクリックすると、テキストが全選択されてコピーすることができます。そのままこのページ上で編集することも可能です。

基本的なテーブルのHTMLの書き方、セルの追加方法などは「テーブル(表)のHTMLの基本的な作り方」を参考にしてみてください。

ブラウザの対応について

「シンプルなTable デザイン」、「モノトーンなTable デザイン」に関してはテーブルセルのヘッダ部分にのみ1pxのテキストシャドウを使用しています。これは、IE9以下のブラウザでは表示されないものになりますが、特に支障は無いものだと思います。

「ポップなTable デザイン」に関しては、IE9以下のブラウザでは上部の角は丸くなりません。また、IE7だと上部の黒いボーダー部分は表示されません。

Table デザイン一覧へ

ブログの記事部分にも楽しいデザインを

ブログ全体のデザインに合わせて記事の内容部分もカスタマイズしていくと、ブログの個性がでて良いと思います。

モバイルも、従来のフィーチャーフォン(ガラケー)からスマートフォンに変わってきています。今までモバイル向けにブログを作っていた方でも、外部CSSでの装飾をベースにしたブログ記事がつくりやすくなってきたと思います。

記事内でもこういったカスタマイズを上手く利用して、楽しいブログにしていきたいですね。

Pagetop
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。