1、首先打開vscode編輯器，新建一個html文件，定義一個兩行兩列的表格，在瀏覽器打開的效果。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、彭州網(wǎng)站維護、網(wǎng)站推廣。
2、然后給表格添加邊框，這里給table標(biāo)簽和td標(biāo)簽都設(shè)置邊框，不過兩個標(biāo)簽的邊框顏色值不一樣。
3、最后可以用width屬性給表格設(shè)置寬度，用height屬性設(shè)置單元格的高度，設(shè)置好后可以在瀏覽器看到效果。
CSS的調(diào)用，按照CSS出現(xiàn)在頁面的不同位置，可以分為3種方法：
元素中直接使用；
從頁面頭部調(diào)用；
采用鏈接的形式調(diào)用。
不同的調(diào)用方法有不同的寫法和優(yōu)先級。下面分別做一下介紹。
一、元素中直接使用
這種調(diào)用方式的寫法如下：
元素名稱 style="屬性:屬性值;"/元素名稱
在樣式中直接使用CSS，語法是使用style標(biāo)簽，在雙引號中，樣式的語法結(jié)構(gòu)和獨立樣式表中完全相同。例如：
div style="width:240px;height:80px;background-color:#cccccc;text-align:center;font-size:14px"
示例：元素中直接調(diào)用。/div
該樣式中定義了元素寬、高為360、80像素，背景色為灰色，字體大小為14像素。其應(yīng)用到頁面中的顯示如圖1。
二、從頁面頭部調(diào)用
從頁面頭部調(diào)用CSS是將CSS寫在頁面的head元素中，然后在頁面中調(diào)用。其語法結(jié)構(gòu)如下：
style
選擇符{屬性:屬性值;}
/style
頁面上的所有樣式都可以寫在style和/style中。使用這種方式調(diào)用CSS，在頁面中必須有相應(yīng)的調(diào)用代碼。
其中，類選擇符的調(diào)用代碼如下：
元素名稱 class="類選擇符名稱"/元素名稱
ID選擇符的調(diào)用代碼如下：
元素名稱 id="id 類選擇符名稱"/元素名稱
下面我們來用一個示例演示一下。
head
titleCSS調(diào)用方法/title
style
.content{
background-color: #cccccc;
font-size: 14px;
width: 240px;
height: 80px;
color: Blue;
text-align: center;
}
/style
/head
body
div class="content"示例：從頁面頭部調(diào)用。/div
/body
該樣式應(yīng)用到頁面的效果如圖2所示。
三、采用鏈接的形式調(diào)用
采用鏈接的形式調(diào)用CSS通常有兩種方法：
使用link元素
使用link元素調(diào)用CSS的語法如下：
link rel="stylesheet" href="css文件路徑" type="text/css"/
其中rel="stylesheet"指這個link和其href之間的關(guān)聯(lián)樣式為樣式表文件。type="text/css"指文件類型是樣式表文本。
使用@import
使用@import調(diào)用和使用link元素調(diào)用的區(qū)別在于，使用@import的調(diào)用方法只能使用在樣式文件中，即只能在調(diào)用的樣式文件，或style元素中才能正常使用
CSS表格屬性用于設(shè)置HTML表格的樣式，HTML表格由 table/table 標(biāo)簽嵌套 tbody ， tr ， td 等標(biāo)簽組成，一個HTML表格默認至少包含table，tbody，tr，td四個元素。
CSS表格屬性：
顯示表格邊框有時候特別重要，它能讓表格結(jié)構(gòu)更清晰。
默認的表格有雙邊框，這是因為表和th/ td元素有獨立的邊界。border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個單一的邊框或隔開。
這是設(shè)置的邊框，將邊框的樣式設(shè)置為 dashed就行，舉個例子：
table{
width: 320px;
height: 320px;
}
tr td{
border:1px dashed #333;
}
可以這樣寫
一、只對表格table標(biāo)簽設(shè)置邊框 ? - ?TOP
只對table標(biāo)簽設(shè)置border（邊框）樣式，將讓此表格最外層table一個邊框，而表格內(nèi)部不產(chǎn)生邊框樣式。
案例詳細如下：
1、對應(yīng)css代碼
style.table-a?table{border:1px?solid?#F00}?/*?css注釋：只對table標(biāo)簽設(shè)置紅色邊框樣式?*/?style
2、對應(yīng)html代碼片段
divclass="table-a"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"網(wǎng)址tdtdwidth="112"說明tdtrtrtdDIVCSS5tdtd;tdCSS學(xué)習(xí)tdtrtrtdCSS5tdtd;tdCSS切圖tdtrtablediv
二、對td設(shè)置邊框 ? - ??TOP
對table表格td設(shè)置邊框樣式，表格對象內(nèi)td將實現(xiàn)邊框樣式，但中間部分td會導(dǎo)致出現(xiàn)雙邊框。
詳細案例教程如下：
1、對應(yīng)css代碼
style.table-b?table?td{border:1px?solid?#F00}?/*?css注釋：只對table?td標(biāo)簽設(shè)置紅色邊框樣式?*/?style
2、對應(yīng)html源代碼片段
divclass="table-b"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"網(wǎng)址tdtdwidth="112"說明tdtrtrtdDIVCSS5tdtd;tdCSS學(xué)習(xí)tdtrtrtdCSS5tdtd;tdCSS切圖tdtrtable
三、對table和td技巧性設(shè)置表格邊框 ? - ??TOP
如上第二點，只對表格對象td設(shè)置單一邊框樣式，中間部分td與td標(biāo)簽之間就會出現(xiàn)雙邊框現(xiàn)象。
解決方法：對td只設(shè)置兩個邊的邊框，對table也設(shè)置兩個邊的邊框樣式。
解釋：對td設(shè)置左與上邊框，這樣td與td相鄰就會只出現(xiàn)單一邊框樣式，這樣就會出現(xiàn)表格右側(cè)和下部沒有邊框，這個時候我們設(shè)置table右和下 邊框解決顯示右側(cè)和下側(cè)td剩下未顯示邊框。
1、對應(yīng)css代碼：
style.table-c?table{border-right:1px?solid?#F00;border-bottom:1px?solid?#F00}?.table-c?table?td{border-left:1px?solid?#F00;border-top:1px?solid?#F00}?/*?css 注釋：?只對table?td設(shè)置左與上邊框；?對table設(shè)置右與下邊框；?為了便于截圖，我們將css?注釋說明換行排版?*/?style
2、對應(yīng)html源代碼片段：
divclass="table-c"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"網(wǎng)址tdtdwidth="112"說明tdtrtrtdDIVCSS5tdtd;tdCSS學(xué)習(xí)tdtrtrtdCSS5tdtd;tdCSS切圖tdtrtable
四、對table和td設(shè)置背景，實現(xiàn)完美表格邊框 ? - ??TOP
1、基礎(chǔ)設(shè)置
1）、先設(shè)置table?css背景為紅色
2）、設(shè)置table單元之間間距為1
使用DW軟件輔助設(shè)置table表格單元間距為1，具體DW軟件可視化操作步驟簡要說明，首先（視圖模式）選中表格后，對應(yīng)DW軟件編輯窗口底部會“屬性”面板會出現(xiàn)對應(yīng)table表格屬性設(shè)置地方，我們將“間隔”填寫為“1”。這個時候我們會看到table表格標(biāo)簽里cellspacing值為“1”（cellspacing="1"）。
借助DW軟件設(shè)置表格單元之間間距
或
直接對
標(biāo)簽內(nèi)cellspacing="1"即可，得到：
tablewidth="400"border="0"cellspacing="1"cellpadding="0"
3）、設(shè)置table td背景為白色
2、css代碼：
style.table-d?table{?background:#F00}?.table-d?table?td{?background:#FFF}?/*?css注釋：設(shè)置table背景為紅色，td背景為白色?*/?style
3、對應(yīng)html源代碼：
divclass="table-d"tablewidth="400"border="0"cellspacing="1"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"網(wǎng)址tdtdwidth="112"說明tdtrtrtdDIVCSS5tdtd;tdCSS學(xué)習(xí)tdtrtrtdCSS5tdtd;tdCSS切圖tdtrtablediv
五、css table表格邊框?qū)崿F(xiàn)總結(jié) ? - ?TOP
以上四種方式實現(xiàn)table表格邊框樣式方法，推薦使用第三和第四種方法來解決表格邊框樣式。希望DIVCSS5整理總結(jié)html table邊框布局方法對大家有幫助并能掌握，平時需要時靈活運用。
重慶分公司
重慶分公司
