8.HTML标签-表格标签table

女生的网名这么多〃 提交于 2019-12-02 08:24:45

HTML标签-表格标签table

一. 表格基础。

1.表格的功能。

1.1 构建一个基本表格。

1.2 表格添加行。

1.3 表格每一行添加单元格。

1.4 表格添加列标题。

1.5 表格添加表格标题。

1.6 表格合并多行。

1.7 表格合并多列。

2.表格的常用标签。

table:标识表格。

tr:标识一行。

td:标识一个单元格。

th:标识列标题单元格。

caption:标识表格标题。

3.表格的常用属性。

width:宽度

hight:高度

center:中间

Border:表格边框,设置宽度值,单位:px,可以省略。

Cellspacing:单元格与单元格之间的间距,单位:px,可以省略。

Cellpadding:单元格内容与单元格边框之间的距离,单位:px,可以省略。

Rowspan:行合并,合并同列不同行的单元格,格式:rowspan=“合并单元格数量”

Colspan: 列合并,合并同行不同列的单元格,格式:colspan=”合并单元格数量”

二.代码展示

<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>

三.代码效果

在这里插入图片描述

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!