テーブルのシンプルデザイン

テーブルの基本構造を知っておきましょう!

テーブルの構造の基本は縦方向にデータが並びます。

一番上のセル(行)は通常、タイトル行になります。
タイトル行は、HTMLのタグでは、<th>(テーブル・ヘッダー・セル)というものを使いますが、Jimdoはデフォルトでは全て<td>(テーブル・データ・セル)があてられています。
これはテーブルの設計でいうと間違えということになります。

テーブルタイトル
名前 年齢 性別
浅井義久 20歳 男性
森村裕子 24歳 女性

上記のテーブルのHTML

<table align="" class="table1" style="width:70%">

<colgroup>

<col style="width: 50%;" />

<col style="width: 25%;" />

<col style="width: 25%;" />

</colgroup>

<caption>テーブルタイトル</caption>

<thead>
  <tr>

    <th>名前</th>

    <th>年齢</th>

    <th>性別</th>

</tr>

</thead>

<tbody>

  <tr>

    <td>浅井義久</td>

    <td>20歳</td>

    <td>男性</td>

  </tr>

  <tr>

    <td>森村裕子</td>

    <td>24歳</td>

    <td>女性</td>

  </tr>

</tbody>

</table>

テーブルのHTMLの貼り付け方

クリックすると拡大表示されます。右ボタンで作業の順番が表示されます。
左側からクリックしてください。

CSS

<table>
   .table1{

        border-collapse:collapse;

        padding:0;

        margin:0;

        border:none;

    }

    

    .table1 th{

        border:none;

        border:1px solid #666;

        padding:5px 5px 7px;

       background:#FFF;

      color:#333;

     text-align:left;

    font-size:90%;

    }

.table1 td{

        border:none;

        border:1px solid #666;

        padding:5px 5px 7px;

       background:#FFF;

      color:#333;

     text-align:left;

    font-size:90%;

    }


    

    .table1 caption{

        text-align:left;

       font-size:90%;

       color:#333;

    }

   

</table>

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

テーブル作成の外部サイトサービス

宅急便などの配送料金表を作成をしたい

このサービスは、オークションなど用に使用できる料金表のテンプレートを作ってくれるサービスです。基本的には、配送開始場所と、配送業者を選ぶだけで、自動的に配送料金まで入れてくれて表を作ってくれてしまいます。サイトのイメージにあわせて配色することも出来ます。

オークションテンプレート無料配布配送料金表

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422