1. 情報をテーブルで表示すると便利な場合があります。例えば、ウェブサイトに地域や学校ののスポーツクラブのメンバーの一覧を表示したい場合や、曲の一覧などです！
  2. テーブルは、行(rows)と列(columns)からなるマス目です。ほとんどのテーブルでは、ヘッダー(header) と呼ばれるそれぞれの列のタイトルを持ちます。
  3. <table> </table> タグの間にいろいろ入っているのを見ることができると思います。<table> タグから 、タグが終了する </table> をコピーします。
  4. テーブルを追加したい場所に、コードをペーストしてください。

  5. すべてのタグについて確認していきます。このコードはリストに少し似ていますが、もっと多くの階層があります。(<ul> や <ol> を思い出しましょう)

    • それぞれの <tr></tr>のペアは、行です。それらの間にあるものは、1行で表示されます。

    • 最初の行には <th> </th> タグがあります。これは、ヘッダー部分に利用されます。それぞれの列に対して、1つのペアを持ちます。

    • <td> </td> はテーブルデータの略ですです。それは、行の中で利用されます。リスト中アイテムの <li> </li> タグのように、この間にあるものはテーブルの列のアイテムとして表示されます。

  6. 以下が情報が入っているテーブルの例です

     <table>
   <tr>
     <th>Artist</th>
     <th>Song</th>
     <th>Year</th>
   </tr>
   <tr>
     <td>Thin Lizzy</td>
     <td>The Boys Are Back In Town</td>
     <td>1976</td>
   </tr>
   <tr>
     <td>Sinead O'Connor</td>
     <td>Nothing Compares 2 U</td>
     <td>1990</td>
   </tr>
   <tr>
     <td>The Cranberries</td>
     <td>Linger</td>
     <td>1994</td>
   </tr>
 </table>
  7. そして、それはウェブサイト上で以下のように表示されます。
  8. あなたの入れたい情報をテーブルに入れてみましょう。単純に <td> </td> タグと、<th> </th> タグに文章を入れてみましょう。もし必要であれば、タグを追加することもできます。
  9. 行を追加するためには、<tr> </tr> タグを追加します。中には、データアイテムを、<td> </td>タグを利用して、他と同じ数だけ入れます。
  10. 追加で列を追加する場合は、<td> </td> タグを全ての行に追加します。また、最初の行に、<th> </th> を利用してヘッダーも追加しましょう。
  11. style.css の最後を見ると、CSSコードでテーブルの見た目をどのように変えることができるのかを見ることが出来ます。いきなり全てを理解する必要はありません! もし、内容を変更して変更する時間があれば、線(boder)と、背景色(background colors)を自分の好きなものにしましょう。
    table, th, td {
  border: 1px solid HoneyDew;
  border-collapse: collapse;
}
tr {
  background-color: PaleTurquoise;
}
th, td {
  vertical-align: top;
  padding: 5px;
  text-align: left;
}
th {
  color: purple;
}
td {
  color: purple;
}
  12. 補足として、table, th, td のようなセレクタ中の カンマ (,) について説明します。これは、セレクタのリストです。意味としては、全ての <th> 要素と、全ての <td> 要素に対して適用されるという意味です。これにより、同じルールをそれぞれのセレクタに書く必要がなくなります。

results matching ""

    No results matching ""