テーブル

テーブルのコピペで使えるFontAwesomeサンプル集です。CSSで特定のセルにアイコンを付けることができテーブルの見栄えをよくしたり入力の手間を軽減することができます。

列ヘッダーにアイコン

SAMPLE
CODE

Header	Header	Header
Contents	Contents	Contents
Contents	Contents	Contents

HTML
COPY

<table class="fas_table_colheader">
	<tr><th>{見出し}</th><th>{見出し}</th><th>{見出し}</th></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
</table>

CSS
COPY

table.fas_table_colheader{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_colheader th{
	border: 1px solid #999;
	padding: 5px;
	font-weight: normal;
	background: #e0ecf9;
	color: #3366cc;
	text-align: center;
}
table.fas_table_colheader th:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
	margin-right: 5px;
}
table.fas_table_colheader td {
	border: 1px solid #999;
	padding: 5px;
	text-align: center;
}

列ヘッダーにアイコンを付けたテーブルのサンプルです。thタグに擬似要素でアイコンを表示する設定をしています。

行ヘッダーにアイコン

SAMPLE
CODE

見出し	内容	内容
見出し	内容	内容
見出し	内容	内容

HTML
COPY

<table class="fas_table_rowheader">
	<tr><th>{見出し}</th><td>{内容}</td><td>{内容}</td></tr>
	<tr><th>{見出し}</th><td>{内容}</td><td>{内容}</td></tr>
	<tr><th>{見出し}</th><td>{内容}</td><td>{内容}</td></tr>
</table>

CSS
COPY

table.fas_table_rowheader{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_rowheader th{
	border: 1px solid #999;
	padding: 5px;
	font-weight: normal;
	background: #e0ecf9;
	color: #3366cc;
	text-align: center;
}
table.fas_table_rowheader th:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0a9';
	margin-right: 5px;
}
table.fas_table_rowheader td {
	border: 1px solid #999;
	padding: 5px;
	text-align: center;
}

行ヘッダーにアイコンが付いたテーブルのサンプルです。thタグに擬似要素でアイコンを表示するようにしています。

列行ヘッダーにアイコン

SAMPLE
CODE

教科	点数	偏差値
国語	80点	55
数学	70点	50

HTML
COPY

<table class="fas_table_colrowheader">
	<tr><th>{見出し}</th><th>{見出し}</th><th>{見出し}</th></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
</table>

CSS
COPY

table.fas_table_colrowheader{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_colrowheader th{
	border: 1px solid #333;
	padding: 5px;
	font-weight: normal;
	background: #3366cc;
	color: #fff;
	text-align: center;
}
table.fas_table_colrowheader th:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f00c';
	margin-right: 5px;
}
table.fas_table_colrowheader td{
	border: 1px solid #999;
	padding: 5px;
	text-align: center;
}
table.fas_table_colrowheader td:first-child{
	position: relative;
	background: #e0ecf9;
	color: #3366cc;
}
table.fas_table_colrowheader td:first-child:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0da';
	margin-right: 5px;
}

列と行のヘッダーにアイコンが付いたテーブルのサンプルです。列ヘッダーはthタグの擬似要素でアイコンを表示して、行ヘッダーはtd:first-childの擬似様相でアイコンを表示しています。

内容にアイコンを付ける

SAMPLE
CODE

税抜価格	消費税	税込価格
10,000	1,000	11,000
20,000	2,000	22,000

HTML
COPY

<table class="fas_table_tdicon">
	<tr><th>{見出し}</th><th>{見出し}</th><th>{見出し}</th></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
</table>

CSS
COPY

table.fas_table_tdicon{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_tdicon th{
	border: 1px solid #999;
	padding: 5px;
	font-weight: normal;
	background: #e0ecf9;
	color: #3366cc;
	text-align: center;
}
table.fas_table_tdicon td {
	border: 1px solid #999;
	padding: 5px;
	text-align: right;
}
table.fas_table_tdicon td:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f157';
	margin-right: 3px;
	color: #666;
}

セルの内容にアイコンを付けたテーブルのサンプルです。tdタグの擬似要素でアイコンを表示しています。金額などのテーブルを作成する場合には一括してエンマークが入れれるので便利に使えます。

特定の列の内容にアイコンを付ける

SAMPLE
CODE

商品	区分	価格
アイス	食品	180
ボールペン	文具	200

HTML
COPY

<table class="fas_table_tdicontargetcol">
	<tr><th>{見出し}</th><th>{見出し}</th><th>{見出し}</th></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
</table>

CSS
COPY

table.fas_table_tdicontargetcol{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_tdicontargetcol th{
	border: 1px solid #999;
	padding: 5px;
	font-weight: normal;
	background: #e0ecf9;
	color: #3366cc;
	text-align: center;
}
table.fas_table_tdicontargetcol td{
	border: 1px solid #999;
	padding: 5px;
	text-align: center;
}
table.fas_table_tdicontargetcol td:nth-child(3){
	text-align: right;
}
table.fas_table_tdicontargetcol td:nth-child(3):before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f157';
	margin-right: 3px;
	color: #666;
}

特定の列の内容にアイコンを付けたテーブルのサンプルです。td:nth-child(3)で３番目の列を指定して擬似要素でアイコンを付けています。

特定の行の内容にアイコンを付ける

SAMPLE
CODE

商品	ジュース	ビール
区分	飲料	アルコール
価格	160	300

HTML
COPY

<table class="fas_table_tdicontargetrow">
	<tr><th>{見出し}</th><td>{内容}</td><td>{内容}</td></tr>
	<tr><th>{見出し}</th><td>{内容}</td><td>{内容}</td></tr>
	<tr><th>{見出し}</th><td>{内容}</td><td>{内容}</td></tr>
</table>

CSS
COPY

table.fas_table_tdicontargetrow{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_tdicontargetrow th{
	border: 1px solid #999;
	padding: 5px;
	font-weight: normal;
	background: #e0ecf9;
	color: #3366cc;
	text-align: center;
}
table.fas_table_tdicontargetrow td{
	border: 1px solid #999;
	padding: 5px;
	text-align: center;
}
table.fas_table_tdicontargetrow tr:nth-child(3) td{
	text-align: right;
}
table.fas_table_tdicontargetrow tr:nth-child(3) td:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f157';
	margin-right: 3px;
	color: #666;
}

特定の行の内容にアイコンを付けたテーブルのサンプルです。tr:nth-child(3) tdで３番目の行の内容を指定して擬似要素でアイコンを付加しています。

偶数行の背景色を変える

SAMPLE
CODE

教科	点数	平均点
国語	90点	80点
数学	100点	90点
社会	80点	70点
理科	70点	70点

HTML
COPY

<table class="fas_table_roweven">
	<thead>
		<tr><th>{見出し}</th><th>{見出し}</th><th>{見出し}</th></tr>
	</thead>
	<tbody>
		<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
		<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
		<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
		<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
	</tbody>
</table>

CSS
COPY

table.fas_table_roweven{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_roweven th{
	border: 1px solid #333;
	padding: 5px;
	font-weight: normal;
	background: #3366cc;
	color: #fff;
	text-align: center;
}
table.fas_table_roweven th:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0ab';
	margin-right: 5px;
}
table.fas_table_roweven td {
	border: 1px solid #999;
	padding: 5px;
	text-align: center;
}
table.fas_table_roweven tbody tr:nth-child(even) td {
	background: #f4f9ff;
}

偶数行の背景色を変えるテーブルのサンプルです。tr:nth-child(even) tdで偶数行のセルを指定して背景色を上書きしています。横に長いテーブルなどで視認性が良くなります。

偶数列の背景色を変える

SAMPLE
CODE

教科	点数	平均点	偏差値
国語	90点	80点	60
数学	100点	90点	60
社会	80点	70点	55
理科	70点	70点	50

HTML
COPY

<table class="fas_table_coleven">
	<tr><th>{見出し}</th><th>{見出し}</th><th>{見出し}</th><th>{見出し}</th></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
</table>

CSS
COPY

table.fas_table_coleven{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_coleven th{
	border: 1px solid #333;
	padding: 5px;
	font-weight: normal;
	background: #3366cc;
	color: #fff;
	text-align: center;
}
table.fas_table_coleven th:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f14a';
	margin-right: 5px;
}
table.fas_table_coleven td {
	border: 1px solid #999;
	padding: 5px;
	text-align: center;
}
table.fas_table_coleven td:nth-child(even) {
	background: #f4f9ff;
}

偶数列の背景色を変えるテーブルのサンプルです。td:nth-child(even)で偶数列のセルを指定して背景色を上書きしています。

セルの間隔を空けたテーブル

SAMPLE
CODE

プランA	プランB	プランC
月額1,000円	月額2,000円	月額3,000円
10GB	20GB	30GB

HTML
COPY

<table class="fas_table_separate">
	<tr><th>{見出し}</th><th>{見出し}</th><th>{見出し}</th></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
	<tr><td>{内容}</td><td>{内容}</td><td>{内容}</td></tr>
</table>

CSS
COPY

table.fas_table_separate{
	border-collapse: separate;
	border-spacing: 5px;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_separate th{
	border: none;
	padding: 5px;
	font-weight: normal;
	background: #3366cc;
	color: #fff;
	text-align: center;
}
table.fas_table_separate th:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f00c';
	margin-right: 5px;
}
table.fas_table_separate td {
	border: none;
	background: #e0ecf9;
	padding: 5px;
	text-align: center;
}

セル同士の間隔を空けたテーブルのサンプルです。border-collapse: separate;でセルの間隔を空ける設定にして、border-spacing: 5px;で間隔の幅を指定しています。

下線のみのテーブル

SAMPLE
CODE

会社名	株式会社サンプル
代表者	サンプル太郎
住所	東京都新宿区0丁目00番地
電話番号	000-0000-0000

HTML
COPY

<table class="fas_table_borderbottom">
	<tr><th>{見出し}</th><td>{内容}</td></tr>
	<tr><th>{見出し}</th><td>{内容}</td></tr>
	<tr><th>{見出し}</th><td>{内容}</td></tr>
	<tr><th>{見出し}</th><td>{内容}</td></tr>
</table>

CSS
COPY

table.fas_table_borderbottom{
	border-collapse: separate;
	border-spacing: 0 5px;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_borderbottom th{
	border: none;
	border-bottom: 1px solid #ccc;
	background: none;
	padding: 5px;
	color: #3366cc;
	text-align: left;
	width: 120px;
}
table.fas_table_borderbottom th:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f00c';
	margin-right: 5px;
}
table.fas_table_borderbottom td {
	border: none;
	border-bottom: 1px solid #ccc;
	padding: 5px;
	color: #333;
	text-align: left;
}

下線のみのシンプルなテーブルサンプルです。border-spacing: 0 5px;で上下のみのセル間隔を設定して、thタグやtdタグに対してborder-bottomで下線の設定をおこなっています。

背景や線がないテーブル

SAMPLE
CODE

2000.00.00	○○ページを更新しました
2000.00.00	カテゴリを追加しました
2000.00.00	サイトを公開しました

HTML
COPY

<table class="fas_table_none">
	<tr><th>{見出し}</th><td>{内容}</td></tr>
	<tr><th>{見出し}</th><td>{内容}</td></tr>
	<tr><th>{見出し}</th><td>{内容}</td></tr>
</table>

CSS
COPY

table.fas_table_none{
	border-collapse: separate;
	border-spacing: 0 5px;
	width: 100%;
	table-layout: fixed;
}
table.fas_table_none th{
	border: none;
	padding: 5px;
	background: none;
	color: #3366cc;
	text-align: left;
	font-weight: normal;
	width: 120px;
}
table.fas_table_none th:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f073';
	margin-right: 5px;
}
table.fas_table_none td {
	border: none;
	padding: 5px;
	color: #333;
	text-align: left;
}

背景や線がないテーブルのサンプルです。レイアウト目的で主に使われるテーブルで、サンプルでは更新履歴を例にしています。