HTMLテーブルの作成-テーブルに関連するタグ

[テーブルの作成]

htmlで表を実装する場合、基本的には、列、行、見出しを区別して表を作成するために、表タグにtr、td、thを加えます.まず、基本的なラベルと属性を見てみましょう.

タブ

tr(表行):行

td(tabledata):行内容

th(table heading):行、列ヘッダー

見出し:表見出し

col/colgroup:スタイルを指定する列(グループ)

thead:タイトル

tfoot:尾馬

tbody:本明細書

ツールバーの

scope=「col」/scope=「row」列または行のヘッダー

colspan="2":2格列兵合

行span="3":3行連結

span="3":colgroupの列数

[基本構成]

tableタグにtrを入れて行を表示し、thまたはtdで各行のデータを入れ、右にセルを形成します.
このテーブルでは、thはカラム(下)のヘッダであるため、scope=「col」プロパティが追加されます.水平揃えとフォントの太さを自動的に行います.

  <table>
    <tr>
      <th scope="col">날짜</td>
      <th scope="col">이름</td>
      <th scope="col">성별</td>
    </tr>
    <tr>
      <td>11/15</td>
      <td>김우직</td>
      <td>남</td>
    </tr>
    <tr>
      <td>11/14</td>
      <td>박수진</td>
      <td>여</td>
    </tr>
  </table>

テーブルを整理し、th、tdラベルのサイズ、並べ替え、表示などのスタイルをcssで指定します.ここでは、vertical-alignによって縦並べ替えを個別に指定することができる.
各tdのborderによって重なる二重線はborder-collapse:collapse;属性で除去できる.

<style>
 table{ border-collapse : collapse; }  /*이중선 제거*/
 th,td{
      width: 100px;
      height: 50px;
      text-align: center;
      border: 1px solid #000;
      
      vertical-align: top;	/* 위 */
      vertical-align: bottom;   /* 아래 */
      vertical-align: middle;   /* 가운데 */
    }
  </style>

[セルを結合]

実際には、セルを連結すると解釈されていますが、セル拡張の概念がより正しいと言えます.なぜなら、1つのセルの数を必要なセルの数に適用すると、残りのセルはマージされず、横に押されるからです.したがって、セルの拡張を行った後、展開位置にあるセルを削除する必要があります.

<table>
        <tr>
            <th scope="col">번호</th>
            <th scope="col">제목</th>
            <th scope="col" colspan="2">이름</th>
            <!-- <th scope="col">조회수</th> : 밀려난 셀 제거-->
        </tr>
        <tr>
            <td rowspan="3">1</td>
            <td>테이블-1</td>
            <td>홍길동</td>
            <td>10</td>
        </tr>
        <tr>
            <!-- <td>2</td> -->
            <td>테이블-2</td>
            <td>둘리</td>
            <td>20</td>
        </tr>
        <tr>
            <!-- <td>3</td> -->
            <td>테이블-3</td>
            <td>도우너</td>
            <td>30</td>
        </tr>
</table>

最初はcolspanとrowspanが混同していたので、注意!
colspanはカラムではなく、行でマージされます.マージされたコンテンツを垂直に読むための情報です.逆にrowspanは、マージ内容の情報を横方向に読み出すため、下の列間でマージされます.もっと詳しい内容は下記の住所で確認できます.

colspanとrowspan

テーブル構成とcolgroup

テーブルはthead/tbody/tfootで構成され、表示のレイアウトに影響を与えることなく、テーブル内のデータを区別します.視覚障害者に結果を知らせるために、tbodyの前にtfootを書きます.

タグを作成する順序:table>タイトル>colgroup>thead>tfoot>tbody

colgroupは、colタグを使用してテーブル内のカラムを順番に定義するグループで、各カラムに一貫したスタイルを指定します.また、spanプロパティを使用して列数を指定し、スタイルを指定することもできます.たとえば、5つのカラムテーブルのカラムプロパティを指定します.

    <colgroup>
    	<col style="background:white;"> 	        //첫번째 열
        <col span="3" style="background-color:yellow;">	//2~4번째 열
        <col style="background:gray;">	         	//5번째 열 
    </colgroup>

右入力度合計価格表を作成する

<table>
            <caption>우도입도 총괄요금표</caption>
            <colgroup>
                <col style="background-color:darkseagreen;">
            </colgroup>
            <thead>
                <tr>
                    <th rowspan="2">구분</th>
                    <th colspan="3" style="background-color:wheat;">우도입도 총괄요금표</th>
                    <!-- <th></th> -->
                    <!-- <th></th> -->
                </tr>
                <tr>
                    <!-- <th></th> -->
                    <th>선박요금</th>
                    <th>도립공원입장료</th>
                    <th>터미널이용료</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="4" style="background-color: white;">*이륜차(오토바이,자전거) 및 화물차량은 별도 문의</td>
                    <!-- <td></td> -->
                    <!-- <td></td> -->
                    <!-- <td></td> -->
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <th>성인</th>
                    <td>2,000원</td>
                    <td>1,000원</td>
                    <td>500원</td>
                </tr>
                <tr>
                    <th>중학생이상</th>
                    <td>2,000원</td>
                    <td>800원</td>
                    <td>300원</td>
                </tr>
                <tr>
                    <th>초등학생</th>
                    <td>700원</td>
                    <td>500원</td>
                    <td>300원</td>
                </tr>
            </tbody>
        </table>