Table

・¥¥2¥2の表示構造図

1.表のデフォルトフレームを設定する

<table>ラベルを使用して表を作成し、内部要素を入力します.
tableタグはコンテナ要素で、内部はタイトル(タイトル)と行(tr)、列(行)、セル(td)とセルタイトル(th)から構成されています.
1.最初にテーブルを作成し、見出しを指定します.

    <table>
      <caption>테이블 제목</caption>
    </table>

<caption>表の見出しまたは説明を表し、表要素の最初のサブ要素として使用される.

2つ目は、テーブルの中に1列ずつ積み上げる(tr).

    <table>
      <caption>테이블 제목</caption>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </table>

テーブルは横に並ぶように約束されています.tr行の個数で順番に積み上げます.積み木を考えるのは簡単だ.

行(tr)にカラム(td)の値を入れます.

    <table>
        <tr>
            <td>1,1</td>
            <td>1,2</td>
            <td>1,3</td>
        </tr>
        <tr>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
        </tr>
        <tr>
            <td>3,1</td>
            <td>3,2</td>
            <td>3,3</td>
        </tr>
        <tr>
            <td>4,1</td>
            <td>4,2</td>
            <td>4,3</td>
        </tr>
    </table>

ここで注意したいのはtrの一団が横になっていることです!これが行の一部であることを覚えておいてください.
では、第1行trがバンドルされたtdに含まれるべき内容は、第1行の値である.上から、1行目の1番目の値、2番目の値、3番目の値を順に繰り返し書きます.
かっこの数値を(行、列)と見なし、対応する値を作成します.

入力ユニットタイトル

    <table>
        <tr>
            <th>1,1</th>
            <th>1,2</th>
            <th>1,3</th>
        </tr>
        <tr>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
        </tr>
        <tr>
            <td>3,1</td>
            <td>3,2</td>
            <td>3,3</td>
        </tr>
        <tr>
            <td>4,1</td>
            <td>4,2</td>
            <td>4,3</td>
        </tr>
    </table>

最初の行をセルヘッダーと呼ぶと、ヘッダー部分はthタグに変更されます.
説明のために以下の手順で説明していますが、3番に列を入力するときはすぐに記入してください.
ここに着いたら、テーブルは正常に完成しました.
理解を助けるために、テーブル作成プロセスが可視化される.

2.表の詳細要素

では、ここでは、どのようにしてテーブルをモデリングし、より詳細なテーブルを作成しますか?

<thead>, <tbody>, <tfoot>

bodyが大きいときはheader、main、footに等しいと考えると分かりやすいです.
セルのタイトル部分をthead、この内容をtbody、結果を表す下部をtfootとして指定します.
-例に示すように、単純なテーブルで使用する必要はありません.
-レイアウトに影響を与えず、cssを使用してスタイリングできます.
-tfootはテーブルの下部にある必要があります.

連結セル:colspan、rowspan

colspan
colspanプロパティでは、カラムのマージが許可されます.
熱と熱の併合横長

rowspan
rowspanプロパティを使用して、行をマージします.
行と行を結合し、縦に延長します.
下記コード参照

<table>
<caption> 이달의 책 판매량 </caption>
<tr>
    <th>구분</th>
    <th colspan="2">이름</th>
    <!-- <th>판매량</th> -->
</tr>
<tr>
    <td>1</td>
    <td>해리포터</td>
    <td rowspan="2">100</td>
</tr>
<tr>
    <td>1</td>
    <td>해리포터2</td>
    <!-- <td>100</td> -->
</tr>
</table>

<colgroup>,<col>

列に共通のスタイルを指定できます.

<colgroup>
	<col class="구분" />
	<col class="이름" />
	<col class="판매량" />
</colgroup>

<scop>

th要素でscop要素を使用してtdとの接続関係を設定できます.
(列に接続するか行に接続するか)

<tr>
  <th></th>
  <th scope="col">월요일</th>
  <th scope="col">화요일</th>
  <th scope="col">수요일</th>
  <th scope="col">목요일</th>
  <th scope="col">금요일</th>
  <th scope="col">토요일</th>
</tr>  

カレンダーから見ると、月曜日から日曜日までのthは列のタイトルです.

以上を踏まえてカタールW杯予選グループ抽選結果表を作成した.
いくつかのcssを試しましたが、テーブルにcssを適用するのは少し難しく、詳細cssを適用できません.私はまだhtml部分しか勉強していないので、tableにcssを適用したいので、ゆっくり勉強しましょう!!
https://heejin-k.github.io/code_lion/html/0405/worldcup.html