テーブルの基本構造を知っておきましょう!
テーブルの構造の基本は縦方向にデータが並びます。
一番上のセル（行）は通常、タイトル行になります。
タイトル行は、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>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
テーブル作成の外部サイトサービス
宅急便などの配送料金表を作成をしたい
このサービスは、オークションなど用に使用できる料金表のテンプレートを作ってくれるサービスです。基本的には、配送開始場所と、配送業者を選ぶだけで、自動的に配送料金まで入れてくれて表を作ってくれてしまいます。サイトのイメージにあわせて配色することも出来ます。