說(shuō)明：

下面對(duì)一些簡(jiǎn)單常用的HMTL和CSS知識(shí)進(jìn)行了介紹，詳細(xì)的相關(guān)知識(shí)請(qǐng)自行百度獲取。以下內(nèi)容都必須將編輯器切換到源碼模式下才能操作：

Kinder編輯器

ClickSun編輯器

對(duì)table設(shè)置css樣式邊框，分為幾種情況：
1、只對(duì)table（整個(gè)表格）設(shè)置表格寬度、邊框線寬度、顏色
2、對(duì)tr（行）設(shè)置行高
3、對(duì)td（單元格）設(shè)置列寬、邊框線寬度、顏色
4、對(duì)table和td技巧性設(shè)置表格邊框
3、對(duì)table和td設(shè)置背景，實(shí)現(xiàn)完美表格邊框

<table width="400" border="10" cellspacing="2" ceelpadding="5">

width="400"
表格寬度，接受絕對(duì)值（如 500）及相對(duì)值（如 80%）。

border="10"
表格邊框的厚度。

cellspacing="2"
表格格線的厚度

cellPadding=5
表格格線內(nèi)厚度

align="CENTER"
表格的擺放位置（水平），可選值為：左： left,　右： right,　居中： center

valign="TOP".
表格內(nèi)內(nèi)容的對(duì)齊方式（垂直），可選值為： top, middle, bottom。 　　

background="背景圖片網(wǎng)址"
表格的背景圖片，與 bgcolor 不要同用。

bgcolor="#0000FF"
表格的底色，與 background 不要同用

bordercolor="#CF0000"
表格邊框顏色

bordercolorlight="#00FF00"
表格邊框向光部分的顏色

bordercolordark="#00FFFF"
表格邊框背光部分的顏色，使用 bordercolorlight 或 bordercolordark 時(shí) bordercolor 將會(huì)失效。

一、只對(duì)表格table標(biāo)簽設(shè)置邊框

只對(duì)table標(biāo)簽設(shè)置border（邊框）樣式，將讓此表格最外層table一個(gè)邊框，而表格內(nèi)部不產(chǎn)生邊框樣式。

對(duì)應(yīng)html代碼片段

　效果圖：

二、對(duì)td設(shè)置邊框

對(duì)table表格td設(shè)置邊框樣式，表格對(duì)象內(nèi)td將實(shí)現(xiàn)邊框樣式，但中間部分td會(huì)導(dǎo)致出現(xiàn)雙邊框。

對(duì)應(yīng)html源代碼片段

1. <table width="400" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #F00">
2. <tr height="24">
3. <td width="105" style="border:1px solid #F00">站名</td>
4. <td width="181" style="border:1px solid #F00">網(wǎng)址</td>
5. <td width="112" style="border:1px solid #F00">說(shuō)明</td>
6. </tr>
7. <tr height="24">
8. <td style="border:1px solid #F00">DIVCSS5</td>
9. <td style="border:1px solid #F00">www.clicksn.cn</td>
10. <td style="border:1px solid #F00">點(diǎn)晴免費(fèi)OA，國(guó)內(nèi)優(yōu)選的免費(fèi)OA</td>
11. </tr>
12. <tr height="24">
13. <td style="border:1px solid #F00">CSS5</td>
14. <td style="border:1px solid #F00">www.clicksun.com.cn</td>
15. <td style="border:1px solid #F00">點(diǎn)晴免費(fèi)OA，國(guó)內(nèi)優(yōu)選的免費(fèi)OA</td>
16. </tr>
17. </table>

　效果圖：

三、對(duì)table和td技巧性設(shè)置表格邊框

如上第二點(diǎn)，只對(duì)表格對(duì)象td設(shè)置單一邊框樣式，中間部分td與td標(biāo)簽之間就會(huì)出現(xiàn)雙邊框現(xiàn)象。
 
解決方法：對(duì)td只設(shè)置兩個(gè)邊的邊框，對(duì)table也設(shè)置兩個(gè)邊的邊框樣式。
 
解釋：對(duì)td設(shè)置左與上邊框，這樣td與td相鄰就會(huì)只出現(xiàn)單一邊框樣式，這樣就會(huì)出現(xiàn)表格右側(cè)和下部沒(méi)有邊框，這個(gè)時(shí)候我們?cè)O(shè)置table右和下 邊框解決顯示右側(cè)和下側(cè)td剩下未顯示邊框。

對(duì)應(yīng)html源代碼片段：

<table width="400" border="0" cellspacing="0" cellpadding="0" style="border-right:1px solid #F00;border-bottom:1px solid #F00">
<tr height="24">
<td width="105" style="border-left:1px solid #F00;border-top:1px solid #F00">站名</td>
<td width="181" style="border-left:1px solid #F00;border-top:1px solid #F00">網(wǎng)址</td>
<td width="112" style="border-left:1px solid #F00;border-top:1px solid #F00">說(shuō)明</td>
</tr>
<tr height="24">
<td style="border-left:1px solid #F00;border-top:1px solid #F00">DIVCSS5</td>
<td style="border-left:1px solid #F00;border-top:1px solid #F00">www.clicksn.cn</td>
<td style="border-left:1px solid #F00;border-top:1px solid #F00">點(diǎn)晴免費(fèi)OA，國(guó)內(nèi)優(yōu)選的免費(fèi)OA</td>
</tr>
<tr height="24">
<td style="border-left:1px solid #F00;border-top:1px solid #F00">CSS5</td>
<td style="border-left:1px solid #F00;border-top:1px solid #F00">www.clicksun.com.cn</td>
<td style="border-left:1px solid #F00;border-top:1px solid #F00">點(diǎn)晴免費(fèi)OA，國(guó)內(nèi)優(yōu)選的免費(fèi)OA</td>
</tr>
</table>

　效果圖：

四、對(duì)table和td設(shè)置背景，實(shí)現(xiàn)完美表格邊框

1、基礎(chǔ)設(shè)置

1）、先設(shè)置table css背景為紅色

2）、設(shè)置table單元之間間距為1，直接對(duì)<table>標(biāo)簽內(nèi)cellspacing="1"即可，得到：<table width="400" border="0" cellspacing="1" cellpadding="0">

3）、設(shè)置table、tr、td背景色，直接對(duì)<table>、<tr>、<td>標(biāo)簽內(nèi)bgcolor="顏色"即可，得到：

　　<table width="400" border="0" cellspacing="1" cellpadding="0" bgcolor="white">

　　<tr bgcolor="gray">

　　<td bgcolor="white">

4）、設(shè)置table、td寬度，直接在table標(biāo)簽內(nèi)加入width寬度屬性即可定義寬度如下：<table width="300"> 、<td width="300">

　　這樣定義table寬度為300px，記住這個(gè)寬度的值不需要帶html長(zhǎng)度單位，默認(rèn)以像素px為單位。

五、css table表格邊框?qū)崿F(xiàn)總結(jié)

以上四種方式實(shí)現(xiàn)table表格邊框樣式方法，推薦使用第三和第四種方法來(lái)解決表格邊框樣式。

上面介紹的是CSS對(duì)表格的控制方法，下面介紹CSS對(duì)字體的控制方法：

在需要設(shè)置特別效果的字體前后增加span控制符，下面以點(diǎn)晴免費(fèi)OA為例來(lái)設(shè)置，效果 - 紅色、20號(hào)大小、粗體、微軟雅黑：

<span style="color:red; font-size:20pt; font-weight:bold; font-family:微軟雅黑;">點(diǎn)晴免費(fèi)OA，國(guó)內(nèi)優(yōu)選的免費(fèi)OA</span>

效果展示：

點(diǎn)晴免費(fèi)OA，國(guó)內(nèi)優(yōu)選的免費(fèi)OA

如果需要居中或靠左、右顯示的話，在前后加上P控制符的align=cener、align=left、align=right即可：

< P align="center"><span style="color:red; font-size:20pt; font-weight:bold; font-family:微軟雅黑;">點(diǎn)晴免費(fèi)OA，國(guó)內(nèi)優(yōu)選的免費(fèi)OA</span></P>

效果展示：

點(diǎn)晴免費(fèi)OA，國(guó)內(nèi)優(yōu)選的免費(fèi)OA

六、其他常用css標(biāo)識(shí)

　　1、表格中內(nèi)容禁止換行：在td中增加nowrap

　　　　<td nowrap>******</td>

　　2、表格中文字增加CSS控制字體顏色、大小、粗細(xì)等：在td中增加style

　　　　<td style="color:red; font-weight:bold; font-family:微軟雅黑;">******</td>

　　3、表格中文字增加CSS控制強(qiáng)制換行：在td中增加style

　　　　<td style="word-wrap:break-word;word-break:break-all;">******</td>