htmlで作成した表のためのスタイルを作成する

新規作成日 2016-12-10

最終更新日 2016-12-10

ホームページ上での表の作成は、htmlの作成が面倒なだけでなく、cssを使用したデザインの調整も面倒です。ただ、作成したページは、見やすくなるので、積極的に使いたいものです。簡単な表を例に、きっちり、cssでのデザインの作成方法を確認しておきたいと思います。

スタイルの配置場所

表のスタイルは、複数のページで共有することはないので、htmlファイル内のstylタグを配置し、その中に記述します。

何度も使用し、基本的な表のスタイルが決まったら、cssファイルに反映させましょう。しかし、細かいスタイルの指定は、 htmlファイル内のstylタグに記述します。

stylタグは、headタグ内に記述します。

cssを作成する

枠の表示や文字装飾が無いと残念なので、cssを使用して装飾をしていきます。

cssは、1度作成し、自分のcssファイルを作成し、その中に格納しておけば、違うデザインのWebテンプレートに変更するまでは、意識せずに利用することができます。

※　Bootstrapなどのcssフレームワークを利用するのも1つの手段ですが、ドキュメントを探して理解する手間とどちらを選択するかは、悩ましいところです。

動作確認に使用するhtml

<table class="table_styl01" >
    <caption>タイトル</caption>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
        <th>見出し2</th>
    </tr>
    <tr>
        <td>項目 11</td>
        <td>項目 21</td>
        <td>項目 31</td>
    </tr>
    <tr>
        <td>項目 12</td>
        <td>項目 22</td>
        <td>項目 32</td>
    </tr>
</table>

※tableタグのクラス名は、デザインごとに変更します。

ファイヤフォックスとクロームの表示の違い

なぜか、ファイヤフォックスとクロームで表示がことなります。

Chrome54.0.2840.99%20m%20(64-bit)

Firefox_52.0a2(2016-12-09)(32bit)

htmlファイル内のheadタグ内にscriptタグを設置し、その中にスタイルを記述する

cssの挙動を確認していく記事を書く場合は、html内に、cssを記述するhtmlファイル内に、スタイルを記述する方法を使用するとhtml内にすべてが記述できるので、管理が楽になります。

headタグ内のscriptタグの中に記述することが可能です。

文字色と背景色を指定する

表のデザインを高度に追求しない場合、見出し(thタグ)に、濃色の背景色を指定し、淡色の文字色を指定します。項目(tdタグ)には、見出しの背景色と同系統の淡色の背景色を指定します。

table.table_styl01 th{
  color: #fff;
  background: RoyalBlue;
	}
table.table_styl01 td{
    background: 	AliceBlue;
	}

タイトル
見出し1	見出し2	見出し2
項目 11	項目 21	項目 31
項目 12	項目 22	項目 32

好みの組み合わせをいくつか探し出し、class名を指定し、cssファイルに記入しておきます。

文字のスタイルを変更する

文字の配置を変更し、文字のスタイルを変更します。

table.table_styl02 caption{ 
	font-weight: bold;
	}
table.table_styl02 th{
  color: #fff;
  background: RoyalBlue;
  text-align: center;
	}
table.table_styl02 td{
    background: 	AliceBlue;
    text-align: center;
    font-weight: bold;
	}

タイトル
見出し1	見出し2	見出し2
項目 11	項目 21	項目 31
項目 12	項目 22	項目 32

表の枠線の色と太さを指定する

table.table_styl03 caption{ 
	font-weight: bold;
	}
table.table_styl03 th{
  	color: #fff;
  	background: RoyalBlue;
  	text-align: center;
	border:1px AliceBlue solid;
	}
table.table_styl03 td{
    background: AliceBlue;
    text-align: center;
    font-weight: bold;
	border:1px RoyalBlue solid;
	}

タイトル
見出し1	見出し2	見出し2
項目 11	項目 21	項目 31
項目 12	項目 22	項目 32

枠線のガタガタを修正する

背景色の濃いところは、淡色の線、背景色の薄いところは濃色の線を引いているので、一番外側の周囲の枠は、線の幅の分だけ、ガタガタに見えます。

そこで、上、左の線の色を変更します。そして、一番右の要素の右側の線の色を疑似クラス「:last-child」を使用して変えます。

table.table_styl04 caption{ 
	font-weight: bold;
	}
table.table_styl04 th{
  	color: #fff;
  	background: RoyalBlue;
  	text-align: center;
	border:1px AliceBlue solid;
    border-left:1px RoyalBlue solid;
    border-top:1px  RoyalBlue solid;
	}
table.table_styl04 th:last-child{
    border-right: 1px  RoyalBlue solid;
}
table.table_styl04 td{
    background: 	AliceBlue;
    text-align: center;
    font-weight: bold;
	border:1px RoyalBlue solid;
 	}

タイトル
見出し1	見出し2	見出し2
項目 11	項目 21	項目 31
項目 12	項目 22	項目 32

幅を変更します。

width指定を追加しただけです。

table.table_styl05 caption{ 
  font-weight: bold;
  }
table.table_styl05 th{
  color: #fff;
  background: RoyalBlue;
  text-align: center;
  border:1px AliceBlue solid;
  border-left:1px RoyalBlue solid;
  border-top:1px  RoyalBlue solid;
  width: 170px;
  }
table.table_styl05:last-child th{
  border-right: 1px  RoyalBlue solid;
}
table.table_styl05 td{
  background: AliceBlue;
  text-align: center;
  font-weight: bold;
  border:1px RoyalBlue solid;
  }

タイトル
見出し1	見出し2	見出し2
項目 11	項目 21	項目 31
項目 12	項目 22	項目 32

ほかのサイトで紹介されているデザインを参考にしましょう。

table作成時に参考になるサイト(外部サイト)

ページトップへ