? ばかりの初心者 フロントエンドエンジニアになるために HTML Part.6 -table-

タイムテーブル公開しないイベントはお断りですって普及したらいいのになぁ。
毎月第4金曜日19時- ギター弾き語りイベント 【Live in Action】 入場無料、ノルマなし、タイムテーブルなしそれぞれのスウィッチの入った時がLive on!!★ Papa Moo/ひとりナマステ/kumachan/他
休日に出しっぱでイベントに飛び出してったテーブルを片付けに早めに出勤したんどけど、終わって始業まで時間あったのでオフィス街をグルグル歩いて汗だくでオフィスに戻ったんだけど、昼休みにいつもやる階段登りで良かったんじゃないかという...

今回は表を作成するtable(テーブル)について。
テーブルを作るときによく混乱してしまうので、整理の為に。

例えば、

イベント 開催日 場所 料金
〇〇フェス 2017/5/19 東京 3,000円
〇〇イベント 2017/6/20 大阪 3,000円
〇〇祭 2017/7/21 福岡 3,000円

tableの基本構造

table要素

<table> </table> : 表を作成するときに使う。 この要素内にtrやtdを配置し、行とセルを示す。

スクリーンショット 2017-05-19 11.28.23.png

th要素

<th> </th> : table header 表の見出しを作る

th.png

tr要素

<tr> </tr> : table row 表のを作る

tr.png

td要素

<td> </td> : table data 表のデータを作る

td.png

caption要素

この要素を使うと、テーブルに表題(タイトル)をつけることができる

caption.png

例の表のコードはこんな感じでしょうか。 とてもシンプルです。

<table>
        <caption>開催イベント</caption>
        <tr>
            <th>イベント</th>
            <th>開催日</th>
            <th>場所</th>
            <th>料金</th>
        </tr>
        <tr>
            <td>〇〇フェス</td>
            <td>2017/5/19</td>
            <td>東京</td>
            <td>3,000円</td>
        </tr>
        <tr>
            <td>〇〇イベント</td>
            <td>2017/6/20</td>
            <td>大阪</td>
            <td>3,000円</td>
        </tr>
        <tr>
            <td>〇〇祭</td>
            <td>2017/7/21</td>
            <td>福岡</td>
            <td>3,000円</td>
        </tr>
    </table>

行をグループ化する

行を意味的なまとまりとしてグループ化すると、テーブルの構成を管理しやすくなり、CSSもつけやすくなる。

thead

<thead> </thead> : テーブルの見出しにあたる行をグループ化する。table要素の子要素として1つしか入れられない。

tbody

<tbody> </tbody> : テーブルのボディ(データ)にあたる行をグループ化する。tbodyはいくつでも入れられる。

tfoot

<tfoot> </tfoot> : テーブルのフッターにあたる行をグループ化する。table要素の子要素として1つしか入れられない。

table_group.png

  <table>
        <caption>ご注文内容</caption>
        <thead>
            <tr>
                <th>商品</th>
                <th>単価</th>
                <th>数量</th>
                <th>小計</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>ショートケーキ</td>
                <td>360円</td>
                <td>1</td>
                <td>360円</td>
            </tr>
            <tr>
                <td>チーズケーキ</td>
                <td>400円</td>
                <td>2</td>
                <td>800円</td>
            </tr>
            <tr>
                <td>ガトーショコラ</td>
                <td>420円</td>
                <td>2</td>
                <td>840円</td>
            </tr>
            <tr>
                <td>シュークリーム</td>
                <td>320円</td>
                <td>4</td>
                <td>1,280円</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>合計</th>
                <td></td>
                <td>9</td>
                <td>3,280円</td>
            </tr>
        </tfoot>
 </table>

今回はここまで。
まとめてみると、頭の中も整理できた気がします。
難しいテーブルも組めるように練習するぞ〜:wink:

  • コメント

    1. 匿名希望
      2017/06/25(日) 14:57:27

      タイムテーブル公開しないイベントはお断りですって普及したらいいのになぁ。

    2. 匿名希望
      2017/06/26(月) 10:51:08

      毎月第4金曜日19時-
      ギター弾き語りイベント
      【Live in Action】
      入場無料、ノルマなし、タイムテーブルなしそれぞれのスウィッチの入った時がLive on!!★
      Papa Moo/ひとりナマステ/kumachan/他

    3. 匿名希望
      2017/06/26(月) 10:51:08

      休日に出しっぱでイベントに飛び出してったテーブルを片付けに早めに出勤したんどけど、終わって始業まで時間あったのでオフィス街をグルグル歩いて汗だくでオフィスに戻ったんだけど、昼休みにいつもやる階段登りで良かったんじゃないかという…

    記事に戻る

関連記事