動画の構造化データ
Private Fantasticのホームページへ

[初めてのｗｅｂサイト作成 レッスン26]
テーブル（表）の作成方法の紹介

メニュー

🌹レッスン26🌹

テーブル（表）の作成方法をご紹介します！

目次

1.　基本的なテーブル（表）の作成
　1-1　ＨＴＭＬの指定方法
　1-2　ＣＳＳの指定方法

　🌻パソコンのブラウザはGoogle Chromeを使用しています。

1.　基本的なテーブル（表）の作成

今回は、基本的なテーブル（表）の作成方法について解説します。

ブログではあまり使う事が少ないかと思いますが、企業やお店などのホームページではよく使われています。

  1. テーブルを作成する基本は、＜ｔａｂｌｅ＞＜/ｔａｂｌｅ＞要素でテーブルを作成。
  2. ＜ｃａｐｔｉｏｎ＞＜/ｃａｐｔｉｏｎ＞要素でテーブルの名前を作成。
  3. ＜ｔｒ＞＜/ｔｒ＞要素で行を作成。
  4. ＜ｔｈ＞＜/ｔｈ＞要素で見出しセルを作成。
  5. ＜ｔｄ＞＜/ｔｄ＞要素でデータセルを作成。

ｂｏｒｄｅｒやｗｉｄｔｈなどの装飾は、ＣＳＳで指定します。

ｂｏｒｄｅｒの表示・非表示は、ＨＴＭＬで指定します。

ｂｏｒｄｅｒの表示は”1”、非表示は”0”と指定します。

例えば私が運営しているBASE「Terucha」ショップとUP-Tマーケット「てるちゃ」の場合！


「Terucha」「てるちゃ」ショップのInformation
商　品 説　明 画像
キャラクター「てるちゃ」長袖Ｔシャツ しっかりとした生地で豊富なサイズ（110～XL）とカラーでインナー、アウターとしても着こなせます。
キャラクター「てるちゃ」マグカップ 白い陶器の大きめのカップです。
コーヒー、紅茶、スープなどを注いでお楽しみください。
キャラクター「てるちゃ」フロストミラー 外出先での身だしなみチェックからスタンド利用する際にも程よい角度で幅広くご使用いただけます。
キャラクター「てるちゃ」トートバッグ トートバックの生地もしっかりしていて、ちょっとした買い物や散歩にピッタリのサイズです。
キャラクター「てるちゃ」ラペルボールペン 文字も描きやすくクリップ部分でノートに挟めば持ち運びにも邪魔にならずすぐに使える優れものです。

この様に文字だけでなく、画像も挿入できます。

＜ｔｈ＞＜/ｔｈ＞見出し要素は、太文字でセルの中央に配置されます。

＜ｔｄ＞＜/ｔｄ＞データ要素は、普通の文字の太さでセルの左寄せに配置されます。

商品は他にもあるので良かったら下記のリンクからご覧くださいませ💕

BASE「Terucha」ショップURL

PayIDアプリ「Terucha」ショップURL

UP-Tマーケット「てるちゃ」ショップURL

　1-1　ＨＴＭＬの指定方法

テーブルに画像を指定するには、

＜ｔｄ＞＜/ｔｄ＞の中に、ｉｍｇで指定します。

画像はご自分で準備していただいて、画像のファイル名を変更して下さい。

＜ｔｄ＞＜/ｔｄ＞要素のデータセルは長袖Ｔシャツとマグカップのみ記述してあります。

それでは実際にやってみましょう！桃色のコードを入力してね！


【ＨＴＭＬ】

<body>
<table border="1">
<caption>「Terucha」ショップのInformation</caption>
<tr>
<th>商　品</th>
<th>説　明</th>
<th>画像</th>
</tr>
<tr>
<td>キャラクター「てるちゃ」長袖Ｔシャツ</td>
<td>しっかりとした生地で豊富なサイズとカラーでインナー、
アウターとしても着こなせます</td>
<td>
<div class="img">
<img src="images/T-shirt.png" alt"長袖Ｔシャツの画像" width="100" />
</div>
</td>
</tr>
<tr>
<td>キャラクター「てるちゃ」マグカップ</td>
<td>白い陶器の大きめのカップです。
コーヒー、紅茶、スープなどを注いでお楽しみください。</td>
<td>
<div class="img">
<img src="images/Mug-L.png" alt"マグカップの画像" width="100" />
</div>
</td>
</tr>
</table>
</body>

　1-2　ＣＳＳの指定方法

テーブルの外枠の線のスタイル・色・太さやテーブル自体の配置など

ｂｏｒｄｅｒやｗｉｄｔｈなどの装飾は、ＣＳＳで指定します。

ｃａｐｔｉｏｎ（テーブルの名前）の文字の色や太さなどの装飾も、ＣＳＳで指定します。

【ＣＳＳ】

table{
margin: 0 auto;
border: ridge #f09 5px;
}
caption{
color: #f09;
font-weight: bold;
}

🌼保存したらブラウザで確認してみましょう！

パソコン画面の画像


スマホ画面の画像


上手く表示されたかな？



★まとめ

いかがでしたか？

今回はちょっとだけ難しかったかもしれません。

Ｅｘｃｅｌなどで表を作って画像を貼っても良いのですが、やはりコーディングした方が鮮明でキレイ✨に仕上がります。

例えば、気になった商品があるとします。

テーブルで作成した方は、テキストがコピー出来ますが、画像で作成した方は、スクショはできてもひとかたまりになっているのでテキストのみの抽出が困難です。

この様にユーザビリティにも配慮したものになります。

ユーザーが読みやすく使い勝手の良い、そのｗｅｂページを魅力的に見せる✨テクニックです。

これで、大体のＨＴＭＬとＣＳＳの基礎はご紹介できたと思いますので今回で「初めてのｗｅｂサイト作成」レッスンは最終回とさせていただきます。

動画ができたら、いつも様にページのＴＯＰに埋め込んでおきますね。

ｗｅｂの技術の進歩は早いから、応用アレンジしてみてね！

長い間ご高覧いただき誠にありがとうございました。

(^.^/)))~~~byebye!!


TOP