網頁 滾屏特效,用flash做背景,定時滾動,ccs背景程式碼效果語法,使用CSS處理表格邊框樣式化
別 都做了這麼多天的班級網站呢.也學到了不少的東東.下面這些對做網站很有用.不妨看看吧.XIXI
<marquee behavior="scroll" direction="up" width="200" height="150" loop="-1" scrollamount="1" scrolldelay="1" style="font:12px;" onMouseOver="this.stop();" onMouseOut="this.start();">
滑鼠移到圖片上後頁面自動上滾或下滾
第一步：把如下程式碼加入到<head>區域中
<style type="text/css">
#item {position:absolute; visibility:hidden; left:0px}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var isNS=(document.layers);
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var w_x, w_y, item, okscroll=false, godown;
function init(){
item=eval('document.'+_all+'item'+_style);
getwindowsize();
item.visibility=_visible;
scrollpage();
}
function getwindowsize() {
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
w_y=(isNS)? window.innerHeight : document.body.clientHeight;
(isNS)? item.clip.width=42: item.width=42;
(isNS)? item.clip.height=20 : item.height=20;
moveitem();
}
function resizeNS() {
setTimeout('document.location.reload()',400);
}
function moveitem() {
if (isNS) {
item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
}else{
item.pixelLeft=document.body.scrollLeft+w_x-70;
item.pixelTop=w_y+document.body.scrollTop-50;
}
}
window.onload=init;
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
function scrollpage() {
status = '';
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
} else {
(isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
}
}
moveitem();
setTimeout('scrollpage()', 40);
}
// End -->
</script>
第二步：把如下程式碼加入到<body>區域中
<div id="item">
<a href="javascript:void(0)" onMouseover="okscroll=true; godown=true"
onMouseout="okscroll=false"><img src="
onMouseover="okscroll=true; godown=false" onMouseout="okscroll=false"><img src="http://www.jojoo.net/include/2.jpg"
border="0"></a>
</div>
推薦理由：
在網上經常可以看到自動滾屏的網頁，是不是有點心動呢？這篇文章就能帶你由淺入深地去學習這個很實用的網頁特效。
製作步驟：
滾屏特效之基礎篇：
將下面這段程式碼放入你網頁的末尾（注意不能是開頭，那樣就看不到效果了）：
language="JavaScript">
window.scroll(0,100);
</SCRIPT>
如果這個網頁中出現滾動條的話，那麼開啟時你就會發現：滾動條不像平時處於最頂端，而是距頂端有一小段的距離。這就是要實現滾屏的基礎：用window物件的scroll方法改變滾動條的位置。其中的第一個引數為水平滾動條左端的位置(單位px)，第二個為垂直滾動條頂端的位置(單位px)。
如果我們把這兩個引數有規則的動態改變，那不就能實現滾屏了嗎？比如使用簡單的
FOR 迴圈，把下面這段程式碼加到網頁的最後：
language="JavaScript">
for (I=1; I<=1000; I++){
window.scroll(0,I);
//將 for 迴圈中的 I 的值代入scroll 方法的第二個引數中來改變垂直滾動條的位置
}
</SCRIPT>
看到了嗎？滾動條是不是在動。由於我們只需要網頁的垂直滾動，因此就只改變第二個即垂直滾動條的引數，而將第一個引數設為0。
滾屏特效之進階篇：
上面的程式碼雖然能夠實現滾屏，但是速度好像太快了點，我可不是能夠一目十行的人:)。那就們就需對上面的程式碼進行改進：
language="JavaScript">
var timer;
var y = 0;
//定義一個滾屏的函式
function scrollwindow(){
window.scroll(0,y);
y++;
timer=setTimeout("scrollwindow()", 30);
//每隔30毫秒執行一次 scrollwindow()函式，以此來實現引數 y 的遞增
}
</SCRIPT>
這段程式碼就可以放到網頁的任何位置了，不過建議放在<head>和 </head>之間。再用 <body onload="scrollwindow()">替換 <body>。這次是不是慢多了呢？而且你可以將timer=setTimeout("scrollwindow()", 30) 中的30換成其它數字，就能改變速度了，數字越小速度越快。
滾屏特效之高階篇：
速度我們是能夠控制了，而且無論多長的網頁都能夠從頭到尾“將滾屏進行到底”。但是您發覺沒有？就是一進入網頁就立即開始滾動，這樣就可能錯過網頁項端的精彩內容哦。還有就是滾屏中或滾屏後我們都不能改變滾動條的位置，這就不像在看網頁了，到有點像看電視。我們還應當設計滾動：
language="JavaScript">
var currentpos,timer;
//開始滾動函式，執行後網頁開始滾動
function initialize(){
timer = setTimeout("scrollwindow()",30);
//每隔30毫秒執行一次 scrollwindow() 函式
}
//停止滾動函式，執行該函式後停止網頁滾動
function stopscroll(){
clearInterval(timer);
//清除setTimeout函式的控制代碼 timer，停止執行scrollwindow() 函式
}
function scrollwindow(){
currentpos = document.body.scrollTop;
//得到當前滾動條頂端位置，請注意 scrollTop 的大小寫
window.scroll(0,++currentpos);
//將currentpos累加的值賦給scroll方法的第二個引數
if (currentpos != document.body.scrollTop){
stopscroll();
//如果 currentpos的值不等於當前滾動條的位置，則停止網頁滾動
}else{
initialize();
//否則繼續網頁的滾動
}
}
document.ondblclick = initialize;
//雙擊左鍵執行initialize,網頁開始滾動,注意這裡不同於一般調動函式的方法，這裡函式名後不能有括號
document.onmousedown = stopscroll;
//單擊左鍵停止網頁的滾動
</SCRIPT>
這段程式碼就能實現，瀏覽者通過雙擊滑鼠來開始滾屏，並通過單擊來停止，而且滾動過程中，您可以隨意拖動滾動條。當然了，您也可以單擊某個按鈕來開始滾屏，將這句加入網頁適當位置：<input type="button" value="單擊這兒開始滾屏"onclick="javascript:initialize()"> 就能實現。
滾屏特效之終極篇：
每個人的瀏覽速度都不同，我們到底將滾屏的速度設定成多快好呢？還是留給瀏覽者自己決定吧。用過“ReadBook”的朋友都知道，它的滑鼠控制的無級變速滾屏非常人性化。其實我們網頁中也能實現：
language="JavaScript">
var mousey, currentpos, timer;
function currentmousey() {
mousey = window.event.y;
//得到滑鼠在網頁中的Y座標，請注意 event 的大小寫
}
function initialize(){
timer = setTimeout("scrollwindow()",mousey);
//用滑鼠在網頁中的Y座標來決定執行scrollwindow()函式的頻率，從而動態改變網頁的滾動速度
}
function stopscroll(){
clearInterval(timer);
}
function scrollwindow(){
currentpos = document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop){
stopscroll();
}else{
initialize();
}
}
document.ondblclick = initialize;
document.onmousedown = stopscroll;
document.onmousemove = currentmousey;
//當在網頁上觸了滑鼠的移動事件，就執行currentmousey函式
何用FLASH做網頁背景?這的確是一個難題.因為FLASH的級別最高。不過，同樣是有辦法的。
1、在網頁中插入一個表格，設定其寬度、高度為100%，再插入FLASH的SWF檔案；
2、設定SWF檔案寬度和高度均為100%，點選其paramenters，引數設定為wmode，變數設定為transparent，功能為設定一個有透明效果的SWF；
3、在SWF檔案上插入一個層，大小不要超過SWF的大小，在層上寫上字，大功告成！
最近在改版公司的網站時需要使用Flash檔案，同時網頁上還有個漂浮的圖片，結果發現漂浮的圖片一到Flash處就被遮擋住了，於是開始想辦法解決這一問題。研究了一下Flash的相關屬性的程式碼，發現異常簡單，在Flash程式碼中加入一行“<param name="wmode" value="transparent">”即可。同時發現瞭如何將Flash檔案作為網頁背景的方法，留此備忘。
方法一：
1、在網頁中插入一個表格，設定其寬度、高度為100%，再插入FLASH的SWF檔案；
2、設定SWF檔案寬度和高度均為100%，新增屬性程式碼“<param name="wmode" value="transparent">”；
3、在SWF檔案上插入一個層，大小不要超過SWF的大小，在層上寫上字，大功告成！
方法二（來自百度搜索）：
在網頁製作中，flash是不能直接作為網頁的背景的。Frontpage沒有相關的設定可以直接操作。因此，我們需要換一個策略：大家是否還記得flash中“層”的概念，我們在這裡就要運用到這個概念。在我們的網頁層上面在新建一個層。在這個層中插入flash，但注意，插入flash後，會遮擋下面網頁層相應的位置，因此，我們需要將flash透明化，以達到讓網頁層的內容正常顯示的目的。而本質是，插有flash的層是在網頁層的上面的。“背景”，是相對而言的。以下是html程式碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 2</title>
</head>
<body>
//這一段就是flash做網頁背景，實際上是建了一個層，又將flash透明化。而本質是這個層實際上在其他層之上，但由於flash透明化了，因此看上去像背景。
<div id="Layer1" style="position:absolute; left:0; top:0; width:700; height:500; z-index:1">
<div align="center">
<embed src="fish.swf" width="700" height="500" wmode="transparent">
</div></div>
//開始就是常規網頁製作的程式碼。
</body>
</html>
定時滾動
<script>
var scrollerwidth=200
var scrollerheight=300
var scrollerbgcolor='#FFFFFF'
//3000 miliseconds=9 seconds
var pausebetweenimages=6000
var slideimages=new Array()
slideimages[0]='<img src=9.jpg width=110><img src=ghost/9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110>'
slideimages[1]='<img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110>'
slideimages[2]='<img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110>'
slideimages[3]='<img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110>'
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=4){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=4
setTimeout("move1(tlayer)",100)
}
else{
tlayer.top=scrollerheight
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=4){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=4
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=4){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2)",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=4
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=4){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2)",pausebetweenimages)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=4
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'
}
}
window.onload=startscroll
if (document.layers)
document.write(slideimages[0])
if (document.layers)
document.write(slideimages[1])
if (document.layers)
document.write(slideimages[0])
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</script>
ccs背景程式碼效果語法,使用CSS處理表格邊框樣式化
程式碼：<style type=text/css>
body{
background:url(背景圖片地址) #ffffff no-repeat scroll!important;
}
</style>
程式碼說明：
將括號裡面的紅色的背景圖片地址替換為你所要顯示的背景圖片地址；
#ffffff表示背景顏色為#ffffff(白色)，也可修改為你想要的背景顏色程式碼（相關顏色程式碼見http://alab.bokee.com/viewdiary.12101845.html），當然也可以不要；
no-repeat表示圖片不平鋪，平鋪改為repeat；
scroll表示圖片隨物件滾動，圖片固定不滾動改為fixed；
!important表示這裡的設定優先，不要將它去掉，否則有可能會引起衝突，造成顯示不正常！
示例：
<STYLE type=text/css>
body{
background:url("http://images.blogcn.com/2006/2/14/6/rainbow827,2006021410459.jpg") no-repeat scroll!important;
}
</STYLE>
ccs背景程式碼效果語法
1、css背景：background-repeat
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y?
取值：
repeat? : 預設值。背景影象在縱向和橫向上平鋪?
no-repeat? : 背景影象不平鋪?
repeat-x? : 背景影象僅在橫向上平鋪?
repeat-y? : 背景影象僅在縱向上平鋪
說明：
設定或檢索物件的背景影象是否及如何鋪排。必須先指定物件的背景影象( background-image )。
此屬性對於 currentstyle 物件而言是隻讀的。對於其他物件而言是可讀寫的。
對應的指令碼特性為 backgroundrepeat 。?
2、css背景：background-position
語法：
background-position : length
background-position : position
取值：
length? : 百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱 長度單位??
position? : top | center | bottom | left | center | right?
說明：
設定或檢索物件的背景影象位置。必須先指定 background-image 屬性。
該屬性定位不受物件的補丁屬性( padding )設定影響。
預設值為： 0% 0% 。此時背景圖片將被定位於物件不包括補丁( padding )的內容區域的左上角。
如果只指定了一個值，該值將用於橫座標。縱座標將預設為 50% 。如果指定了兩個值，第二個值將用於縱座標。
如果設定值為 right center ，因為 right 作為橫座標值將會覆蓋 center 值，所以背景圖片將被居右定位。
對應的指令碼特性為 backgroundposition 。
?
3、css背景：background-attachment
語法：
background-attachment : scroll?/ fixed
取值：
scroll ?: ?預設值。背景影象是隨物件內容滾動
fixed ?: ?背景影象固定
說明：
設定或檢索背景影象是隨物件內容滾動還是固定的。
此屬性對於 currentstyle 物件而言是隻讀的。對於其他物件而言是可讀寫的。
請參閱 bgproperties 屬性(特性)。對應的指令碼特性為 backgroundattachment
?
4、css背景：background-color
語法：
background-color : transparent | color?
取值：
transparent : 預設值。背景色透明?
color : 指定顏色。
說明：
設定或檢索物件的背景顏色。
當背景顏色與背景影象( background-image )都被設定了時，背景圖片將覆蓋於背景顏色之上。
此屬性對於 currentstyle 物件而言是隻讀的。對於其他物件而言是可讀寫的。
對應的指令碼特性為 backgroundcolor 。
以例子說明一下語法的用法語法應該加在程式碼的什麼地方。
先回到我們的背景ccs程式碼上，語法所加入的地方是在
background-image: url(圖片地址連線);
以下
}
以上的任何地方
意思為：檢索物件的背景影象位置，指定 background-image 屬性
?
下面，我們將以例子說明語法的具體用法
例子目標：製作一個不平鋪，不滾動，圖片範圍外填充為黑色的ccs背景
例子材料圖片為：
?
仔細看看圖片的畫素、寬度都不適合用在ccs背景圖片製作
如果直接用上面的程式碼，效果是平鋪圖片顯示不完整，很不美觀。
效果如下面的帖子
為了解決以上問題，我們試著利用以上的語法
現在開始編寫我們的程式碼
?
首先，對於此類寬度畫素不足1024的非背景性質圖片，我們第一個要解決的，就是平鋪的問題
我們開到程式碼background-repeat 的作用中有這個效果
所以可以選擇在background-image下加進此程式碼
取值為no-repeat（不平鋪）
即：background-repeat :no-repeat
?
接著，我們試著把圖片放到中間，
選擇程式碼background-position
取值為 top（以圖片最高處對起介面最高處居中）
即：background-position:top
?
圖片居中後,我們發現一個問題,就是狗論壇原背景色為白色
於是我們利用background-color程式碼把圖片以外的範圍填充顏色
我們的圖片是黑色,所以可以選擇填充值為:black,或者黑色的程式碼#000000
即：background-color:black
?
最後,我們把背景固定,不讓它隨帖子往下拖動而滾動
選擇background-attachment程式碼
取值為:fixed (固定)
即：background-attachment:fixed
?
我們把所有的程式碼綜合之後得到以下程式碼:
===================================================
<style type=text/css>?
<!--
body {
background-image: url（http://images.blogcn.com/2006/2/14/6/rainbow827,2006021410459.jpg);
background-repeat: no-repeat;
background-position:top;
background-attachment: fixed;
background-color:black
}
-->
使用CSS處理表格邊框樣式化
在以前的web開發欄目中，我介紹了不少處理HTML表格的方法，儘管現在使用表格來佈局網頁的方法已經不再時髦了，但是您依然可以使用表格來顯示錶列資料。
顯示和樣式化表格的方法有很多種，在這篇文章中，我將介紹使用CSS對錶格邊框進行樣式化的方法。
連結
CSS2表格模型是基於HTML 4.01表格模型的。表格包含了一個可選的錨標記和單元格以及資料行，表格模型包含以下的元素：表格、錨、資料行、資料行組、資料列、資料列組和單元格。這篇文章將集中講解表格中各個元素的邊框處理方法。
邊框
根據不同的需求，您可以對錶格和單元格應用不同的邊框。您可以定義整個表格的邊框也可以對單獨的單元格分別進行定義。CSS的邊框屬性可以指定邊框的大小以及顏色和型別。以下的程式碼定義了寬度為5個畫素的黑色實線邊框：
TABLE { 5px solid black; }
除此以外，您還可以使用相同的語法為表格中單獨的單元格分別指定邊框屬性。您可以使用以下的屬性值來定義邊框型別：
l none: 指定表格沒有邊框，所以邊框寬度為0。
l dotted: 由點線組成的表格邊框。
l dashed: 由虛線組成的表格邊框。
l solid: 由實線組成的表格邊框。
l Double: 由雙實線組成的表格邊框。
l Groove: 槽線效果邊框。
l ridge: 脊線效果邊框，和槽線效果相反。
l inset: 內凹效果邊框。
l outset: 外凸效果邊框，和內凹效果相反。
每個邊框型別都可以指定一種顏色，邊框是繪製在背景顏色上的，列表A使用邊框屬性來樣式化整個表格以及錨標記和單獨的單元格。
<html>
<head><title>HTML Table</title></head>
<style type="text/css">
TABLE {
background: blue;
border-collapse: separate;
border-spacing: 10pt;
border: 5px solid red; }
TD, TH {
background: white;
border: inset 5pt;
horizontal-align: right; }
CAPTION { border: ridge 5pt blue; }
</style><body>
<table summary="TechRepublic.com - Tables and CSS">
<caption>First Quarter Sales</caption>
<thead><tr>
<thabbr="salesperson" scope="col">Person</th>
<thabbr="sales" scope="col">Sales</th>
</tr></thead>
<tbody><tr>
<td>Mr. Smith</td>
<td>600.00</td>
</tr><tr>
<td>Mr. Jones</td>
<td>0000.00</td>
</tr><tr>
<td>Ms. Williams</td>
<td>0000.00</td>
</tr></tbody>
<tfoot><tr>
<td colspan="2">Let's sale, sale, sale!</td>
</tr></tfoot></table></body></html>
列表A
這個例子展示了很多可供使用的表格邊框的選項，您可以使用您熟悉的度量單位（畫素、磅，行長單位等）。設定邊框的尺寸，您可以使用十六進位制數值或顏色名稱來指定邊框顏色。以下的例子演示了定義邊框的方法。
border: 5px solid red;
在這一條語句中融合了寬度、樣式和顏色屬性的定義，但是您也可以對這些元素進行單獨定義，如下所示：
border-width: 5px;
border-style: solid;
border-color: red;
除了將表格作為一個整體進行定義，您也可以將表格邊框的四個部分分別進行定義，包括頂部、底部、左邊和右邊。列表B中的程式碼將剛才的例子中的表格分成四個部分單獨定義。
<HTML><head><title>HTML Table</title></head>
<style type="text/CSS">
TABLE {
background: blue;
border-collapse: separate;
border-spacing: 10pt;
border-top: 15px solid red;
border-left: 15px solid red;
border-right: 5px dashed black;
border-bottom: 10px dashed blue; }
TD, TH {
background: white;
border: outset 5pt;
horizontal-align: right; }
CAPTION {
border: ridge
5pt blue;
border-top: ridge 10pt blue; }
</style><body>
<table summary="TechRepublic.com - Tables and CSS">
<caption>First Quarter Sales</caption>
<thead><tr>
<thabbr="salesperson" scope="col">Person</th>
<thabbr="sales" scope="col">Sales</th>
</tr></thead>
<tbody><tr>
<td>Mr. Smith</td>
<td>600.00</td>
</tr><tr>
<td>Mr. Jones</td>
<td>0000.00</td>
</tr><tr>
<td>Ms. Williams</td>
<td>0000.00</td>
</tr></tbody>
<tfoot><tr>
<td colspan="2">Let's sale, sale, sale!</td>
</tr></tfoot></table></body></html>
列表B
您可能注意到了整個CAPTION元素的邊框定義為藍色5磅的脊線效果，而CAPTION邊框的頂部設定為10磅。如果單獨的邊框設定（左邊、右邊、頂部、底部）出現在後面將覆蓋原有的整體邊框設定。
除此以外，在上一個例子中，通過分配TABLE元素的邊框屬性，可以在一個表格中實現多重邊框（錨標記、表格主體、表頭、單獨的單元格等等）。
邊框間距
您可以通過邊框間距屬性來指定相鄰的單元格之間的距離，您可以指定一個或兩個值，如果指定了一個值，那麼水平和垂直間距都將使用這一個值；如果指定了兩個值，那麼第一個值規定了水平間距而第二個值指定了垂直間距。這些值不能是負值，我在這個例子中使用了10磅的間距值。
表格行為
邊框的collapse屬性設定了表格的邊框模型，該屬性的預設值是獨立的邊框模型，單獨的邊框模型使用border-spacing屬性作為不同邊框之間的間距，該間距使用表格元素作為填充背景。
對於邊框模型中，全球資訊網聯盟（World Wide Web Consortium）定義了以下的規則來解決表格樣式的衝突：
l 使用‘隱藏’邊框屬性的邊框優先於其他的邊框屬性，任何使用‘隱藏’屬性的邊框比其它的邊框屬性處理優先順序要高。
l 使用‘無樣式’邊框的優先順序最低，如果在同一位置所有元素的邊框屬性都是‘無樣式’，表格邊框才會被忽略。（注意，‘無樣式’是邊框樣式的預設值。）
l 如果沒有樣式設定為‘隱藏’而且至少有一個樣式沒有設定為‘無樣式’，那麼寬邊框的優先順序高於細邊框。邊框樣式的優先順序如下：雙實線、單實線、虛線、點線、脊線、外凸、槽線，級別最低的是內凹。
l 如果邊框樣式只有顏色不同，那麼單元格的樣式優先順序高於行的優先順序，而且高於行組、列、列組和整個表格。
邊框
表格和其他的HTML元素一樣，擁有很多CSS樣式選項。表格和單元格的邊框是一個很好的例子，CSS應當可以滿足您對錶格樣式的需要。但是使用CSS格式化的表格在不同的瀏覽器中會顯示出不同的效果，因此需要進行廣泛的測試。
您是CSS的‘粉絲’麼？您在HTML表格的樣式上使用了那些選項？請在文章的討論區共享您的經驗