首頁 >web前端 >html教學 >html如何為table表單加邊框

html如何為table表單加邊框

青灯夜游
青灯夜游原創
2018-09-25 13:43:527539瀏覽

本章跟大家介紹html如何為table表單加邊框。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一般來說,在表格加上邊框都會出現不同的問題,以下是在表格加上邊框後展現比較好的方式

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

但是根據不同的需要有時我們需要不同的樣式,在這裡我就影響表格邊框的因素,做一些總結和分析

一、

表格邊框

html如何為table表單加邊框

如↑圖,也就是border=1,意思就是給表格的每一格,以及邊框加上1像素的邊框

二、

cellspacing單元格間距

html如何為table表單加邊框

如↑圖,此時表格大小為:200*118px

三、

cellpadding單元格邊距

html如何為table表單加邊框

如↑圖,此時表格大小為:200*110px

#四、去掉表格中table的所有屬性值,當在css中給table設定{border: 1px solid #151515}

html如何為table表單加邊框

##如↑圖,這個時候我們發現,css中的border其實就是在表格中加上了外部邊框而已

五、border-collapse: collapse 邊框合併,該屬性設定表格的邊框是否被合併為單一的邊框,還是像在標準的HTML 中那樣分開顯示

這個時候如果我們只是想給表格整體加邊框,並且不需要邊距和間距,其實我們只需要這麼寫:

<style>
    table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}   
</style>

<table border="1">
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</table>

如圖↓

html如何為table表單加邊框

六、我們在上面的圖中可以清楚看見,兩個瀏覽器所解析邊框不同。但是其實他們是一樣的。他們同時都為邊框加了顏色,但是由於我們td和th預設有一個預設的顏色,而我們這裡沒有給他們添加樣式去覆蓋預設的黑色線條,而導致了火狐中出現的情況,其實這個情況在谷歌中也有,只是不明顯,其解析的黑色預設線條被我們的顏色蓋在了上面,你如果仔細查看還是會發現有黑色邊條出現,這個時候我們只需要給th和td加上顏色樣式即可

 table tr th, table tr td { border-color:#b6ff00; }

 如圖↓

html如何為table表單加邊框

七、從上面,仔細看,其實還是會發現不對勁,Google似乎外邊框更深了,這其實還是因為,我們一開始在table上面加了border=1的原因,因為本身就給table加了一個預設的黑色線條樣式,就是我們上面說的,th和td以及table都有預設的黑色邊線,因此如果需要徹底解決這個問題,讓邊框可以正常顯示,應該這麼寫:


<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

總結一下:

Html中table的屬性:

border= 「1」:為整個表格(包括表格及每一個單元格)加上1像素的黑色邊框,其等同於css中的: table,table tr th, table tr td { border:1px solid #0094ff; }

cellpadding=“0”:單元格邊距等於0,其預設值為1px,其等同於css中的:{padding:0;}

cellspacing="0":單元格間距等於0,其預設值為2px,其等同於css中的:border-collapse: collapse(邊框合併),但又不完全相同,cellspacing僅間距,而border-collapse使臨近的邊線合併成一條邊線,也就避免了cellspacing中邊線重合造成邊線加粗的問題。所以在這裡不提倡使用html屬性來設定表格邊框時將cellspacing設為0,,如果你希望他等於0,更提倡使用css樣式屬性的方法去設定表格的邊框,並使用border-collapse: collapse去合併邊際,而不是將cellspacing設為0,造成重合邊線加粗的問題。

以上是html如何為table表單加邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn