本篇文章主要講述的就是關於css表格添加邊框樣式,這裡還有關於css表格邊框樣式的總結,還有css表格邊框的完整執行個體。接下來就讓我們一起來看這篇文章吧
首先我們先看看如何利用css來給表格添加邊框:
還記得我們在學html表格的時候也學過用border屬性來給表格添加邊框的,現在我們也是這樣,我們來看下border在CSS樣式中是如何使用的:
我們看下添加邊框的屬性:border-style屬性。現在我們先來看個完整執行個體:
<!doctype html><html><head><meta charset="utf-8"><title>topic.alibabacloud.com</title><style>table,td{border-style:dotted}</style></head><body><table><tr><td>11</td><td>22</td></tr><tr><td>22</td><td>44</td></tr></table><table><tr><td>11</td><td>22</td></tr><tr><td>22</td><td>44</td></tr></table></body></html>
上面的這個代碼你知道效果嗎?我們一起來看看效果吧:
看著大家應該都能明白吧,這裡還是要解釋下代碼的用處:
border-style:定義了表格加邊框(table表格的邊框,如果在用table{}這個的話就會沒有那麼多線了,就只會出現邊框線,中間的那些線都不會出現的,所以這裡我加上了td標籤,讓它也在裡面顯示出線來)
看完這些大家應該都能明白吧,圖中我只介紹了一種點狀邊框,還有雙線邊框還有虛線邊框等,大家也可以一個一個的試試,看的出來也很明顯的。
現在我們繼續說說邊框樣式,當然還有幾種樣式,不然怎麼能叫總結呢:
今天就介紹兩種屬性把,加上上面的border-style 屬性剛好就三種了。(推薦topic.alibabacloud.comcss學習手冊欄目去學習更多css樣式知識)
先看看border-spacing屬性:
border-spacing屬性設定相鄰儲存格的邊框間的距離(length 水平間隔/length垂直間隔)
<style>table,td{border-spacing:length}</style></head><body><table><tr><td>11</td><td>22</td></tr><tr><td>22</td><td>44</td></tr></table><table><tr><td>11</td><td>22</td></tr><tr><td>22</td><td>44</td></tr></table></body>
和一樣,但是這個設定的是垂直間隔,所以我們看到的可能不太一樣,所以這裡就沒有展示了,大家可以自己實踐,最後還有個caption-side屬性,這個是設定表格標題的位置,可以設定在上面也可以設定在下面。這樣都可以的。
所以有了這幾種屬性還是挺方便的,好了,後面的知識我們以後再做介紹了。
今天的這篇關於css表格添加邊框樣式的總結的文章到這裡就結束了(想學更多的CSS樣式的知識,就到topic.alibabacloud.comcss學習手冊欄目學習),有問題的同學可以在下面留言提問