您的位置：首页 > 编程技术 > html  >  html table标签讲解

html table标签讲解

 更新时间：2016年9月20日 19:02  点击：1813

　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);        
   }
  }
 }
}

[!--infotagslink--]

相关文章