html中怎么給table表單加邊框-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)html中怎么給table表單加邊框，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司專注骨干網(wǎng)絡(luò)服務(wù)器租用10年，服務(wù)更有保障！服務(wù)器租用，雅安機(jī)房托管 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問(wèn)。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

一般來(lái)說(shuō)，給表格加邊框都會(huì)出現(xiàn)不同的問(wèn)題，以下是給表格加邊框后展現(xiàn)比較好的方式

<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>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
        <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
        <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
        <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
    </table>

但是根據(jù)不同的需要有時(shí)候我們需要不同的樣式，在這里我就影響表格邊框的因素，做一些總結(jié)和分析

一、 <table border="1"> 表格邊框

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

二、 <table border="1" cellspacing="0"> cellspacing單元格間距

如↑圖，這時(shí)表格大小為：200*118px

三、<table border="1" cellspacing="0" cellpadding="0"> cellpadding單元格邊距

如↑圖，這時(shí)表格大小為：200*110px

四、去掉表格中table的所有屬性值，當(dāng)在css中給table設(shè)置{border: 1px solid #151515}

如↑圖，這個(gè)時(shí)候我們發(fā)現(xiàn)，css中的border其實(shí)就是給表格加了一個(gè)外邊框而已

五、border-collapse: collapse 邊框合并，該屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開(kāi)顯示

這個(gè)時(shí)候如果我們只是想給表格整體加邊框，并且不需要邊距和間距，其實(shí)我們只需要這么寫(xiě)：

<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>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
        <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
        <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
        <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
</table>

如圖↓

六、我們?cè)谏厦娴膱D中可以清晰看見(jiàn)，兩個(gè)瀏覽器所解析邊框不同。但是其實(shí)他們是一樣的。他們同時(shí)都給邊框加了顏色，但是由于我們td和th默認(rèn)有一個(gè)默認(rèn)的顏色，而我們這里沒(méi)有給他們添加樣式去覆蓋默認(rèn)的黑色線條，而導(dǎo)致了火狐中出現(xiàn)的情況，其實(shí)這個(gè)情況在谷歌中也有，只是不明顯，其解析的黑色默認(rèn)線條被我們的顏色蓋在了上面，你如果仔細(xì)查看還是會(huì)發(fā)現(xiàn)有黑色邊條出現(xiàn)，這個(gè)時(shí)候我們只需要給th和td加上顏色樣式即可

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

如圖↓

七、從上面，仔細(xì)看，其實(shí)還是會(huì)發(fā)現(xiàn)不對(duì)勁，谷歌似乎外邊框更深了，這其實(shí)還是因?yàn)?，我們一開(kāi)始在table上面加了border=1的原因，因?yàn)楸旧砭徒otable加了一個(gè)默認(rèn)的黑色線條樣式，就是我們上面說(shuō)的，th和td以及table都有默認(rèn)的黑色邊線，因此如果需要徹底解決這個(gè)問(wèn)題，讓邊框可以正常顯示，應(yīng)該這么寫(xiě)：

<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>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
        <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
        <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
        <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr>
    </table>

總結(jié)一下：

Html中table的屬性：

border= “1”：給整個(gè)表格（包括表格及每一個(gè)單元格）加上1像素的黑色邊框，其等同于css中的： table,table tr th, table tr td { border:1px solid #0094ff; }

cellpadding=“0”：?jiǎn)卧襁吘嗟扔?，其默認(rèn)值為1px，其等同于css中的：{padding：0;}

cellspacing="0"：?jiǎn)卧耖g距等于0，其默認(rèn)值為2px，其等同于css中的：border-collapse: collapse（邊框合并），但又不完全相同，cellspacing僅間距，而border-collapse使臨近的邊線合并成一條邊線，也就避免了cellspacing中邊線重合造成邊線加粗的問(wèn)題。所以在這里不提倡使用html屬性設(shè)置表格邊框時(shí)將cellspacing設(shè)置為0，，如果你希望他等于0，更提倡使用css樣式屬性的方法去設(shè)置表格的邊框，并使用border-collapse: collapse去合并邊線，而不是將cellspacing設(shè)置為0，造成重合邊線加粗的問(wèn)題。

關(guān)于html中怎么給table表單加邊框就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文題目：html中怎么給table表單加邊框-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://muchs.cn/article12/dpehgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、定制網(wǎng)站、軟件開(kāi)發(fā)、ChatGPT、網(wǎng)站設(shè)計(jì)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)