Table

表(テーブル)に関する機能の説明と使用例です。

タイプ

デフォルト

デフォルト設定は横長の表で、タイトルは表の左側に表示されます。tdの内容欄に入力フォームがない場合に使用できます。

<div class="ec-base-table">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:20%;" />
            <col style="width:30%;" />
            <col style="width:20%;" />
            <col style="width:30%;" />
        </colgroup>
        <tbody>
            <tr>
                <th scope="row">タイトル</th>
                <td>内容</td>
                <th scope="row">タイトル<img src="//img.echosting.cafe24.com/skin/base_ko_KR/member/ico_required.gif" alt="必須" /></th>
                <td>内容</td>
            </tr>
            <tr>
                <td colspan="4">colspan="4" (セルの結合)</td>
            </tr>
            <tr>
                <th scope="row">タイトル</th>
                <td colspan="3">内容</td>
            </tr>
            <tr>
                <td colspan="4" class="clear">colspan="4" class="clear" (clear: セルを結合するにあたり､セル内の余白や罫線のスタイルを変更する際に使用)</td>
            </tr>
        </tbody>
    </table>
</div>

入力

表(テーブル)内に入力フォームのタグが含まれている場合、ec-base-tableモジュールにtypeWriteクラスを追加します。

<div class="ec-base-table typeWrite">
    <table summary="" border="1">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:20%;" />
            <col style="width:auto;" />
        </colgroup>
        <tbody>
            <tr>
                <th scope="row">ID <img src="//img.echosting.cafe24.com/skin/base_ko_KR/member/ico_required.gif" alt="必須" /></th>
                <td><input type="text" /> 半角英字(小文字)/数字、4~16字</td>
            </tr>
            <tr>
                <th scope="row">紹介者ID</th>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <th scope="row">内容</th>
                <td><textarea cols="30" rows="3" style="width:90%"></textarea></td>
            </tr>
        </tbody>
    </table>
</div>

<div class="ec-base-table typeList">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:70px;" />
            <col style="width:145px;" />
            <col style="width:auto;" />
        </colgroup>
        <thead>
            <tr>
                <th scope="col">タイトル</th>
                <th scope="col">タイトル</th>
                <th scope="col">タイトル</th>
            </tr>
        </thead>
        <tbody class="center">
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </tbody>
    </table>
</div>

スクロール

縦長の表にスクロールを挿入したい場合、タイトルと内容をそれぞれ別のtableに分離した後､
タイトルを含む表のtbodyにはheadクラスを､
スクロールが挿入される内容部分にはscrollクラスを追加します。

<!-- スクロール : デフォルト -->
<div class="ec-base-table typeList">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:100px;" />
            <col style="width:auto;" />
            <col style="width:128px;" />
        </colgroup>
        <tbody class="head">
            <tr>
                <td scope="col">画像</td>
                <td scope="col">商品情報</td>
                <td scope="col">販売価格</td>
            </tr>
        </tbody>
    </table>
    <div class="scroll">
        <table border="1" summary="">
            <caption>表のタイトル</caption>
            <colgroup>
                <col style="width:100px;" />
                <col style="width:auto;" />
                <col style="width:111px;" />
            </colgroup>
            <tbody class="center">
                <tr>
                    <td><a href="#none"><img src="$商品画像のパス" alt="" /></a></td>
                    <td class="left"><p><a href="#none">追加構成商品</a></p></td>
                    <td><strong>₩20,000ウォン</strong></td>
                </tr>
                <tr>
                    <td><a href="#none"><img src="$表のタイトル" alt="" /></a></td>
                    <td class="left"><p><a href="#none">追加構成商品</a></p></td>
                    <td><strong>₩20,000ウォン</strong></td>
                </tr>
                <tr>
                    <td><a href="#none"><img src="$商品画像のパス" alt="" /></a></td>
                    <td class="left"><p><a href="#none">追加構成商品</a></p></td>
                    <td><strong>₩20,000ウォン</strong></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<!-- スクロール : 検索結果非表示 -->
<div class="ec-base-table typeList">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:100px;" />
            <col style="width:auto;" />
            <col style="width:128px;" />
        </colgroup>
        <tbody class="head">
            <tr>
                <td scope="col">画像</td>
                <td scope="col">商品情報</td>
                <td scope="col">販売価格</td>
            </tr>
        </tbody>
    </table>
    <div class="scroll">
        <p class="message ">検索結果が見つかりませんでした。</p>
    </div>
</div>

タイトル非表示

theadのタイトルを非表示にしたい場合、<thead class="blind">を追加します。

<div class="ec-base-table typeList">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:auto;" />
            <col style="width:90px;" />
        </colgroup>
        <thead class="blind">
            <tr>
                <th scope="col">タイトル</th>
                <th scope="col">投稿日</th>
            </tr>
        </thead>
        <tbody class="center">
            <tr>
                <td class="left"><a href="#none">タイトル</a></td>
                <td>2015-05-04</td>
            </tr>
            <tr>
                <td class="left"><a href="#none">タイトル</a></td>
                <td>2015-10-13</td>
            </tr>
            <tr>
                <td class="left"><a href="#none">タイトル</a></td>
                <td>2015-10-13</td>
            </tr>
        </tbody>
    </table>
</div>

整列

セルの整列

table内のコンテンツを整列させたい場合､
left/ center/ right/ middleクラスを追加して整列を行うことができます。

<!-- 整列(横長の表) -->
<div class="ec-base-table gBorder">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:20%;" />
            <col style="width:auto;" />
            <col style="width:26%;" />
            <col style="width:26%;" />
        </colgroup>
        <tbody class="left">
            <tr>
                <th scope="row"><span class="txtWarn">tbody left</span></th>
                <td>-</td>
                <td class="center">center</td>
                <td class="right">right</td>
            </tr>
        </tbody>
        <tbody class="center">
            <tr>
                <th scope="row"><span class="txtWarn">tbody center</span></th>
                <td class="left">left</td>
                <td>-</td>
                <td class="right">right</td>
            </tr>
        </tbody>
        <tbody class="right">
            <tr>
                <th scope="row"><span class="txtWarn">tbody right</span></th>
                <td class="left">left</td>
                <td class="center">center</td>
                <td>-</td>
            </tr>
        </tbody>
        <tbody class="top">
            <tr>
                <th scope="row"><span class="txtWarn">tbody top</span><br/>top<br/>top</th>
                <td class="middle">middle</td>
                <td class="top">top</td>
                <td>-</td>
            </tr>
        </tbody>
    </table>
</div>
<!-- 整列(縦長の表) -->
<div class="ec-base-table typeList gBorder">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:20%;" />
            <col style="width:auto;" />
            <col style="width:26%;" />
            <col style="width:26%;" />
        </colgroup>
        <thead>
            <tr>
                <th scope="col">タイトル</th>
                <th scope="col">タイトル</th>
                <th scope="col">タイトル</th>
                <th scope="col">タイトル</th>
            </tr>
        </thead>
        <tbody class="left">
            <tr>
                <td><span class="txtWarn">tbody left</span></td>
                <td class="center">center</td>
                <td class="right">right</td>
                <td>-</td>
            </tr>
        </tbody>
        <tbody class="center">
            <tr>
                <td><span class="txtWarn">tbody center</span></td>
                <td class="left">left</td>
                <td class="right">right</td>
                <td>-</td>
            </tr>
        </tbody>
        <tbody class="right">
            <tr>
                <td><span class="txtWarn">tbody right</span></td>
                <td class="left">left</td>
                <td class="center">center</td>
                <td>-</td>
            </tr>
        </tbody>
        <tbody class="top">
            <tr>
                <td><span class="txtWarn">tbody top</span><br/>top<br/>top</td>
                <td class="middle">middle</td>
                <td class="top">top</td>
                <td>-</td>
            </tr>
        </tbody>
    </table>
</div>

応用

セル固定

colタグで指定された横幅のサイズに合わせてセルを固定させたい場合､gLayoutFixedクラスを追加します｡

<div class="ec-base-table gLayoutFixed">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:110px;" />
            <col style="width:auto;" />
            <col style="width:110px;" />
            <col style="width:auto;" />
        </colgroup>
        <tbody>
            <tr>
                <th scope="row">タイトル</th>
                <td>長いテキスト</td>
                <th scope="row">タイトル</th>
                <td>内容</td>
            </tr>
        </tbody>
    </table>
</div>

セルの罫線表示

すべての罫線を表示するタイプのデザインです。横長・縦長両方の表(テーブル)に適用できます。

<!-- 横長の表+罫線表示 -->
<div class="ec-base-table gBorder">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:125px;" />
            <col style="width:auto;" />
            <col style="width:auto;" />
            <col style="width:auto;" />
            <col style="width:auto;" />

        </colgroup>
        <tbody>
            <tr>
                <th scope="row">タイトル</th>
                <td class="center">内容</td>
                <td class="center">内容</td>
                <td class="center">内容</td>
                <td class="center">内容</td>
            </tr>
            <tr>
                <th scope="row">タイトル</th>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </tbody>
    </table>
</div>
<!-- 縦長の表+罫線表示 -->
<div class="ec-base-table typeList gBorder">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:70px;" />
            <col style="width:145px;" />
            <col style="width:auto;" />
        </colgroup>
        <thead>
            <tr>
                <th scope="col">タイトル</th>
                <th scope="col">タイトル</th>
                <th scope="col">タイトル</th>
            </tr>
        </thead>
        <tbody class="center">
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </tbody>
    </table>
</div>

ライン

タイトル非表示タイプの表にgLineクラスを追加すると、ラインタイプで使用することができます。

<div class="ec-base-table typeList gLine">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:auto;" />
            <col style="width:90px;" />
        </colgroup>
        <thead class="blind">
            <tr>
                <th scope="col">タイトル</th>
                <th scope="col">投稿日</th>
            </tr>
        </thead>
        <tbody class="center">
            <tr>
                <td class="left"><a href="#none">タイトル</a></td>
                <td>2015-05-04</td>
            </tr>
            <tr>
                <td class="left"><a href="#none">タイトル</a></td>
                <td>2015-10-13</td>
            </tr>
            <tr>
                <td class="left"><a href="#none">タイトル</a></td>
                <td>2015-10-13</td>
            </tr>
        </tbody>
    </table>
</div>

typeClear

表(テーブル)全体に罫線や背景色が表示されないデザインで、表のどの部分にも適用できます。

<div class="ec-base-table typeClear">
    <table summary="" border="1">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:90px;" />
            <col style="width:auto;" />
        </colgroup>
        <tbody>
            <tr>
                <th scope="row">商品名</th>
                <td>サンプル9</td>
            </tr>
            <tr>
                <th scope="row">メーカー</th>
                <td>独自制作</td>
            </tr>
            <tr>
                <th scope="row">原産国</th>
                <td>国内</td>
            </tr>
        </tbody>
    </table>
</div>

履歴なし

表示する履歴がない場合、theadタグはそのままに、
tableタグの兄弟レベルとして<p class="message"></p>エリアを追加します。

<div class="ec-base-table typeList">
    <table border="1" summary="">
        <caption>表のタイトル</caption>
        <colgroup>
            <col style="width:27px;" />
            <col style="width:200px;" />
            <col style="width:auto;" />
            <col style="width:auto;" />
            <col style="width:110px;" />
        </colgroup>
        <thead>
            <tr>
                <th scope="col"><input type="checkbox" /></th>
                <th scope="col">商品情報</th>
                <th scope="col">販売価格</th>
                <th scope="col">合計</th>
                <th scope="col">選択</th>
            </tr>
        </thead>
        <tbody class="center displaynone">
            <tr>
                <td>-</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </tbody>
    </table>
    <p class="message">(theadタグはそのまま+tbody displaynone+table兄弟レベル)注文履歴がありません。</p>
</div>

ポップアップ+表(テーブル)

ポップアップ内のセルの余白はデフォルト値より狭く設定されています。

<div module="モジュール名" class="ec-base-layer">
    <div class="header">
        <h1>ポップアップ</h1>
    </div>
    <div class="content">
        <div class="ec-base-table typeWrite">
            <table border="1" summary="">
                <caption>表のタイトル</caption>
                <colgroup>
                    <col style="width:80px;" />
                    <col style="width:auto;" />
                </colgroup>
                <tbody>
                    <tr>
                        <th scope="row">口座名義</th>
                        <td><input type="text" style="width:90%;" /></td>
                    </tr>
                    <tr>
                        <th scope="row">金融機関</th>
                        <td>
                            <select>
                                <option>- 選択 -</option>
                                <option>韓国産業銀行</option>
                                <option>中小企業銀行</option>
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="ec-base-button">
        <a href="#none" class="btnSubmit btnNormalFix sizeS" title="確認">確認</a>
        <a href="#none" class="btnNormal btnNormalFix sizeS" title="キャンセル">キャンセル</a>
    </div>
    <a href="#none" class="close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.png" alt="閉じる" /></a>
</div>

Cafe24 Smart design Support