oday I Learned - HTML tables

20024 ワード
html TIL テキストリンク
今日はHTMLからTableとFormを学びました.
内容は本当に多いです.
初めて学ぶコンセプトなので混同してしまったので復習は必須!

Create a Table

<table>

</table>
タグには、テーブル内のすべてのデータが含まれています.

Table Components


表のコンポーネントは次のとおりです.
  • 行
  • 列
  • ユニット(データを含む)
    • 3種類あります.

    1) table rows

    <table>
  <tr></tr>
  <tr></tr>
</table>
  • ~に対応する部分は一列である.

    2) table data

    <table>
  <tr>
    <td>73</td>
    <td>81</td>
  </tr>
</table>
    行の情報は、
  • の間に加えられる.
  • 行には2つのデータがあり、自動1行には2つのユニットがあります.
    • 73
    81
    (上記コードの運転状況)

    3) table headings

    <table>
  <tr>
    <th></th>                        // blank heading
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>
	<tr>
    <th scope="row">Temperature</th>
    <td>73</td>
    <td>81</td>
  </tr>
</table>
  • tabledataと同様にtablerowに入る必要があります.
    • これは、
  • に対応する行および列のデータの情報です.
    • Saturday
    Sunday
    Temperature
    73
    81

    scope attribute

  • scopeは、対応するヘッダーが行と列のどの情報を指す属性です.
  • row:header対応行時
  • col:ヘッダーが列に対応する場合

    • 4) spanning columns / rows


    spanning columns

    <td colspan="1">Table Data</td>
  • テーブルデータクロスカラム
    • <table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td colspan="2">Out of Town</td>
    <td>Back in Town</td>
  </tr>
</table>
    Monday
    Tuesday
    Wednesday
    Out of Town
    Back in Town
    (上記コードの運転状況)

    spanning rows

    <td rowspan="1">Table Data</td>
  • テーブルデータクロスロー
    • 混同主義!
  • colspan=横連結ユニット
  • 行span=垂直連結セル

    • 5) table body

    <tbody> </tbody>
  • 表が長くなると、表体を利用してパーティション化することができる.
  • は1つのテーブルで複数使用できます!

    • 6) table head

    <thead> </thead>
  • 表本体を複数の
    に分割すると、各部分のタイトルは
    • となる.
    <table>
	<thead> ~ </head>
    <tbody> ~ </tbody>
    <tfoot> ~ </tfoot>
</table>
  • の各セグメントの最初のユニットだけが「thead」に入ることができます.
  • scopeプロパティに「row」または「col」を追加して、対応するヘッダーの行および列情報を入れることができます.

    • 7) table footer

    <tfoot> </tfoot>
  • 表の一番下の部分は「tfoot」に分けられます.
    • <table>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Q1</th>
      <td>$10M</td>
      <td>$7.5M</td>
    </tr>
    <tr>
      <th>Q2</th>
      <td>$12M</td>
      <td>$5M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$22M</td>
      <td>$12.5M</td>
    </tr>
  </tfoot>
</table>
    と
    AWS EC 2 Ubuntuでの導入環境の設定(jdk、maven、tomcat、git)
    [JS]JavaScript中級教程(feat.コード鞍馬)-call、apply、bind