管理画面用テーブル

一覧テーブル

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
<table class="%{STYLEGUIDE_PAGE}-table-admin">
...
</table>

theadあり .%{STYLEGUIDE_PAGE}-table-heading

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
<table class="%{STYLEGUIDE_PAGE}-table-admin %{STYLEGUIDE_PAGE}-table-heading">
<thead>
...
</thead>
</table>

管理画面用 カラー

.%{STYLEGUIDE_PAGE}-table-info .%{STYLEGUIDE_PAGE}-table-info .%{STYLEGUIDE_PAGE}-table-info .%{STYLEGUIDE_PAGE}-table-info .%{STYLEGUIDE_PAGE}-table-info .%{STYLEGUIDE_PAGE}-table-info .%{STYLEGUIDE_PAGE}-table-info
.%{STYLEGUIDE_PAGE}-table-success .%{STYLEGUIDE_PAGE}-table-success .%{STYLEGUIDE_PAGE}-table-success .%{STYLEGUIDE_PAGE}-table-success .%{STYLEGUIDE_PAGE}-table-success .%{STYLEGUIDE_PAGE}-table-success .%{STYLEGUIDE_PAGE}-table-success
.%{STYLEGUIDE_PAGE}-table-warning .%{STYLEGUIDE_PAGE}-table-warning .%{STYLEGUIDE_PAGE}-table-warning .%{STYLEGUIDE_PAGE}-table-warning .%{STYLEGUIDE_PAGE}-table-warning .%{STYLEGUIDE_PAGE}-table-warning .%{STYLEGUIDE_PAGE}-table-warning
.%{STYLEGUIDE_PAGE}-table-danger .%{STYLEGUIDE_PAGE}-table-danger .%{STYLEGUIDE_PAGE}-table-danger .%{STYLEGUIDE_PAGE}-table-danger .%{STYLEGUIDE_PAGE}-table-danger .%{STYLEGUIDE_PAGE}-table-danger .%{STYLEGUIDE_PAGE}-table-danger
<tr class="%{STYLEGUIDE_PAGE}-table-info">
<!-- info 青色 -->
</tr>
<tr class="%{STYLEGUIDE_PAGE}-table-success">
<!-- success 緑 -->
</tr>
<tr class="%{STYLEGUIDE_PAGE}-table-warning">
<!-- warning 黄色 -->
</tr>
<tr class="%{STYLEGUIDE_PAGE}-table-danger">
<!-- danger 赤色 -->
</tr>

管理画面用ストライプテーブル

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
<table class="%{STYLEGUIDE_PAGE}-table-admin %{STYLEGUIDE_PAGE}-table-admin-striped">
...
</table>

組み合わせ

表示順 eid ステータス / タイトル / コード / 日時 / ブログ / カテゴリー ユーザー
25 公開

段組みテスト

entry-25.html
管理人管理人
<table class="adminTable %{STYLEGUIDE_PAGE}-table-admin %{STYLEGUIDE_PAGE}-table-admin-striped %{STYLEGUIDE_PAGE}-table-heading  js-admin_table-sortable %{STYLEGUIDE_PAGE}-table-hover">
...
</table>

編集画面用テーブル

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
<table class="%{STYLEGUIDE_PAGE}-table-admin-edit">
...
</table>

編集画面用テーブル(ボーダー)

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
Table Heading Table Data Table Data Table Data Table Data Table Data Table Data
<table class="%{STYLEGUIDE_PAGE}-table-admin-edit-bordered">
...
</table>

編集画面用テーブル(フォーム付き)

基本

キャッシュ
キャッシュ有効時間
アクセスログ 保存期間
<h3 class="%{STYLEGUIDE_PAGE}-title2">基本</h3>
<table class="adminTable %{STYLEGUIDE_PAGE}-table-admin-edit %{STYLEGUIDE_PAGE}-form">
	<tbody>
		<tr>
			<th>キャッシュ<i data-acms-tooltip="キャッシュ機能の設定状態です。チェックが外された場合、キャッシュ機能は動作しません。" class="%{STYLEGUIDE_PAGE}-icon-tooltip js-acms-tooltip"></i></th>
			<td>
				<input type="hidden" value="off" name="cache">
				<label class="%{STYLEGUIDE_PAGE}-form-checkbox"><input type="checkbox" checked="checked" value="on" name="cache"><i class="%{STYLEGUIDE_PAGE}-ico-checkbox"></i>有効</label>
				<input type="hidden" value="cache" name="config[]">
			</td>
		</tr>
	</tbody>
</table>