1月 302014
 

理系出身・・・というわけではありませんが、本ブログでは。投稿記事の中で「表」を多用しています。何かと言うと「表」にまとめたいと考えてしまう。

本ブログで適用している「Suffusion」というテーマ・・・あまりにも「表」に関してシンプルな設定しかありません。つまり「table 要素」に関してのスタイル設定がほとんどないに等しい。

そこで、現在利用している「Suffusion」の「子テーマ」に対して、table 関連のスタイルを設定しました。適用された表が以下のサンプルです。

サンプル(表のタイトル)
サンプル(ヘッダー1) サンプル(ヘッダー2) サンプル(ヘッダー3)
サンプル サンプル サンプル
サンプル(データ1) サンプル(データ2) サンプル(データ3)

上記を達成するためのスタイルは以下の通りです。特に何かを工夫したわけではありませんから、どなたでも理解できると思いますが。とりあえずは、このスタイルで行こうかな。

.entry table {
	width: auto; /* 小さい Table 小さく。余計な余白を設定しない。 */
	border-collapse: collapse;
	border: 1px solid #8da5ed;
	margin: 5px auto; } /* auto で投稿記事やページで中央に table を配置 */
.entry caption {
	font-weight: bold; }
.entry th { /* table のヘッダー設定 */
	background: #a0b4f0;
	font-weight: bold;
	text-align: center;
	padding: 6px;
	border: 1px solid #8da5ed; }
.entry td { /* 通常のセルの設定 */
	padding: 5px;
	border: 1px solid #8da5ed; }
.entry td.data { /* セルがデータの場合の設定 */
	padding: 2px;
	text-align: center; }

もうちょっと何か良いアイディアは無いかな・・・ネットももう少々探してみますが、実際には結構満足していたりします。


 返信する

(必須)

(必須:アドレスは公開されることはありません)