8.HTML label - the label table form

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/weixin_43167546/article/details/102740344

HTML tags - table tags table

A. Table base.

1. The function of the table.

1.1 Construction of a basic form.

1.2 Form add a row.

1.3 Each line of the table to add cells.

1.4 Form add a column heading.

1.5 Form add table headers.

Table 1.6 merge multiple lines.

1.7 table with multiple columns.

2. The table of commonly used tags.

table: identification table.

tr: identifies a row.

td: a cell identifier.

th: identifies the column header cell.

caption: identify the table headers.

3. Common attributes table.

width: width

hight: height

center: middle

Border: table border, setting width value, unit: px, may be omitted.

Cellspacing: between cells and the cell spacing, unit: px, may be omitted.

Cellpadding: distance between the cell content and the cell borders, unit: px, may be omitted.

Rowspan: OK merged, with the columns of cells in different rows, format: rowspan = "number of merged cells"

Colspan: Column merged, peers different cells of the column, the format: colspan = "number of merged cells"

II. Code Display

<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. Code Effect