网页的表格怎么做的?

JavaScript08

网页的表格怎么做的?,第1张

提供几种代码:(每种代码,保存成html格式。)

第一种(CSS+JS):

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<style>

.t1 {background-color:#336699text-align:center}

.t2 {background-color:#ffcc00text-align:center}

</style>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<table id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

</table>

<script Language="Javascript">

for (i=0i<table1.rows.lengthi++) {

(i%2==0)?(table1.rows(i).className = "t1"):(table1.rows(i).className = "t2")

}

</script>

</body>

</html>

第二种(CSS):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style type="text/css">

table{

width:100%

}

.t1{

background:#ff6600

color:black

}

.t2{

background:#336699

color:white

}

</style>

</HEAD>

<BODY>

<TABLE cellpadding="0" cellspacing="0">

<TR class="t1">

<TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>

</TR>

<TR class="t2">

<TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>

</TR>

<TR class="t1">

<TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>

</TR>

<TR class="t2">

<TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>

</TR>

<TR class="t1">

<TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>

</TR>

<TR class="t2">

<TD>2</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD>

</TR>

</TABLE>

</BODY>

</HTML>

第三种(CSS+JS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>表格隔行换色</title>

<style type="text/css" media="screen">

<!-- /* PR-CSS */

table {border-collapse:collapseborder:solid #999border-width:1px 0 0 1px}

table td {border:solid #999border-width:0 1px 1px 0}

tr.t1 td {background-color:#fff}/* 第一行的背景色 */

tr.t2 td {background-color:#eee}/* 第二行的背景色 */

tr.t3 td {background-color:#ccc}/* 鼠标经过时的背景色 */

-->

</style>

</head>

<body>

<table id="tab">

<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>

</table>

<script type="text/javascript">

<!--

var Ptr=document.getElementById("tab").getElementsByTagName("tr")

function $() {

for (i=1i<Ptr.length+1i++) {

Ptr[i-1].className = (i%2>0)?"t1":"t2"

}

}

window.onload=$

for(var i=0i<Ptr.lengthi++) {

Ptr[i].onmouseover=function(){

this.tmpClass=this.className

this.className = "t3"

}

Ptr[i].onmouseout=function(){

this.className=this.tmpClass

}

}

//-->

</script>

</body>

</html>