网页编程技术三(H5中表格的用法)

Posted zkai-007

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页编程技术三(H5中表格的用法)相关的知识,希望对你有一定的参考价值。

1、表格的基本结构:
  表格由行和列组成,单元格式表格的最基本单元;每个表格均有若干行,行标签由<tr></tr>定义,每行被分割为若干单元格,由<td></td>标签定义(td表示表格数据table data),如果表格的第一行表示表格表头,则第一行<tr></tr>中的<td></td>将用<th></th>标签替换.数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等.

表格的基本结构:

    <table>
            <tr>
                <th>表头一</th>
                <th>表头二</th>
                <th>表头三</th>
            </tr>
            <tr>
                <td>第一行第一列</td>
                <td>第一行第二列</td>
                <td>第一行第三列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
                <td>第二行第三列</td>
            </tr>
        </table>

2、表格的基本属性:
  表格属性分为两大类:分别作用于<table></table>标签和作用于行<tr></tr>和列<td></td>的属性. 

  1、border属性定义表格边框,属性值接受整数类型数值,表示设置表格边框的宽度
  说明:如果border的值增大,只有表格最外围的框线增加,每个单元格上的边框并不会变化.若将border设置为10,可查看设置效果
  2、width/height定义表格的宽度和高度
  3、bgcolor设置表格的背景颜色
  4、backgroud属性定义表格的背景图,需要传入一直图片的地址;若background属性与bgcolor属性同时存在,背景图会覆盖掉背景颜色.
  5、bordercolor设置表格边框的颜色,接收颜色值
  6、cellspacing设置表格单元格间距,设置表格单元格与单元格之间的间距;当cellspacing设置为0时,单元格之间没有间距
  说明:cellspacing设置为0时并不能合并相邻边框,因此设置cellspacing=0时是两条边框线的宽度.如果需要合并表格边框可以使用style="border-collapse: collapse;"进行设置
  7、cellpadding表格单元格内边距属性,即单元格中文字与单元格边框之间的距离
  8、align属性用于调整表格在其父容器中的位置,可选值有left、center、right、分别表示表格居左、居中、居右显示
  注意:align属性建议不再使用,它的相关功能已被CSS中的float所取代

      <table 
            border="1" 
            width="400" height="200" 
            bgcolor="red" 
            background="../src/img/login-bg.jpg"
            bordercolor="red"
            cellspacing="0"
            style="border-collapse: collapse;"
            cellpadding="10">
            <tr>
                <th>表头一</th>
                <th>表头二</th>
                <th>表头三</th>
            </tr>
            <tr>
                <td>第一行第一列</td>
                <td>第一行第二列</td>
                <td>第一行第三列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
                <td>第二行第三列</td>
            </tr>
        </table>

3、行和列基本属性:作用于行<tr></tr>和列<td></td>的属性

  1、width/height设置单元格宽度和高度
  2、bgcolor设置单元格的背景颜色
  3、align单元格内容水平对齐方式
  说明:表格table标签中的align属性是设置表格自身在浏览器中显示的位置,而行tr和列td的align属性是控制单元格中文字在单元格中的对齐方式;表格的align属性并不会影响表格内d   文字的水平方式,tr标签的align属性可以控制一行中所有单元格文字的水平对齐方式.
  4、valign设置单元格中内容的垂直对齐方式

     <table border="1">
            <tr>
                <th>表头一</th>
                <th>表头二</th>
                <th>表头三</th>
            </tr>
            <tr>
                <td width="150" height="100">第一行第一列</td>
                <td bgcolor="#0000FF">第一行第二列</td>
                <td>第一行第三列</td>
            </tr>
            <tr >
                <td width="200" height="100" align="left">第二行第一列</td>
                <td width="200" height="100" align="center">第二行第二列</td>
                <td width="200" height="100" align="right">第二行第三列</td>
            </tr>
            <tr>
                <td width="200" height="100" valign="top">第三行第一列</td>
                <td width="200" height="100" valign="center">第三行第二列</td>
                <td width="200" height="100" valign="bottom">第三行第三列</td>
            </tr>
        </table>

4、表格的跨行和跨列:
  colspan属性表示跨列,当某个格跨N列时,其右边N-1个单元格需要删除;
  rowspan属性表示跨行,当某个格跨N行时,其下方N-1个单元格需要删除

     <table border="1">
            <tr align="center">
                <td colspan="3">学生成绩信息</td>
            </tr>
            <tr align="center">
                <td rowspan="3">张三</td>
                <td>语文</td>
                <td>98</td>
            </tr>
            <tr align="center">
                <td>数学</td>
                <td>100</td>
            </tr>
            <tr align="center">
                <td>英语</td>
                <td>95</td>
            </tr>
            <tr align="center">
                <td rowspan="3">李四</td>
                <td>语文</td>
                <td>95</td>
            </tr>
            <tr align="center">
                <td>数学</td>
                <td>98</td>
            </tr>
            <tr align="center">
                <td>英语</td>
                <td>100</td>
            </tr>
        </table>

5、表格的结构化:将比哦啊个分为表头、表体、表尾,这样在修改其中一部分时不会影响到其他部分,方便对表格进行操作,一个完整的表格通常分为四部分:<br />
  1、caption:表格的标题,通常出现在表格顶部
  2、thead:定义表格的表头,通常表现为标题行
  3、tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组
  4、tfoot:定义表格的表尾,通常表现为总计行

     <table border="1">
            <caption>表格的标题</caption>
            <thead>
                <tr>
                    <th>表格的头部</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>表格的主体</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>表格的底部</td>
                </tr>
            </tfoot>
        </table>

6、表格的直列化:表格的直列化可以对表格进行分组,这样就不需要对各个单元和各行重复应用样式
  注意:colgroup标签只能在table中使用

     <table width="500">
            <colgroup style="background-color: yellow;"> <!--前两列为一组-->
                <col /><!--第一列-->
                <col /><!--第二列-->
            </colgroup>
            <col style="background-color: blue;" /><!--第三列-->
            <caption>表格的标题</caption>
            <thead>
                <tr>
                    <th>表头一</th>
                    <th>表头二</th>
                    <th>表头三</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>主体一</td>
                    <td>主体一</td>
                    <td>主体一</td>
                </tr>
                <tr>
                    <td>主体二</td>
                    <td>主体二</td>
                    <td>主体二</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>底部一</td>
                    <td>底部二</td>
                    <td>底部三</td>
                </tr>
            </tfoot>
        </table>

特别休假单案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            特别休假单案例:
        -->
    </head>
    <body>
        <h2 style="width: 500px; text-align: center; text-decoration: underline;">特别休假申请单</h2>
        <p>申请日期: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        <table width="500" border="1" style="border-collapse: collapse;">
            <tr>
                <td>所属单位</td>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>职称</td>
                <td width="50"></td>
                <td>姓名</td>
                <td width="50"></td>
                <td>厂长</td>
            </tr>
            <tr>
                <td rowspan="2">期间</td>
                <td colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td rowspan="2" colspan="2">天数</td>
                <td width="50"></td>
            </tr>
            <tr>
                <td colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">职务代理人</td>
                <td colspan="4">盖章</td>
                <td></td>
            </tr>
            <tr>
                <td>到期日期</td>
                <td colspan="3">&nbsp&nbsp&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td colspan="2">审核意见</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">全年特别休假数</td>
                <td colspan="2" align="right"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">已请假数</td>
                <td colspan="2" align="right"></td>
                <td>人事主任</td>
                <td>人事经办</td>
                <td>组长</td>
            </tr>
            <tr>
                <td colspan="2">本次申请日数</td>
                <td colspan="2" align="right"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td colspan="2">尚剩申请日数</td>
                <td colspan="2" align="right"></td>
            </tr>
        </table>
    </body>
</html>

以上讲解详细完整代码块:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            1、表格的基本结构:
                表格由行和列组成,单元格式表格的最基本单元;每个表格均有若干行,行标签由<tr></tr>定义,每行被分割为若干单元格,由<td></td>标签定义(td表示表格数据table data),
                如果表格的第一行表示表格表头,则第一行<tr></tr>中的<td></td>将用<th></th>标签替换.数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等.
        -->
    </head>
    <body>
        <!--
            表格的基本结构:
        -->
        <table>
            <tr>
                <th>表头一</th>
                <th>表头二</th>
                <th>表头三</th>
            </tr>
            <tr>
                <td>第一行第一列</td>
                <td>第一行第二列</td>
                <td>第一行第三列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
                <td>第二行第三列</td>
            </tr>
        </table>
        <!--
            2、表格的基本属性:
            表格属性分为两大类:分别作用于<table></table>标签和作用于行<tr></tr>和列<td></td>的属性.
        -->
        <p>
            表格的基本属性:<br />
            1、border属性定义表格边框,属性值接受整数类型数值,表示设置表格边框的宽度<br />
            说明:如果border的值增大,只有表格最外围的框线增加,每个单元格上的边框并不会变化.若将border设置为10,可查看设置效果<br />
            2、width/height定义表格的宽度和高度<br />
            3、bgcolor设置表格的背景颜色<br />
            4、backgroud属性定义表格的背景图,需要传入一直图片的地址;若background属性与bgcolor属性同时存在,背景图会覆盖掉背景颜色.<br />
            5、bordercolor设置表格边框的颜色,接收颜色值<br />
            6、cellspacing设置表格单元格间距,设置表格单元格与单元格之间的间距;当cellspacing设置为0时,单元格之间没有间距<br />
            说明:cellspacing设置为0时并不能合并相邻边框,因此设置cellspacing=0时是两条边框线的宽度.如果需要合并表格边框可以使用style="border-collapse: collapse;"进行设置<br />
            7、cellpadding表格单元格内边距属性,即单元格中文字与单元格边框之间的距离<br />
            8、align属性用于调整表格在其父容器中的位置,可选值有left、center、right、分别表示表格居左、居中、居右显示<br />
            注意:align属性建议不再使用,它的相关功能已被CSS中的float所取代,<br />
        </p>
        <table 
            border="1" 
            width="400" height="200" 
            bgcolor="red" 
            background="../src/img/login-bg.jpg"
            bordercolor="red"
            cellspacing="0"
            style="border-collapse: collapse;"
            cellpadding="10">
            <tr>
                <th>表头一</th>
                <th>表头二</th>
                <th>表头三</th>
            </tr>
            <tr>
                <td>第一行第一列</td>
                <td>第一行第二列</td>
                <td>第一行第三列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
                <td>第二行第三列</td>
            </tr>
        </table>
        <!--
            3、行和列基本属性:作用于行<tr></tr>和列<td></td>的属性
        -->
        <p>
            行和列基本属性:<br />
            1、width/height设置单元格宽度和高度<br />
            2、bgcolor设置单元格的背景颜色<br />
            3、align单元格内容水平对齐方式<br />
            说明:表格table标签中的align属性是设置表格自身在浏览器中显示的位置,而行tr和列td的align属性是控制单元格中文字在单元格中的对齐方式;表格的align属性并<br />
            不会影响表格内文字的水平方式,tr标签的align属性可以控制一行中所有单元格文字的水平对齐方式.<br />
            4、valign设置单元格中内容的垂直对齐方式<br />
        </p>
        <table border="1">
            <tr>
                <th>表头一</th>
                <th>表头二</th>
                <th>表头三</th>
            </tr>
            <tr>
                <td width="150" height="100">第一行第一列</td>
                <td bgcolor="#0000FF">第一行第二列</td>
                <td>第一行第三列</td>
            </tr>
            <tr >
                <td width="200" height="100" align="left">第二行第一列</td>
                <td width="200" height="100" align="center">第二行第二列</td>
                <td width="200" height="100" align="right">第二行第三列</td>
            </tr>
            <tr>
                <td width="200" height="100" valign="top">第三行第一列</td>
                <td width="200" height="100" valign="center">第三行第二列</td>
                <td width="200" height="100" valign="bottom">第三行第三列</td>
            </tr>
        </table>
        <p>
            表格的跨行和跨列:<br />
            colspan属性表示跨列,当某个格跨N列时,其右边N-1个单元格需要删除;<br />
            rowspan属性表示跨行,当某个格跨N行时,其下方N-1个单元格需要删除<br />
        </p>
        <table border="1">
            <tr align="center">
                <td colspan="3">学生成绩信息</td>
            </tr>
            <tr align="center">
                <td rowspan="3">张三</td>
                <td>语文</td>
                <td>98</td>
            </tr>
            <tr align="center">
                <td>数学</td>
                <td>100</td>
            </tr>
            <tr align="center">
                <td>英语</td>
                <td>95</td>
            </tr>
            <tr align="center">
                <td rowspan="3">李四</td>
                <td>语文</td>
                <td>95</td>
            </tr>
            <tr align="center">
                <td>数学</td>
                <td>98</td>
            </tr>
            <tr align="center">
                <td>英语</td>
                <td>100</td>
            </tr>
        </table>
        <p>
            表格的结构化:将比哦啊个分为表头、表体、表尾,这样在修改其中一部分时不会影响到其他部分,方便对表格进行操作.<br />
            一个完整的表格通常分为四部分:<br />
            1、caption:表格的标题,通常出现在表格顶部<br />
            2、thead:定义表格的表头,通常表现为标题行<br />
            3、tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组<br />
            4、tfoot:定义表格的表尾,通常表现为总计行<br />
        </p>
        <table border="1">
            <caption>表格的标题</caption>
            <thead>
                <tr>
                    <th>表格的头部</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>表格的主体</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>表格的底部</td>
                </tr>
            </tfoot>
        </table>
        <p>
            表格的直列化:表格的直列化可以对表格进行分组,这样就不需要对各个单元和各行重复应用样式<br />
            注意:colgroup标签只能在table中使用<br />
        </p>
        <table width="500">
            <colgroup style="background-color: yellow;"> <!--前两列为一组-->
                <col /><!--第一列-->
                <col /><!--第二列-->
            </colgroup>
            <col style="background-color: blue;" /><!--第三列-->
            <caption>表格的标题</caption>
            <thead>
                <tr>
                    <th>表头一</th>
                    <th>表头二</th>
                    <th>表头三</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>主体一</td>
                    <td>主体一</td>
                    <td>主体一</td>
                </tr>
                <tr>
                    <td>主体二</td>
                    <td>主体二</td>
                    <td>主体二</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>底部一</td>
                    <td>底部二</td>
                    <td>底部三</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

 

























以上是关于网页编程技术三(H5中表格的用法)的主要内容,如果未能解决你的问题,请参考以下文章

什么是H5技术???

好的编程习惯

安卓手机h5上传excel

一个表格中选定的tr,显示在另一个表格中

《第一行代码》读书笔记三

SQL Select 语句的用法