投票ページの作成②HTMLの作成 - プログラミングの理解が遅すぎる初心者がJavaScript、Node.jsで投票型掲示板を作ろうとしてます

前回言った通り、投票ページでは投票の項目を表すところと、投票の結果を表すところを作ります。

html-css-javascript.hatenadiary.com

投票結果はテーブルのような形になりますので、使うタグは<table>ですね。

<table> <!-- テーブル全体 -->
  <thead> <!-- 見出し（項目）の行 -->
    <tr> <!-- この中に1行分のセル（th）が収まる -->
      <th>順位</th>       <!-- 列の見出し -->
      <th>候補者</th>     <!-- 列の見出し -->
      <th>投票数</th>     <!-- 列の見出し -->
      <th>投票ボタン</th> <!-- 列の見出し -->
    </tr>
  </thead>

  <tbody id="candidate-list"> <!-- データ行が追加される場所 -->
    <!-- ここに JavaScript で <tr> が追加される -->
  </tbody>
</table>

コピペできるように全部を書くと以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票ページ</title>
</head>
<body>
<header><!-- 後ほどJavaScriptで共通ページを引っ張ってくる-->
    <h1>投票ページ</h1>
</header>
    <main>
<table> <!-- テーブル-->
  <thead><!-- 項目を書く行-->
    <tr><!-- 以下のものを一行に収める-->
      <th>順位</th><!-- 内容（値）-->
      <th>候補者</th>
      <th>投票数</th>
      <th>投票ボタン</th>
    </tr>
  </thead>
  <tbody id="candidate-list">
    <!-- ここに行が追加されていく-->
  </tbody>
</table>
    </main>
</body>
</html>

・・・あれ？

HTMLはこれで終わりですね。

またあっさりと終わってしまいました。

次はCSSに進みます。