8.HTMLラベル - ラベルテーブル形式

免責事項:この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。
このリンク: https://blog.csdn.net/weixin_43167546/article/details/102740344

HTMLタグ - テーブルタグテーブル

A.テーブルベース。

1.テーブルの機能。

1.1基本的なフォームの構築。

1.2フォームは、行を追加します。

1.3セルを追加するには、テーブルの各行。

1.4フォームは、列見出しを追加します。

1.5フォームは、テーブルのヘッダーを追加します。

表1.6は、複数の行をマージします。

複数の列を持つテーブル1.7。

2.一般的に使用されるタグのテーブル。

表:識別テーブル。

TR:行を識別する。

TD:セル識別子。

目:列ヘッダーセルを識別する。

キャプション:テーブルヘッダを識別する。

3.一般的には、テーブルを属性。

幅:幅

ハイト:高さ

センター:ミドル

ボーダー:テーブルボーダー、幅の値、ユニット設定:PXは、省略してもよいです。

CELLSPACING:セルとセル間隔、ユニット間:PX、省略してもよいです。

CELLPADDING:セルの内容とセルの境界との間の距離、単位:PX、省略してもよいです。

ROWSPAN:ROWSPAN =「マージされたセルの数」:OKは、異なる行のセルの列で、フォーマットを合併しました

COLSPAN:COLSPANは=「マージされたセルの数」:列は、列、形式の異なるセルをピア、合併

II。コード表示

<table border="1" cellspacing="0" cellpadding="10">

      <caption>学生信息表</caption>

      <!-- 用来标识一行的标签:tr -->

      <!-- 1 -->

      <tr>

        <!-- 用来标识一个单元格:td -->

        <!-- <td>姓名</td>

        <td>性别</td>

        <td>年龄</td>

        <td>成绩</td> -->

        

        <th>姓名</th>

        <th>性别</th>

        <th>年龄</th>

        <th>成绩</th>

      </tr>

      <!-- 2 -->

      <tr>

        <td>Frank</td>

        <td></td>

        <td>18</td>

        <td>100</td>

      </tr>

      <!-- 3 -->

      <tr>

        <td>Duke</td>

        <td>未知</td>

        <td>38</td>

        <td>59</td>

      </tr>

      <!-- 4 -->

      <tr>

        <td>Kris</td>

        <td></td>

        <td>20</td>

        <td>90</td>

      </tr>

    </table>

    

    <!--

      创建表格快捷方式:

        table>(tr>td*4)*4+tab

        tr>td*4: 指代一行的模板。

        (tr>td*4)*4: 生成4行。

      

      创建表格快捷方式:

        table>(tr>th*4)+(tr>td*4)*3

        tr>th*4 : 指代第一行的模板。

        tr>td*4 : 指代后3行的模板。

        

      层级结构:

        1.>: 生成元素下一级元素。  table>tr + tab 生成1个table标签,table标签中嵌套1个tr标签。

        2.+: 生成同等关系同级的元素。

        

    -->

    <table>

      <tr>

        <th></th>

        <th></th>

        <th></th>

        <th></th>

      </tr>

      <tr>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

    </table>

  </body>

</html>

III。コードの効果

ここに画像を挿入説明

おすすめ

転載: blog.csdn.net/weixin_43167546/article/details/102740344