css表格中的cellspacing和cellpadding屬性

今天就跟大家聊聊有關(guān)css表格中的cellspacing和cellpadding屬性，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

公司主營業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出敘州免費(fèi)做網(wǎng)站回饋大家。

table是由一個(gè)個(gè)cell單元格構(gòu)成的，在表格中，<td>的個(gè)數(shù)取決于每行<tr>中包裹的cell單元格個(gè)數(shù)！此外，默認(rèn)table表格在沒有添加css樣式<style type="text/css">table tr td,th{border:1px solid #000;}之前,在瀏覽器中顯示是沒有表格線的；

html中常見table寫法:A.<tr>…</tr>:表格的一行,有幾對(duì)tr表格就有幾行； B.<td>…</td>:表格的一個(gè)單元格,一行中包含幾對(duì)<td>...</td>,說明一行中就有幾列； C.<th>…</th>:表格的頭部的一個(gè)單元格,表格表頭,文本默認(rèn)為粗體并且居中顯示；D.<table summary="表格簡介文本">/*摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。*/ E.caption標(biāo)簽,為表格添加標(biāo)題和摘要,標(biāo)題用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方

 <table border="" cellspacing="" cellpadding="">
    <tr><th>Header</th></tr>
     <tr><td>Data</td></tr>
 </table>

<table border="" cellspacing="" cellpadding="" summary="">
         <caption></caption>
         <tr><th>今天星期五/th></tr>
         <tr><td>today is Friday</td></tr>
 </table>

言歸正傳，cellpadding 和cellspacing區(qū)別，先看下面一組表格圖片與cellspacing代碼的對(duì)比：

css表格中的cellspacing和cellpadding屬性

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>table中cellspacing的區(qū)別</title>
        <style type="text/css">
            table{
                margin-bottom: 50px;
            }
            .ceshi{
                border-spacing: 20px;
                /*Specifies the distance between the borders of adjoining cells in a table. */
            }
        </style>
    </head>
    <table width="600" cellspacing="0" bordercolor="#333" border="1">
        <caption>第一個(gè)單元格</caption>
        <tr>
            <td>測試1</td>
            <td>測試2</td>
            <td>測試3</td>
        </tr>
    </table>
    <table width="600" cellspacing="20" bordercolor="#333" border="1">
        <caption>第二個(gè)單元格</caption>
        <tr>
            <td>測試1</td>
            <td>測試2</td>
            <td>測試3</td>
        </tr>
    </table>
    <table width="600" bordercolor="#333" border="1" class="ceshi">
        <caption>第三個(gè)單元格</caption>
        <tr>
            <td>測試1</td>
            <td>測試2</td>
            <td>測試3</td>
        </tr>
    </table>
</html>

比較代碼，最上面的兩個(gè)表格只有cellspacing的設(shè)置不同，一個(gè)為”0“，一個(gè)為”20“，顯示的結(jié)果就是第一個(gè)表格的每個(gè)單元格之間的距離為0，第二個(gè)表格的每個(gè)單元格之間的距離為20；延伸下：第二個(gè)表格與第三個(gè)表格一致，但是第三個(gè)表格沒有設(shè)置cellspacing，我們發(fā)現(xiàn)這個(gè)border-spacing: 20px;與cellspacing="20" 的結(jié)果一樣一樣的，e.g小結(jié)：cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數(shù)值是數(shù)字，表示單元格間隙所占的像素點(diǎn)數(shù)。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>tabl表格中cellpadding的區(qū)別</title>
        <style type="text/css">
            table{
                margin-bottom: 50px;
            }
        </style>
    </head>
    <body>
        <table width="600px" border="1" bordercolor="#ccc" cellpadding="0">
            <tr>
                <th>我是快樂的cell表格</th>
                <th>我是快樂的cell表格</th>
                <th>我是快樂的cell表格</th>
            </tr>
        </table>
        <table width="600px" border="1" bordercolor="#ccc" cellpadding="20">
            <tr>
                <th>我是快樂的cell表格</th>
                <th>我是快樂的cell表格</th>
                <th>我是快樂的cell表格</th>
            </tr>
        </table>
    </body>
</html>

css表格中的cellspacing和cellpadding屬性

從上面的代碼運(yùn)行展示結(jié)果來看：兩個(gè)表格只有cellpadding代碼值不同，第一個(gè)表格中"我是快樂的cell表格"這幾個(gè)字離它所在的單元格為0,那是因?yàn)樵O(shè)置了cellpadding="0"的原因；第二個(gè)表格中的"我是快樂的cell表格"這幾個(gè)字離它所在的單元格比較遠(yuǎn)，那是因?yàn)閏ellpadding="20",也就是說"我是快樂的cell表格"離它所在的單元格的邊界的距離為20像素。簡單的說,cellpadding的值等于多少,那表格內(nèi)的單元格從自身邊界開始向內(nèi)保留多少空白,單元格里的元素永遠(yuǎn)都不會(huì)進(jìn)入那些空白里。||注意 cellpadding屬性用來指定單元格內(nèi)容與單元格邊界之間的空白距離的大小。此屬性的參數(shù)值也是數(shù)字，表示單元格內(nèi)容與上下邊界之間空白距離的高度所占像素點(diǎn)數(shù)以及單元格內(nèi)容與左右邊界之間空白距離的寬度所占的像素點(diǎn)數(shù)。

e.g小結(jié):cellspacing代表的是單元格與單元格之間的距離，cellpadding表示的是單元格內(nèi)容與邊框的距離；前者的理解像margin,后者像padding；巢(cell)--表格的內(nèi)容；巢補(bǔ)白(表格填充)(cellpadding)--代表巢外面的一個(gè)距離，用于隔開巢與巢空間；巢空間(表格間距)(cellspacing)--代表表格邊框與巢補(bǔ)白的距離，也是巢補(bǔ)白之間的距離

拓展一：表格的行與列如何合并？colspan跨列合并，rowspan跨行合并

css表格中的cellspacing和cellpadding屬性

代碼展示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>colspan與rowspan的區(qū)別</title>
        <style type="text/css">
            table{
                margin: 0 auto;
                margin-bottom: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>正常展示：一行三列</caption>
        <tr>
            <td>說點(diǎn)啥了,不知道</td>
            <td>說點(diǎn)啥了,不知道</td>
            <td>說點(diǎn)啥了,不知道</td>
        </tr>
    </table>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>現(xiàn)在要展示一行二列,怎么辦？colspan跨列合并</caption>
        <tr>
            <td>說點(diǎn)啥了,不知道</td>
            <td colspan="2">說點(diǎn)啥了,不知道</td>
            <!-- <td>說點(diǎn)啥了,不知道</td> -->
        </tr>
    </table>
    <!-- ========無情分割線========================================================== -->
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>正常展示：二行二列</caption>
        <tr>
            <td>說點(diǎn)啥了,不知道</td>
            <td>說點(diǎn)啥了,不知道</td>
        </tr>
        <tr>
            <td>說點(diǎn)啥了,不知道</td>
            <td>說點(diǎn)啥了,不知道</td>
        </tr>
    </table>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>現(xiàn)在要展示一行二列,怎么辦?rowspan跨行合并</caption>
        <tr>
            <td rowspan="2">說點(diǎn)啥了,不知道</td>
            <td>說點(diǎn)啥了,不知道</td>
        </tr>
        <tr>
            <!-- <td>說點(diǎn)啥了,不知道</td> -->
            <td>說點(diǎn)啥了,不知道</td>
        </tr>
    </table>
    </body>
</html>

拓展二：如何合并表格邊框？border-collapse: collapse;

<!-- 合并表格單元格 -->
    <style type="text/css">
        table{
            border-collapse: collapse;
            /* border-collapse: separate; */
            /*Indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML. */
        }
    </style>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <tbody>
            <tr>
                <td>單元格1</td>
                <td>單元格2</td>
                <td>單元格3</td>
            </tr>
        </tbody>
    </table>

最后chrome瀏覽器中，系統(tǒng)默認(rèn)的表格邊框顏色grey，邊框間距為2等等

/* user agent stylesheet */
        /* table {
            display: table;
            border-collapse: separate;
            border-spacing: 2px;
            border-color: grey;
        } */
        
/*         border="1"默認(rèn)等于border="1px"
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px; */
        
/*        bordercolor返回或設(shè)置對(duì)象的邊框顏色
        bordercolor:W3C - String 
        Specifies the color of the border of the element. Specify either a color name or RGB color code. 
*/

看完上述內(nèi)容，你們對(duì)css表格中的cellspacing和cellpadding屬性有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

新聞名稱：css表格中的cellspacing和cellpadding屬性
當(dāng)前URL：http://chinadenli.net/article38/jsissp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、域名注冊(cè)、網(wǎng)站維護(hù)、搜索引擎優(yōu)化、網(wǎng)站制作

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

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css表格中的cellspacing和cellpadding屬性