欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

說明：

下面對一些簡單常用的HMTL和CSS知識進行了介紹，詳細的相關知識請自行百度獲取。以下內容都必須將編輯器切換到源碼模式下才能操作：

Kinder編輯器

ClickSun編輯器

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

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

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

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

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

cellPadding=5
表格格線內厚度

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

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

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

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

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

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

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

一、只對表格table標簽設置邊框

只對table標簽設置border（邊框）樣式，將讓此表格最外層table一個邊框，而表格內部不產生邊框樣式。

對應html代碼片段

　效果圖：

二、對td設置邊框

對table表格td設置邊框樣式，表格對象內td將實現邊框樣式，但中間部分td會導致出現雙邊框。

對應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">網址</td>
5. <td width="112" style="border:1px solid #F00">說明</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">點晴免費OA，國內優選的免費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">點晴免費OA，國內優選的免費OA</td>
16. </tr>
17. </table>

　效果圖：

三、對table和td技巧性設置表格邊框

如上第二點，只對表格對象td設置單一邊框樣式，中間部分td與td標簽之間就會出現雙邊框現象。
 
解決方法：對td只設置兩個邊的邊框，對table也設置兩個邊的邊框樣式。
 
解釋：對td設置左與上邊框，這樣td與td相鄰就會只出現單一邊框樣式，這樣就會出現表格右側和下部沒有邊框，這個時候我們設置table右和下 邊框解決顯示右側和下側td剩下未顯示邊框。

對應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">網址</td>
<td width="112" style="border-left:1px solid #F00;border-top:1px solid #F00">說明</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">點晴免費OA，國內優選的免費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">點晴免費OA，國內優選的免費OA</td>
</tr>
</table>

　效果圖：

四、對table和td設置背景，實現完美表格邊框

1、基礎設置

1）、先設置table css背景為紅色

2）、設置table單元之間間距為1，直接對<table>標簽內cellspacing="1"即可，得到：<table width="400" border="0" cellspacing="1" cellpadding="0">

3）、設置table、tr、td背景色，直接對<table>、<tr>、<td>標簽內bgcolor="顏色"即可，得到：

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

　　<tr bgcolor="gray">

　　<td bgcolor="white">

4）、設置table、td寬度，直接在table標簽內加入width寬度屬性即可定義寬度如下：<table width="300"> 、<td width="300">

　　這樣定義table寬度為300px，記住這個寬度的值不需要帶html長度單位，默認以像素px為單位。

五、css table表格邊框實現總結

以上四種方式實現table表格邊框樣式方法，推薦使用第三和第四種方法來解決表格邊框樣式。

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

在需要設置特別效果的字體前后增加span控制符，下面以點晴免費OA為例來設置，效果 - 紅色、20號大小、粗體、微軟雅黑：

<span style="color:red; font-size:20pt; font-weight:bold; font-family:微軟雅黑;">點晴免費OA，國內優選的免費OA</span>

效果展示：

點晴免費OA，國內優選的免費OA

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

< P align="center"><span style="color:red; font-size:20pt; font-weight:bold; font-family:微軟雅黑;">點晴免費OA，國內優選的免費OA</span></P>

效果展示：

點晴免費OA，國內優選的免費OA

六、其他常用css標識

　　1、表格中內容禁止換行：在td中增加nowrap

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

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

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

　　3、表格中文字增加CSS控制強制換行：在td中增加style

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