html table标签讲解
thead 标签 表示HTML表头
表格的头部thead,可以使用单独的样式定义表头,并且在打印时可以在分页的上部打印表头。
tbody 标签 表示HTML表体
浏览器显示表格时,通常是完全下载表格后,再全部显示,所以当表格很长时,可以使用tbody分段显示。
scope 属性 定义了行或列的表头
scope可以定义行或列的表头
取值
col - 定义列表头
row - 定义行表头
colgroup - 定义列组的表头信息,是column group的缩写
rowgroup - 定义行组的表头信息,是row group的缩写
summary 属性 代表HTML表格的摘要
表格不仅可以有标题caption,还可以有一个摘要说明summary。摘要是不会显示出来的,通常是给一些其它的工具使用的,比如盲人阅读器等。
关于caption和th标签可以参考下面的文章。
CSS网页布局实例:以合适的标签创建具有语义的表格
http://www./article.asp?id=720
由于摘要summary不会显示在浏览器中,所以可以尽可能的使摘要描述足够长,这样更有利于那些通过“听”的浏览者了解你的table表格。
看下面的HTML代码:
<table id="MrJin_a" summary="关于www.52css.ocm网站的一些数据">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">IP</th>
<th scope="col">PV</th>
<th scope="col">RANK</th>
</tr>
</thead>
<tbody>
<tr>
<td> 网站首页</td>
<td>5000</td>
<td>47800</td>
<td>A</td>
</tr>
<tr>
<td>DivCSS教程</td>
<td>4500</td>
<td>42000</td>
<td>A-</td>
</tr>
<tr>
<td>CSS布局实例</td>
<td>4900</td>
<td>46300</td>
<td>A+</td>
</tr>
<tr>
<td>CSS2.0教程</td>
<td>4200</td>
<td>41800</td>
<td>A+</td>
</tr>
</tbody>
</table>
HTML代码中没有任何表现的部分,不设置边距,定义表格边线,色彩等。所有表现的内容都分离到CSS里去。
本文作者: 如需转载请建立本站链接(http://www./),并且不得随意改动文章内容、保留此版权声明文本!
看下面的CSS代码:
body
{
line-height: 20px;
}
#MrJin_a
{
font-size: 12px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
#MrJin_a th
{
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#MrJin_a td
{
color: #666;
padding: 9px 8px 0px 8px;
}
#MrJin_a tbody tr:hover td
{
color: #03c;
}
js禁止右击与选择内容
<script>
function onKeyDown()
{
if ((event.keyCode==116)||(window.event.ctrlKey)||(window.event.shiftKey)||(event.keyCode==122))
{
event.keyCode=0;
event.returnValue=false;
}
}
</script>
<script>
function yxl() {
if(window.event.altKey)
{
window.event.returnValue=false;
}
}
document.onkeydown=yxl
</script>
<body onkeydown="onKeyDown()" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
原创:转请注明www.111cn.net
<script>
var Acc={
value:0,/* 缓存权限结果值 */
add:function(n){/* 添加一个权限 */
if(this.has(n))return this;/* 避免重复添加 */
return this.value+=1<<n,this;
},
remove:function(n){/* 删除一个权限 */
if(!this.has(n))return this;/* 不存在此权限时跳过 */
return this.value-=1<<n,this;
},
has:function(opID){/* 判断是否包含指定权限 */
return (this.value&(1<<opID))==1<<opID;
},
all:function(){/* 列举全部权限 */
for(var i=0, arr=[];i<this.value;i++){
if(1<<i>this.value)break;/* 中断不存在的ID */
if(this.has(i))arr.push(i);
};
return arr;
}
}
var $=Acc;
var ps='浏览,回复,编辑,屏蔽,删除,添加,管理,申诉,举报,其它'.split(',');
$.add(0);//添加浏览权限
$.add(3);//添加屏蔽权限
$.add(4);//添加删除权限
$.add(6);//添加管理权限
$.remove(0);//移除浏览权限
$.remove(3);//移除屏蔽权限
//$.remove(4);//移除删除权限
var r=$.all(), rc=[];
for(var i=0;i<r.length;i++)
{//把权限ID转换为字符串
rc.push(ps[r[i]]||'其它')
}
alert('您拥有以下权限:nn'+rc.join('nn'));
//-->
</script>
怎么用js获取客户端的信息?今天我发现这样一篇文章便可以读取用户很多的相关信息就像google一样,判断用广告是否被点击等.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET
7.1">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<script id=clientEventHandlersJS language=javascript>
<!--
function Button2_onclick() {//CPU 信息
var locator = new ActiveXObject ("WbemScripting.SWbemLocator");
var service = locator.ConnectServer(".");
var properties = service.ExecQuery("SELECT * FROM Win32_Processor");
var e = new Enumerator (properties);
document.write("<table border=1>");
for (;!e.atEnd();e.moveNext ())
{
var p = e.item ();
document.write("<tr>");
document.write("<td>" + p.Caption + "</td>");
document.write("<td>" + p.DeviceID + "</td>");
document.write("<td>" + p.Name + "</td>");
document.write("<td>" + p.CpuStatus + "</td>");
document.write("<td>" + p.Availability + "</td>");
document.write("<td>" + p.Level + "</td>");
document.write("<td>" + p.ProcessorID + "</td>");
document.write("<td>" + p.SystemName + "</td>");
document.write("<td>" + p.ProcessorType + "</td>");
document.write("</tr>");
}
document.write("</table>");
}
function Button1_onclick() {//软盘信息
var locator = new ActiveXObject ("WbemScripting.SWbemLocator");
var service = locator.ConnectServer(".");
var properties = service.ExecQuery("SELECT * FROM Win32_FloppyDrive");
var e = new Enumerator (properties);
document.write("<table border=1>");
for (;!e.atEnd();e.moveNext ())
{
var p = e.item ();
document.write("<tr>");
document.write("<td>" + p.Description + "</td>");
document.write("<td>" + p.DeviceID + "</td>");
document.write("<td>" + p.Status + "</td>");
document.write("<td>" + p.Manufacuturer + "</td>");
document.write("</tr>");
}
document.write("</table>");
}
function Button1_onclick() {//CD-ROM 信息
var locator = new ActiveXObject ("WbemScripting.SWbemLocator");
var service = locator.ConnectServer(".");
var properties = service.ExecQuery("SELECT * FROM Win32_CDROMDrive");
var e = new Enumerator (properties);
document.write("<table border=1>");
for (;!e.atEnd();e.moveNext ())
{
var p = e.item ();
document.write("<tr>");
document.write("<td>" + p.Caption + "</td>");
document.write("<td>" + p.Description + "</td>");
document.write("<td>" + p.Drive + "</td>");
document.write("<td>" + p.Status + "</td>");
document.write("<td>" + p.MediaLoaded + "</td>");
document.write("</tr>");
}
document.write("</table>");
}
function Button1_onclick() {//键盘信息 息
var locator = new ActiveXObject ("WbemScripting.SWbemLocator");
var service = locator.ConnectServer(".");
var properties = service.ExecQuery("SELECT * FROM Win32_Keyboard");
var e = new Enumerator (properties);
document.write("<table border=1>");
for (;!e.atEnd();e.moveNext ())
{
var p = e.item ();
document.write("<tr>");
document.write("<td>" + p.Description + "</td>");
document.write("<td>" + p.Name + "</td>");
document.write("<td>" + p.Status + "</td>");
document.write("</tr>");
}
document.write("</table>");
}
function Button1_onclick() {//主板信息
var locator = new ActiveXObject ("WbemScripting.SWbemLocator");
var service = locator.ConnectServer(".");
var properties = service.ExecQuery("SELECT * FROM Win32_BaseBoard");
var e = new Enumerator (properties);
document.write("<table border=1>");
for (;!e.atEnd();e.moveNext ())
{
var p = e.item ();
document.write("<tr>");
document.write("<td>" + p.HostingBoard + "</td>");
document.write("<td>" + p.Manufacturer + "</td>");
document.write("<td>" + p.PoweredOn + "</td>");
document.write("<td>" + p.Product + "</td>");
document.write("<td>" + p.SerialNumber + "</td>");
document.write("<td>" + p.Version + "</td>");
document.write("</tr>");
}
document.write("</table>");
}
//-->
</script>
</head>
<body>
<INPUT id="Button1" type="button" value="Button"
name="Button1" language=javascript onclick="return Button1_onclick()">
</body>
</html>
function emails() {
if (helpstat) {
alert("Email 标记\n插入 Email 超级链接\n用法1: [email]nobody@domain.com[/email]\n用法2: [email=nobody@domain.com]佚名[/email]");
} else if (basic) {
AddTxt="[email][/email]";
AddText(AddTxt);
} else {
txt2=prompt("链接显示的文字.\n如果为空,那么将只显示你的 Email 地址","");
if (txt2!=null) {
txt=prompt("Email 地址.","name@domain.com");
if (txt!=null) {
if (txt2=="") {
AddTxt="[email]"+txt+"[/email]";
} else {
AddTxt="[email="+txt+"]"+txt2;
AddText(AddTxt);
AddTxt="[/email]";
}
AddText(AddTxt);
}
}
}
}
相关文章
- 这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- PHP去除html、css样式、js格式的方法很多,但发现,它们基本都有一个弊端:空格往往清除不了 经过不断的研究,最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 1、先讲讲JQuery的概念,JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的一些代...2014-05-31
- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
IE6-IE9中tbody的innerHTML不能赋值的解决方法
IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </head> <body style="height:3...2014-06-07- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要介绍了el-table树形表格表单验证(列表生成序号),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
- 这篇文章主要介绍了C# 遍历datatable字段名和value的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-19
- 将List类型转换成DataTable的通用方法,大家参考使用吧...2020-06-25
- 这篇文章主要介绍了C#获取变更过的DataTable记录的实现方法,对初学者很有学习借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C# 如何设置label(标签)控件的背景颜色为透明,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下...2020-12-08
vue element table中自定义一些input的验证操作
这篇文章主要介绍了vue element table中自定义一些input的验证操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18Mysql中 show table status 获取表信息的方法
这篇文章主要介绍了Mysql中 show table status 获取表信息的方法的相关资料,需要的朋友可以参考下...2016-03-12matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
这篇文章主要介绍了matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel()),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-23- 这篇文章主要介绍了C#从DataTable获取数据的方法,涉及C#操作DataTable的相关技巧,需要的朋友可以参考下...2020-06-25
- 在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会,下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别,需要的朋友参考下...2016-02-21
- 这篇文章主要介绍了C#删除UL LI中指定标签里文字的方法,涉及C#针对页面HTML元素进行正则匹配与替换的相关操作技巧,需要的朋友可以参考下...2020-06-25