border表示表格的边框属性
<style type="text/css">
.tableBorder{
border:1px solid red;
}
</style>
彩色外边框的表格
border-botton-color:#00FFFF;下边框颜色
border-left-color:#FFFF00;左边框颜色
border-top-color:#FF0000;上边框颜色
border-right-color:#00FF00;右边框颜色
border-style:double;边框样式
cellspacing单元格之间相隔的距离
cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>统一样式页面</title>
<style type="text/css">
.tableBorder{
border-botton-color:#00FFFF;
border-left-color:#FFFF00;
border-top-color:#FF0000;
border-right-color:#00FF00;
border-style:solid;
}
</style>
</head>
<body>
<from action="">
<table align="center" class="tableBorder" width="500" cellpadding="0" cellspacing="10">
<tr>
<td>用户名:</td><td><input type="text" name="name"></td>
</tr>
<tr>
<td>密码:</td><td><input type="password" name="pwd"></td>
</tr>
<tr>
<td>确认密码</td><td><input type="password" name="pwd1"></td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="radio" name="sex" value="m">男
<input type="radio" name="sex" value="f">女
</td>
</tr>
<tr>
<td>年龄</td><td><input type="text" name="age"></td>
</tr>
<tr>
<td><input class="botton1" type="submit" value="注册"></td>
<td><input class="botton2" type="button" value="重置"></td>
</tr>
</table>
</from>
</body>
</html>
单元格的边框变色
onMouseOver鼠标经过事件
onMouseOut鼠标移出事件
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<title>测试表格样式</title>
<script>
function over(id) {
document.getElementById(id).style.borderLeftColor = "green";
document.getElementById(id).style.borderRightColor = "green";
document.getElementById(id).style.borderTopColor = "green";
document.getElementById(id).style.borderBottomColor = "green";
}
function out(id) {
document.getElementById(id).style.borderLeftColor = "pink";
document.getElementById(id).style.borderRightColor = "pink";
document.getElementById(id).style.borderTopColor = "pink";
document.getElementById(id).style.borderBottomColor = "pink";
}
</script>
</head>
<body>
<form>
<table align="center" width="643" border="2" >
<tr>
<td width="60" id="Ttd0" onmouseover="over('Ttd0')" onmouseout="out('Ttd0')">用户名：</td>
<td><input type="text" name="name" />
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="pwd1" /></td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" name="age" />
</td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="m" />男<input
type="radio" name="sex" value="f" checked />女</td>
</tr>
<tr>
<td><input type="submit" value="注册" /></td>
<td><input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
表格外边框具有霓虹灯效果
通过JavaScript中提供的setTimeout()方法
setTimeout(funtion，milliseconds)
function:要调用的自定义函数名称
milliseconds：设置超时时间，以毫秒为单位
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body "change()">
<table id="table1" border="5">
<tr><td align="center">容易</td></tr>
<tr><td align="center"><pre>困难</pre></td></tr>
</table>
<script language="javascript">
var i=0;
var Color=new Array("#FFFF00","#FF66FF","#FF3300","#33FF00","#0000FF");
function change(){
if(i>Color.length-1)
i=0;//如果i的值大于数组的元素数，将i的值改为0
table1.style.borderColor=Color[i];//改变边框颜色
i=i+1;
setTimeout("change()",500);//每隔500毫秒调用一次
}
</script>
</body>
</html>
表格经过表格时，显示提示信息
通过设置表格中的title属性
<td title="显示提示信息">
<a href="#">表格信息</a>
<td>