HTMLスキル - 第5章 Lesson1

テーブルを作成するための<table>タグの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

<table>タグ、<tr>タグ、<td>タグを使って、表組みを表示する方法について、初心者向けに解説しています。



この動画で学べること

・基本的なテーブルの作り方



基本的なテーブルの作り方

今回から、テーブルのマークアップの仕方を見ていきましょう。
テーブルつまり表を作るためのタグは、<table>タグです。
コメントアウトの内側に、<table>タグを書いていきましょう。
このようにします。



<!-- ここからテーブル(仕事メニュー一覧) -->
<table>
</table>
<!-- ここまでテーブル(仕事メニュー一覧) -->



テーブルの行とセルを作成していこう

では、さらにテーブルを作るためのタグを書いていきたいと思います。
まずは、4行のテーブルにるための<tr>タグを4つを書き、その中にセルを作るための<td>タグを3つ書いていきます。
そして、<td>タグの中に、文章を入れていきます。




<!-- ここからテーブル(仕事メニュー一覧) -->
<table>
<tr>
<td>出来る事</td>
<td>詳細</td>
<td>価格</td>
</tr>
<tr>
<td>Webデザイン</td>
<td>Photoshopを使用したWebサイトデザイン</td>
<td>50,000円〜</td>
</tr>
<tr>
<td>Webサイトコーディング</td>
<td>HTML,CSS,javascriptを使用したWebサイトコーディング</td>
<td>50,000円〜</td>
</tr>
<tr>
<td>ロゴ制作</td>
<td>企業やウェブサイトのロゴ製作</td>
<td>50,000円〜</td>
</tr>
</table>
<!-- ここまでテーブル(仕事メニュー一覧) -->




テーブルを作るときには、1つのテーブルに対して入れる<td>タグの数を統一するようにしましょう。
ここまでできたら 、保存してブラウザで見てみましょう。
テーブルができあがりました。