CSS 表格屬性

CSS表格屬性用于設(shè)置HTML表格的樣式，HTML表格由 table/table 標(biāo)簽嵌套 tbody ， tr ， td 等標(biāo)簽組成，一個(gè)HTML表格默認(rèn)至少包含table，tbody，tr，td四個(gè)元素。

創(chuàng)新互聯(lián)公司憑借專業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢，提供專業(yè)的網(wǎng)站策劃、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù)，在成都10年的網(wǎng)站建設(shè)設(shè)計(jì)經(jīng)驗(yàn)，為成都近1000家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。

CSS表格屬性：

顯示表格邊框有時(shí)候特別重要，它能讓表格結(jié)構(gòu)更清晰。

默認(rèn)的表格有雙邊框，這是因?yàn)楸砗蛅h/ td元素有獨(dú)立的邊界。border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開。

CSS 表格

指定CSS表格邊框，使用border屬性。

下面的例子指定了一個(gè)表格的Th和TD元素的黑色邊框

例子： table,th,td{border:1px solid black;}

請注意，在上面的例子中的表格有雙邊框。這是因?yàn)楸砗蛅h/ td元素有獨(dú)立的邊界。

為了顯示一個(gè)表的單個(gè)邊框，使用 border-collapse屬性。

border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開：

例子： table{ border-collapse:collapse;}

? ? ? ?table,th, td{ border: 1px solid black;}

Width和height屬性定義表格的寬度和高度。

下面的例子是設(shè)置100％的寬度，50像素的th元素的高度的表格：

例子：table,td,th{border:1pxsolidblack;}

? ? ? ?table{width:100%;}

? ? ? ?th{height:50px;}

表格中的文本對齊和垂直對齊屬性。

text-align屬性設(shè)置水平對齊方式，向左，右，或中心：

如需控制邊框和表格內(nèi)容之間的間距，應(yīng)使用td和th元素的填充屬性：

例子： td{ padding:15px;}

下面的例子指定邊框的顏色，和th元素的文本和背景顏色：

怎么設(shè)置漂亮的表格的樣式 css

下面來個(gè)例子，你可以復(fù)制到你的編輯器里修改測試

style type="text/css"

table.gridtable {}{

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-color: #666666;

border-collapse: collapse;

}

table.gridtable th {}{

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #666666;

background-color: #dedede;

}

table.gridtable td {}{

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #666666;

background-color: #ffffff;

}

/style

!-- Table goes in the document BODY --

table class="gridtable"

tr

thInfo Header 1/ththInfo Header 2/ththInfo Header 3/th

/tr

tr

tdText 1A/tdtdText 1B/tdtdText 1C/td

/tr

tr

tdText 2A/tdtdText 2B/tdtdText 2C/td

/tr

/table

CSS（層疊樣式表）級(jí)聯(lián)樣式表是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。

表格細(xì)邊框的CSS樣式怎么設(shè)置？

指定的table為細(xì)邊框，把table放在div中即可。

一、首先新建表格，代碼如下：

table width="500" border="1"? trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td /trtr? tdnbsp;/td tdnbsp;/tdtdnbsp;/td/tr/table。

二、在table里加css樣式，代碼如下：

table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"? tr tdnbsp;/tdtdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/table。

三、單元格邊距(表格填充)(cellpadding) -- 代表單元格外面的一個(gè)距離,用于隔開單元格與單元格空間。單元格間距(表格間距)(cellspacing) -- 代表表格邊框與單元格補(bǔ)白的距離,也是單元格補(bǔ)白之間的距離，border-collapse:collapse表示表格的兩邊框合并為一條即可。

css表格樣式怎么實(shí)現(xiàn)？

table{

border-collapse: collapse; //相鄰邊被合并

background-color: #cccccc; //設(shè)置表格背景色

border-top: 1px solid #000000; //設(shè)置表格上邊框顏色

border-left: 1px solid #000000; //設(shè)置表格左邊框顏色

border-right: 1px solid #000000; //設(shè)置表格右邊框顏色

border-bottom: 1px solid #000000; //設(shè)置表格下邊框顏色

}

td {

border-right: 1px solid #000000; //設(shè)置td顏色

border-bottom: 1px solid #000000; //

}

表格制作練習(xí)可以到實(shí)戰(zhàn)幫。

新聞名稱：css樣式表格,表格的css樣式
當(dāng)前地址：http://chinadenli.net/article36/dsgjpsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站維護(hù)、外貿(mào)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、面包屑導(dǎo)航、定制開發(fā)

廣告

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