html body标签

table

table 属性：

　　border ：定义表格的边框宽度，默认为0，即无边框。<table border="1">

　　title ：表格的提示信息，当鼠标移到表格上方时，所提示的信息。

     cellpadding ：规定单元边沿与其内容之间的空白。

     cellspacing  ：规定单元格之间的空白。

th、td 属性：

　　colspan : 表示横向合并单元格 ( )

　　rowspan ：表示纵向合并单元格 (  )

内涵标签

<caption></caption>：表头信息。

<tr></tr> ：定义一个表格行；

<th></th> ：定义一个表格头；若是纯文字，默认会以粗体的样式表现。

<tbody></tbody> ：可以理解为表格的内容区域，在Chrome、FF浏览器通过DOM进行表格动态插入行的时候，要使用这个。如果不进行DOM操作，可不用添加。

<td></td> ：定义一个单元格；

table 表格的书写形式两种：

<html>

<body>

<h4>表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>

</body>
</html> 

表头：

姓名电话电话
Bill Gates555 77 854555 77 855

垂直的表头：

姓名Bill Gates
电话555 77 854
电话555 77 855

<table>标签中比较少见的属性和子标签：

summary 属性：用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。

bordercolor 属性：用来设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。

                            （不推荐使用bordercolor 属性，而推荐使用CSS 样式表的border 属性来进行设置）

cellspacing 属性：用来设置表格的单元格之间的间距。

                           （推荐使用CSS 样式表的border-collapse 属性来进行设置）

<caption> 标记：表示表格的大标题，该标记可以出现在<table> 之间的任意位置。

                           它对于搜索引擎的机器人记录信息十分重要。

<th> 标记：用于表示表格的行或者列的名称。

<th> 标记的scope 属性：专门用来区分行名称和列名称。如：<th  scope='row'> 或 <th  scope='col'>

<table>里还包含：<thead> 、<tbody> 、<tfoot> 标记。它们分别表示表格的表头，表正文，表脚。
             在打印网页内容的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现。

            （注意：在IE 中无效，但在 Firefox 有效）

 

 

经典的表格代码如下：

<html>
<head>
<title>财政报表</title>
<style type="text/css">
<!--
.datalist{
    border:1px solid #429fff;    /* 表格边框 */
    font-family:Arial;
    border-collapse:collapse;    /* 边框重叠 */
}
.datalist tr:hover{
    background-color:#c4e4ff;   /* 动态变色,IE6下无效！*/
}
.datalist caption{
    padding-top:3px;
    padding-bottom:2px;
    font:bold 1.1em;
    background-color:#f0f7ff;
    border:1px solid #429fff;    /* 表格标题边框 */
}
.datalist th{
    border:1px solid #429fff;    /* 行、列名称边框 */
    background-color:#d2e8ff;
    font-weight:bold;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
    text-align:center;
}
.datalist td{
    border:1px solid #429fff;    /* 单元格边框 */
    text-align:right;
    padding:4px;
}
-->
</style>
</head>
<body> 
<table class="datalist" summary="财政报表">
    <caption>财政报表 2005 - 2008</caption>
    <thead>
    <tr>
        <th>&nbsp;</th>
        <th scope="col">2005</th>
        <th scope="col">2006</th>
        <th scope="col">2007</th>
        <th scope="col">2008</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">拨款</th>
        <td>11,980</td>
        <td>12,650</td>
        <td>9,700</td>
        <td>10,600</td>
    </tr>
    <tr>
        <th scope="row">捐款</th>
        <td>4,780</td>
        <td>4,989</td>
        <td>6,700</td>
        <td>6,590</td>
    </tr>
    <tr>
        <th scope="row">投资</th>
        <td>8,000</td>
        <td>8,100</td>
        <td>8,760</td>
        <td>8,490</td>
    </tr>
    <tr>
        <th scope="row">募捐</th>
        <td>3,200</td>
        <td>3,120</td>
        <td>3,700</td>
        <td>4,210</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
       <td colspan="5">2008 年统计</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

显示效果如下：

财政报表 2005 - 2008
 2005200620072008
2008 年统计
拨款11,98012,6509,70010,600
捐款4,7804,9896,7006,590
投资8,0008,1008,7608,490
募捐3,2003,1203,7004,210
销售28,40027,10027,95029,050
杂费2,1001,9001,3001,760
总计58,46057,85958,11060,700

注意：

IE6 只有<a>标记支持:hover 伪类，其余标签都不支持！

并且<a>标记的伪类有顺序：a:link -> a:visited -> a:hover -> a:active

 

 

利用DOM 的方法和属性实现对表格的动态操作

 

 

A  利用DOM 动态添加一行

<script language="javascript">
window.οnlοad=function(){
    //插入一行
    var oTr = document.getElementById("mytable").insertRow(2);
    var aText = new Array();
    aText[0] = document.createTextNode("cell1的内容");
    aText[1] = document.createTextNode("cell2的内容");
    aText[2] = document.createTextNode("cell3的内容");
    aText[3] = document.createTextNode("cell4的内容");
    aText[4] = document.createTextNode("cell5的内容");
    for(var i=0;i<aText.length;i++){
        var oTd = oTr.insertCell(i);
        oTd.appendChild(aText[i]);
    }
}
</script>

 

 

B  利用DOM 修改单元格内容

<script language="javascript">
window.οnlοad=function(){
    var oTable = document.getElementById("mytable");
    //修改单元格内容
    oTable.rows[3].cells[4].innerHTML = "更改的内容";
}
</script>

 

 

C  利用DOM 删除一个单元格或一行

<script language="javascript">
window.οnlοad=function(){
    var oTable = document.getElementById("mytable");
    //删除一行，后面的行号自动补齐
    oTable.deleteRow(2);
    //删除一个单元格，后面的也自动补齐
    oTable.rows[2].deleteCell(1);
}
</script>

 

 

D  利用DOM 动态添加一列，并动态删除某行

<script language="javascript">
function myDelete(){
    var oTable = document.getElementById("mytable");
    //删除该行
    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
 
window.οnlοad=function(){
    var oTable = document.getElementById("mytable");
    var oTd;
    //动态添加delete链接
    for(var i=1;i<oTable.rows.length;i++){
        oTd = oTable.rows[i].insertCell(5);
        oTd.innerHTML = "<a href='#'>delete</a>";
        oTd.firstChild.onclick = myDelete; //添加删除事件
    }
}
</script>

 

 

E  利用DOM 动态删除某一列

<script language="javascript">
function deleteColumn(oTable,iNum){
    //自定义删除列函数，即每行删除相应单元格
    for(var i=0;i<oTable.rows.length;i++)
        oTable.rows[i].deleteCell(iNum);
}
 
window.οnlοad=function(){
    var oTable = document.getElementById("mytable");
    deleteColumn(oTable,2); //参数2:表示要删除的列号
}
</script>

完毕。

 

转载于:https://www.cnblogs.com/wwj-bky88/p/5532608.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/458452.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

创建字符串的方法

创建字符串的方法

//创建一个字符串常量 NSString *str"字符串"; //创建一个空的字符对象 NSString *str1[[NSString alloc]init];//实例方法 NSString *str2[NSString string];//类方法 //快速创建一个字符串 NSString *str3[[NSString alloc]initWithString:"字符串"];//实…
阅读更多...
DataReceivedEventHandler 委托 接收调用执行进程返回数据

DataReceivedEventHandler 委托 接收调用执行进程返回数据

https://msdn.microsoft.com/zh-cn/library/azure/system.diagnostics.datareceivedeventhandler备注创建 DataReceivedEventHandler 委托时&#xff0c;需要标识将处理该事件的方法。 若要将事件与事件处理程序关联&#xff0c;请将该委托的一个实例添加到事件中。 除非移除了…
阅读更多...
coreData

coreData

CoreData使用 创建步骤流程 第一步先创建.xcdatamodeld文件&#xff08;New File -> iOS -> Core Data ->Data Model&#xff09; 屏幕快照 2016-07-07 下午10.40.16.png名字虽然可以任意取&#xff0c;但最好还是取和自己存储数据库名字一样的名字。这样可读性更高些…
阅读更多...
命令行下mysql新建用户及分配权限

命令行下mysql新建用户及分配权限

创建用户&#xff1a; CREATE USER usernamehost IDENTIFIED BY password; 说明:username – 你将创建的用户名, host – 指定该用户在哪个主机上可以登陆,如果是本地用户可用localhost, 如 果想让该用户可以从任意远程主机登陆,可以使用通配符%. password – 该用户的登陆密…
阅读更多...
PetaPoco初体验（转）

PetaPoco初体验（转）

PetaPoco初体验&#xff08;转&#xff09; PetaPoco初体验&#xff08;转&#xff09;大部分转自&#xff1a; http://landyer.com/archives/138 PetaPoco C#微型ORM框架&#xff0c;基本无需配置&#xff0c;仅由单个cs文件构成&#xff0c;支持.net3.5 .net4.0。 截稿时Peta…
阅读更多...
iOS当中的设计模式

iOS当中的设计模式

代理模式 应用场景&#xff1a;当一个类的某些功能需要由别的类来实现&#xff0c;但是又不确定具体会是哪个类实现。 优势&#xff1a;解耦合 敏捷原则&#xff1a;开放-封闭原则 实例&#xff1a;tableview的 数据源delegate&#xff0c;通过和protocol的配合&#xff0c…
阅读更多...
c#的dllimport使用方法详解

c#的dllimport使用方法详解

DllImport是System.Runtime.InteropServices命名空间下的一个属性类&#xff0c;其功能是提供从非托管DLL&#xff08;托管/非托管是微软的.net framework中特有的概念&#xff0c;其中&#xff0c;非托管代码也叫本地&#xff08;native&#xff09;代码。与Java中的机制类似&…
阅读更多...
each函数循环数据表示列举，列举循环的时候添加dom的方法

each函数循环数据表示列举，列举循环的时候添加dom的方法

var dotBox $(#bannerNum);var item <li></li>;var itemSize $(#bannerBack p).length;var dotBoxWidth itemSize*24;$(#bannerBack p).each(function () { dotBox.append(<li></li>); dotBox.find(li).eq(0).addClass(current);});这里要根…
阅读更多...
使用lxml代替beautifulsoup

使用lxml代替beautifulsoup

深入使用过lxml的都会深深地喜欢上它,虽然BeautifulSoup很流行,但是深入了解lxml后,你就再也不会使用bs了 我觉得beautifulsoup不好用,速度也慢(虽然可以使用lxml作为解析器了).另外soup.find_all这种简直就是手工时代的操作(很多人使用find find_all这几个函数, 其实它们使用起…
阅读更多...
QT调用dll且进入DLL src code调试

QT调用dll且进入DLL src code调试

qt应用程序AA.exe调用qt写的BB.DLL时&#xff0c;进入BB.DLL src code调试 1、debug生成AA.exe 2、将debug生成的AA.exe整包debug folder放到BB.dll的debug生成的文件夹中 3、设置BB.dll这个project&#xff1a;项目----运行-----Executable中选择BB.dll的debug文件夹中的AA.ex…
阅读更多...
php安装编译时 configure: error: Cannot find OpenSSL's evp.h

php安装编译时 configure: error: Cannot find OpenSSL's evp.h

yum install error: protected multilib versions errorsudo yum downgrade openssl 降级sudo yum install openssl-devel 另外参考yum install -y ncurses-devel yum install openssl openssl-develyum install openssl openssl-devel --setoptprotected_multilibfalse ln -s …
阅读更多...
laravel项目中css样式表的背景图片不显示

laravel项目中css样式表的背景图片不显示

刚学laravel&#xff0c;遇到了很多坑&#xff0c;感觉laravel是挺强大的。 建好后台项目&#xff0c;奈何css样式表的背景图片不显示 .mainhd {background: url(../images/sky/body_bg.png) repeat-x 0px 0px; } 按理上面的写法没错&#xff0c;因为是从别的后台搬过来的&…
阅读更多...
KVC KVO

KVC KVO

1、KVC&#xff0c;即是指 NSKeyValueCoding&#xff0c;一个非正式的Protocol&#xff0c;提供一种机制来间接访问对象的属性。而不是通过调用Setter、Getter方法访问。KVO 就是基于 KVC 实现的关键技术之一。 Demo&#xff1a; interface myPerson : NSObject { …
阅读更多...
VS2010中 C++创建DLL图解

VS2010中 C++创建DLL图解

一、DLL的创建 创建项目: Win32->Win32项目&#xff0c;名称&#xff1a;MyDLL 选择DLL (D) ->完成. 1、新建头文件testdll.htestdll.h代码如下&#xff1a;#ifndef TestDll_H_#define TestDll_H_#ifdef MYLIBDLL#define MYLIBDLL extern "C" _declspec(dllimp…
阅读更多...
js理解 call( ) | apply( ) | caller( ) | callee( )

js理解 call( ) | apply( ) | caller( ) | callee( )

被js的这几个方法搞的this晕头转向&#xff0c;下定决心搞清楚&#xff1b;1、call( )和apply( ):两者都可以将函数绑定到另外一个对象上去运行&#xff0c;只是参数的传递方式不同&#xff0c;两者都可以使当前函数拥有另一个对象的属性和方法&#xff0c;实现js下的继承&…
阅读更多...
上传SVN丢失.a文件的问题

上传SVN丢失.a文件的问题

iOS项目上传到svn中&#xff0c;.a文件丢失 用Cornerstone工具&#xff0c;解决这个问题 1.打开Cornerstone左上角&#xff0c;点Cornerstone->Preferences->Subversion 2.Global lgnores下面有一个Use default global ignores 默认这里方框中会打钩&#xff08;这就是.a…
阅读更多...
使用公用表表达式的递归查询

使用公用表表达式的递归查询

微软从SQL2005起引入了CTE(Common Table Expression)以强化T-SQL。公用表表达式 (CTE) 具有一个重要的长处&#xff0c;那就是可以引用其自身。从而创建递归 CTE。递归 CTE 是一个反复运行初始 CTE 以返回数据子集直到获取完整结果集的公用表表达式。 当某个查询引用递归 CTE 时…
阅读更多...
C#委托实现C++ Dll中的回调函数

C#委托实现C++ Dll中的回调函数

from:https://blog.csdn.net/ferrycooper/article/details/63261771很多的Dll都是C和C写的&#xff0c;那么如果C#想要调用Dll中的函数怎么办&#xff0c;尤其是Dll函数其中一个参数是函数指针的&#xff0c;即里面有回掉函数的用C#怎么实现&#xff1f; C中的回掉函数在C#中有…
阅读更多...
安装Birt方法

安装Birt方法

安装BIRT 方法&#xff1a; 博客地址&#xff1a;http://www.mamicode.com/info-detail-850588.html 注意&#xff1a;在 Install new Software 中输入地址&#xff1a;http://download.eclipse.org/birt/update-site/4.2-interim 看好了 出来的四项要全部选中 &#xff0c;然后…
阅读更多...
iOS NSString和NSDate转换

iOS NSString和NSDate转换

后台返回的时间字符串不是标准的时间而是计算机时间的时候&#xff0c;我们需要将它们转换为标准时间&#xff0c;再进行转换。 //字符串转为时间&#xff0c;时间格式自己定 NSString * time "1501776000"; //时间字符串 NSInteger num [time integerValue]; …
阅读更多...
最新文章

Copyright @ 2022~2023