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，一经查实，立即删除！

相关文章

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;但最好还是取和自己存储数据库名字一样的名字。这样可读性更高些…
阅读更多...
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中的机制类似&…
阅读更多...
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…
阅读更多...
使用公用表表达式的递归查询

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

微软从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#中有…
阅读更多...
15个最好的HTML5前端响应式框架(2014)

15个最好的HTML5前端响应式框架(2014)

文中的多个框架基于SASS创建&#xff0c;SCSS是一种比LESS更简洁的样式表编程语言&#xff0c;它能够编绎成CSS&#xff0c;可复用CSS代码&#xff0c;声明变量&#xff0c;甚至是函数&#xff0c;类Ruby/Python的语法。參见&#xff1a; LESS vs SASS&#xff1f;选择哪种CSS样…
阅读更多...
【转载】Direct3D基础知识

【转载】Direct3D基础知识

原文&#xff1a;Direct3D基础知识 重新从头开始学习DX,以前太急于求成了,很多基础知识都没掌握就开始写程序了,结果出了问题很难解决.1. D3D体系结构D3D与GDI处与同一层次,区别在于,D3D可以使用HAL(Hardware Abstraction Layer)通过DDI来访问图形硬件,充分发挥硬件性能.…
阅读更多...
关于Xcode隐藏打印的logs的方法

关于Xcode隐藏打印的logs的方法

https://www.cnblogs.com/jukaiit/p/5881062.html 第一步&#xff1a; 第二步&#xff1a; 第三步&#xff1a; 添加参数&#xff1a; Name &#xff1a;OS_ACTIVITY_MODE Value : disable
阅读更多...
指针函数与函数指针的区别

指针函数与函数指针的区别

首先它们之间的定义&#xff1a;1、指针函数是指带指针的函数&#xff0c;即本质是一个函数&#xff0c;函数返回类型是某一类型的指针。 类型标识符 *函数名(参数表)int *f(x&#xff0c;y);首先它是一个函数&#xff0c;只不过这个函数的返回值是一个地址值。函数返回值必须用…
阅读更多...
C++走向远洋——63（项目二2、两个成员的类模板）

C++走向远洋——63（项目二2、两个成员的类模板）

*/ * Copyright (c) 2016&#xff0c;烟台大学计算机与控制工程学院 * All rights reserved. * 文件名&#xff1a;text.cpp * 作者&#xff1a;常轩 * 微信公众号&#xff1a;Worldhello * 完成日期&#xff1a;2016年6月4日 * 版本号&#xff1a;V1.0 * 问题描述&…
阅读更多...
iOS 抓包工具 charles工具

iOS 抓包工具 charles工具

在Charles官网下载最新的 安装包 在电脑上安装完成之后&#xff0c;以 注册码 Registered Name: https://zhile.io License Key: 48891cf209c6d32bf4 进行注册即可完成 在手机上面设置代理&#xff1a;输入电脑的网络IP以及端口号 以下为查找的步骤&#xff1a; 在手机上手…
阅读更多...
写一个Android输入法01——最简步骤

写一个Android输入法01——最简步骤

本文演示用Android Studio写一个最简单的输入法。界面和交互都很简陋&#xff0c;只为剔肉留骨&#xff0c;彰显写一个Android输入法的要点。 1、打开Android Studio创建项目&#xff0c;该项目和普通APP的不同之处在于它不需要添加任何Activity&#xff1a;我给该输入法命名为…
阅读更多...
谈谈自己对于Auth2.0的见解

谈谈自己对于Auth2.0的见解

Auth的原理网上有很多&#xff0c;我这里就不在赘述了。 这里有张时序图我个人觉得是比较合理而且直观的&#xff0c;&#xff08;感谢这篇博文&#xff1a;http://justcoding.iteye.com/blog/1950270&#xff09; 参照这个流程&#xff0c;模拟了下部分代码&#xff0c;当然是…
阅读更多...
iPad开发--QQ空间,处理横竖屏布局,实现子控件中的代理

iPad开发--QQ空间,处理横竖屏布局,实现子控件中的代理

一.主界面横竖屏效果图 二.主界面加载, 初始化Dock(红色框的控件),判断程序启动时的屏幕方向.调用自己- (void)transitionToLandScape:(BOOL)isLandScape;方法,通知子控件屏幕方向改变,将此事件一直传递下去程序运行过程中屏幕方向改变会调用- (void)viewWillTransitionToSize:…
阅读更多...
C++ Vector 汇总

C++ Vector 汇总

C vector erase函数最近使用了顺序容器的删除元素操作&#xff0c;特此记录下该函数的注意事项。 在Cprimer中对c.erase(p) 这样解释的&#xff1a;c.erase(p) 删除迭代器p所指向的元素&#xff0c;返回一个指向被删元素之后元素的迭代器&#xff0c;若p指向尾元素&#xff…
阅读更多...
vNext之旅（2）：net451、dotnet5.4、dnx451、dnxcore50都是什么鬼

vNext之旅（2）：net451、dotnet5.4、dnx451、dnxcore50都是什么鬼

继上次”vNext之旅&#xff08;1&#xff09;&#xff1a;从概念和基础开始”之后再次学习vNext重新遇到了弄不懂的事情&#xff0c;花了一些时间学习&#xff0c;今天来分享一下&#xff0c;为后人节省些时间。起因 在用vNext造轮子——框架的时候引入“Microsoft.Dnx.Runtime…
阅读更多...
C++中模板使用详解

C++中模板使用详解

转自&#xff1a;http://www.360doc.com/content/09/0403/17/799_3011262.shtml 1. 模板的概念。 我们已经学过重载(Overloading)&#xff0c;对重载函数而言,C的检查机制能通过函数参数的不同及所属类的不同。正确的调用重载函数。例如&#xff0c;为求两个数的最大值&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023