CSSで作るテーブルデザイン&サンプルコード

この記事が良ければ、ぜひシェアお願いします

CSSで作るテーブルのデザインとサンプルコードを4つご紹介したいと思います。

元となるHTMLタグはこちらとなります。

<table class="css-table-ex1" width="500px">
<caption>テーブルデザインサンプル</caption>
<thead>
	<tr>
		<th scope="col">TabelSample</th>
        <th scope="col">column1</th>
        <th scope="col">column2</th>
        <th scope="col">column3</th>
        <th scope="col">column4</th>
	</tr>
</thead>
<tbody>
	<tr>
		<th scope="row">row1</th>
		<td>xxx</td>
		<td>xxx</td>
		<td>xxx</td>
		<td>xxx</td>
	</tr>
    <tr class="odd">
		<th scope="row">row2</th>
			<td>xxx</td>
			<td>xxx</td>
			<td>xxx</td>
			<td>xxx</td></tr><tr>
		<th scope="row">row3</th>
		<td>xxx</td>
			<td>xxx</td>
			<td>xxx</td>
			<td>xxx</td>
	</tr>
    <tr class="odd">
		<th scope="row">row4</th>
			<td>xxx</td>
		    <td>xxx</td>
		    <td>xxx</td>
		    <td>xxx</td>
		</tr>
</tbody>
<tfoot>
	<tr>
		<th scope="row">tfoot</th>
        	<td colspan="4">xxx</td>
	</tr>
</tfoot>
</table>

テーブルタグのCSSデザイン&サンプルコード

CSSでデザインしたテーブル表とCSSコードを例ごとご紹介します。

サンプル1

テーブルデザインサンプル
TabelSample column1 column2 column3 column4
row1 xxx xxx xxx xxx
row2 xxx xxx xxx xxx
row3 xxx xxx xxx xxx
row4 xxx xxx xxx xxx
tfoot xxx
#post .css-table-ex1 {
  border: 0px solid black;
  border-spacing: 0px;
}

#post .css-table-ex1 thead tr{
  font-family: Arial, monospace;
  font-size: 14px;
}

#post .css-table-ex1 thead tr th{
  border-bottom: 2px solid black;
  border-top: 1px solid black;
  margin: 0px;
  padding: 2px;
  background-color: #cccccc;
}

#post .css-table-ex1 tr {
  font-family: arial, monospace;
  color: black;
  font-size:12px;
  background-color: white;
}

#post .css-table-ex1 tr.odd {
  background-color: #AAAAAA;
}

#post .css-table-ex1 tr td, th{
  border-bottom: 1px solid black;
  padding: 2px;
}

#post .css-table-ex1 a:link{
  font-family:arial, monospace;
  text-decoration: none;
  color: teal;
}

#post .css-table-ex1 a:hover{
  text-decoration: underline;
}

#post .css-table-ex1 a:visited{
  color:black;
  text-decoration: none;
}

サンプル2

テーブルデザインサンプル
TabelSample column1 column2 column3 column4
tfoot xxx
row1 xxx xxx xxx xxx
row2 xxx xxx xxx xxx
row3 xxx xxx xxx xxx
row4 xxx xxx xxx xxx
#post .css-table-ex2 table {
	border-collapse: collapse;
	border-spacing: 1px;
	border-left: 1px solid #1F2A34;
	border-right: 1px solid #1F2A34;
}
#post .css-table-ex2 thead th{
	font-size: 14px;
	color: #000;
	height: 30px;
	text-align: center;
	border-top: 5px solid black;
	border-bottom: 5px solid black;
	border-left: 1px solid #1F2A34;
	border-right: 1px solid #1F2A34;
}
#post .css-table-ex2 tbody td{
	font-size: 10px;
	background: #2d3134;
	color: #fff;
	border: 1px solid #373B3E;
	padding-left: 3px;
	height: 40px;
}
#post .css-table-ex2 tbody td a:link{
	font-size: 12px;
	color:#FF6600;
	font-weight: bold;
	text-decoration: none;
}

#post .css-table-ex2 tbody td a:hover{
	font-size: 12px;
	color:#FF6600;
	font-weight: bold;
	text-decoration: underline;
}

#post .css-table-ex2 tbody td a:visited{
	font-size: 12px;
	color:#FF6600;
	font-weight: bold;
	text-decoration: line-through;
}
#post .css-table-ex2 tbody th{
	background: #373B3E;
	color: #080808;
	text-align: left;
	padding-left: 4px;
	border: 1px solid #2d3134;
	width: 120px;
}
#post .css-table-ex2 tbody th a:link{
	color: #fff;
	font-size: 12px;
	font-weight: bolder;
	text-decoration: none;
}
#post .css-table-ex2 tbody th a:hover{
	font-size: 13px;
	color: #fff;
	font-weight: bolder;

}
#post .css-table-ex2 tbody th a:visited{
	text-decoration: line-through;
	font-size: 12px;
	color: #fff;
	font-weight: bolder;

}
#post .css-table-ex2 tbody tr:hover{
	background: #333;
}
#post .css-table-ex2 tbody a {
	padding-top: 22px;
	font-size: 12px;
	color:#FF6600;
	text-align: center;
}
#post .css-table-ex2 tbody a:hover{
	text-decoration: underline;
	font-size: 12px;
	color:#FF6600;
}
#post .css-table-ex2 tbody a:visited{
	text-decoration: line-through;
	font-size: 12px;
	color:#FF6600;
}
#post .css-table-ex2 tfoot{
	background: #1F2A34;
	color: #fff;
	font-size: 18px;
	text-align: center;
	border-left: 1px solid #1F2A34;
	border-right: 1px solid #1F2A34;
}
#post .css-table-ex2 tfoot td{
	font-style:italic;
}
#post .css-table-ex2 table caption{
	background: #1F2A34;
	color: #fff;
	text-align: center;
	font-size: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-left: 1px solid #1F2A34;
	border-right: 1px solid #1F2A34;
}

サンプル3

テーブルデザインサンプル
TabelSample column1 column2 column3 column4
row1 xxx xxx xxx xxx
row2 xxx xxx xxx xxx
row3 xxx xxx xxx xxx
row4 xxx xxx xxx xxx
tfoot xxx
#post .css-table-ex3 table {
	font-size:0.8em;
	line-height:1.4em;
	color: #5B0006;
	background-color:#FFEDEF;
	width:100%;
	border-collapse:collapse;
}
#post .css-table-ex3 caption{
	color:#F8EFF0;
	background-color: #8b0000;
	font-size:25px;
	background-repeat:repeat-x;
	background-position:0 0;
	padding: 10px 10px 7px 5px;
	text-align:right;
}
#post .css-table-ex3 tfoot th,
#post .css-table-ex3 tfoot td {
	color:#F8EFF0;
	background-color: 8b0000;
	font-size:25px;
	background-repeat:repeat-x;
	background-position:0 -2px;
}
#post .css-table-ex3 tfoot{
	text-align:right;
	background-color: #b22222;
}
#post .css-table-ex3 tfoot td {
	padding:7px 10px 10px 5px;
}
#post .css-table-ex3 tfoot th {
	padding:7px 2px 10px 2px;
}

#post .css-table-ex3 thead th,
#post .css-table-ex3 tbody th {
	background-color:#FAE5E7;
	color: #5B0006;
	padding:7px;
	text-align:left;
}
#post .css-table-ex3 tbody tr:hover,
#post .css-table-ex3 tbody tr th:hover {
    background-color:#FDF9F9;
    color:#000;
}
#post .css-table-ex3 td {
	padding:7px;
}

#post .css-table-ex3 thead th {
	border-bottom:1px dotted  #908F8B;
}
#post .css-table-ex3 thead th:first-child {
	border:none;
}
#post .css-table-ex3 tbody th {
	border-right:1px dotted #908F8B;
}
#post .css-table-ex3 table a {
	width:100%;
	display:block;
	color: #5B0006;
	background-color:inherit;
	line-height:1.5em;
}
#post .css-table-ex3 table a:visited {
	color: #908F8B;
	background-color:inherit;
}
#post .css-table-ex3 tbody td+td+td+td a:before{
	 content:"21D3";
	 text-align:right;
}
#post .css-table-ex3 table a:hover {
	color: #C9020F;
	background-color:inherit;
}

サンプル4

テーブルデザインサンプル
TabelSample column1 column2 column3 column4
row1 xxx xxx xxx xxx
row2 xxx xxx xxx xxx
row3 xxx xxx xxx xxx
row4 xxx xxx xxx xxx
tfoot xxx
#post .css-table-ex4 table {
	border-collapse:separate;
	border-spacing:0;
	margin:0 0 1em;
	color:#000;
}
#post .css-table-ex4 caption {
	font-weight:normal;
	font-size:1.4em;
	text-align:left;
	margin:0;
	padding:0.5em 0.25em;
}
#post .css-table-ex4 table a {
	color:#523A0B;
	text-decoration:none;
	border-bottom:1px dotted;
}
#post .css-table-ex4 table a:visited {
	color:#444;
	font-weight:normal;
}
#post .css-table-ex4 table a:visited:after {
	content:"�0A0221A";
}
#post .css-table-ex4 table a:hover {
	border-bottom-style:solid;
}
#post .css-table-ex4 thead th,
#post .css-table-ex4 thead td,
#post .css-table-ex4 tfoot th,
#post .css-table-ex4 tfoot td {
	border:1px solid #523A0B;
	border-width:1px 0;
	background:#EBE5D9;
}
#post .css-table-ex4 th {
	font-weight:bold;
	line-height:normal;
	padding:0.25em 0.5em;
	text-align:left;
}
#post .css-table-ex4 tbody th,
#post .css-table-ex4 td {
	padding:0.25em 0.5em;
	text-align:left;
	vertical-align:top;
}
#post .css-table-ex4 tbody th {
	font-weight:normal;
	white-space:nowrap;
}
#post .css-table-ex4 tbody th a:link,
#post .css-table-ex4 tbody th a:visited {
	font-weight:bold;
}
#post .css-table-ex4 tbody td,
#post .css-table-ex4 tbody th {
	border:1px solid #fff;
	border-width:1px 0;
}
#post .css-table-ex4 tbody tr.odd th,
#post .css-table-ex4 tbody tr.odd td {
	border-color:#EBE5D9;
	background:#F7F4EE;
}
#post .css-table-ex4 tbody tr:hover td,
#post .css-table-ex4 tbody tr:hover th {
	background:#ffffee;
	border-color:#523A0B;
}

ちょっと長くて重くなってしまいましたが、参考にしていただければと思います。CSSクラスセレクタはご利用のスタイル定義に合わせて変更してもらえればと思います。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク