猫と遊ぶ 見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

tableタグを使ってKing&Princeを簡単表記してみる

先日ちらっとKing&Princeに触れたのと、
メンバー6人、表にするにはちょうどいいと思ったので、書いてみた。

さっそく完成形のコードをみてみよう。

<!DOCTYPE html>
<!--tableタグとその関連するタグの練習-->
<html>

<head>
  <meta charset="UTF-8">
  <title>King&Prince メンバーカラー</title>
  <style type="text/css">
    table,
    td,
    th {
      border: 2px solid silver;
    }

    td,
    th {
      padding: 4px;
    }
<!--なんかみんな使ってるらしい游ゴシック体を使ってみる-->
    @font-face {
      font-family: "YuGothic M";
      src: local("Yu Gothic Medium"),
      local("Yu Gothic");
      font-weight: 500;
    }

    p {
      font-size: 0.9em;
      font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>メンバーカラー</th>
    </tr>
    <tr>
      <td>岸優太</td>
      <td>22歳</td>
      <td bgcolor="#9900FF" ;></td>
    </tr>
    <tr>
      <td>神宮寺勇太</td>
      <td>20歳</td>
      <td bgcolor="#00FFFF">ターコイズブルー</td>
    </tr>
    <tr>
      <td>岩橋玄樹</td>
      <td>21歳</td>
      <td bgcolor="#FF1493">濃いピンク</td>
    </tr>
    <tr>
      <td>平野紫耀</td>
      <td>21歳</td>
      <td bgcolor="#FF0000">真紅</td>
    </tr>
    <tr>
      <td>永瀬廉</td>
      <td>19歳</td>
      <td bgcolor="#000000">漆黒</td>
    </tr>
    <tr>
      <td>髙橋海人</td>
      <td>19歳</td>
      <td bgcolor="#FFFF00">ひまわりイエロー</td>
    </tr>
  </table>
  <P>※年齢は記事投稿時現在の年齢です</P>
</body>

</html>

こんな感じに今どきの10代女子がキャーキャー言いそうな単語が並んでいる。
「ひまわりイエロー」がなんとも言えない(笑)
なんでそこだけかわいいんだ(笑)
実際、人もかわいいから馴染んでる部分もある。


さて、今回新たに出てきたワードを詳しくみていくと、

<table></table>

 tableタグ。tr、th、td要素を囲むタグ。

<tr></tr>

 trタグ。行。table rowの略。

<th></th>

 thタグ。見出し。table headerの略。

<td></td>

 tdタグ。内容。table dataの略。



そしてブラウザに表示させた結果がこちら。
f:id:msm20-chocolateee:20180730173614p:plain

ちゃんと表示されてますね。
ただ、永瀬廉くんのメンバーカラーの文字が色と馴染んじゃってww
実際には、「漆黒」。
あと、岸くんのメンバーカラー「紫」て。まんまやないかいw


そして今回tableタグの表記でわかったことは、
td要素(Excelでいうセル)単位で色を指定できること。
th要素単位でも指定できるかも。
タグ内に、bgcolor="色"を追加すればOK