狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

點晴永久免費OA工作流表單設(shè)計:表格table及宏控件的HTML、CSS、字體參數(shù)教程詳解

admin
2015年1月9日 9:32 本文熱度 44904

說明:

雖然點晴OA內(nèi)置了強大的富文本編輯器,但是很多時候還是難以實現(xiàn)理想的精確顯示效果,為了實現(xiàn)滿意的顯示效果,網(wǎng)管掌握一定的HTML、CSS、Javascript等相關(guān)知識還是很有必要的,否則只能按照系統(tǒng)默認效果顯示使用了。

其實并不需要太多高深的知識,懂些皮毛就夠了,主要是如何固定表格寬度、行高、列寬、居中、顏色、字體大小之類的。

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

Kinder編輯器

ClickSun編輯器

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

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

width="400"
表格寬度,接受絕對值(如 500)及相對值(如 80%)。

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

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

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

align="CENTER"
表格的擺放位置(水平),可選值為:左: left, 右: right, 居中: center

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

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

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

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

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

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

一、只對表格table標簽設(shè)置邊框

只對table標簽設(shè)置border(邊框)樣式,將讓此表格最外層table一個邊框,而表格內(nèi)部不產(chǎn)生邊框樣式。

對應(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">站名</td>
  4. <td width="181">網(wǎng)址</td>
  5. <td width="112">說明</td>
  6. </tr>
  7. <tr height="24">
  8. <td>DIVCSS5</td>
  9. <td>www.clicksn.cn</td>
  10. <td>點晴免費OA,國內(nèi)優(yōu)選的免費OA</td>
  11. </tr>
  12. <tr height="24">
  13. <td>CSS5</td>
  14. <td>www.clicksun.com.cn</td>
  15. <td>點晴免費OA,國內(nèi)優(yōu)選的免費OA</td>
  16. </tr>
  17. </table>

 效果圖:

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

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

對應(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">說明</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,國內(nèi)優(yōu)選的免費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,國內(nèi)優(yōu)選的免費OA</td>
  16. </tr>
  17. </table>

 效果圖:

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

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

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

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

 效果圖:

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

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

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

2)、設(shè)置table單元之間間距為1,直接對<table>標簽內(nèi)cellspacing="1"即可,得到:<table width="400" border="0" cellspacing="1" cellpadding="0">

3)、設(shè)置table、tr、td背景色,直接對<table>、<tr>、<td>標簽內(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標簽內(nèi)加入width寬度屬性即可定義寬度如下:<table width="300"> 、<td width="300">

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

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

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

 

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

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

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

效果展示:

點晴免費OA,國內(nèi)優(yōu)選的免費OA

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

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

效果展示:

點晴免費OA,國內(nèi)優(yōu)選的免費OA


六、其他常用css標識

  1、表格中內(nèi)容禁止換行:在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>


該文章在 2020/4/1 12:34:00 編輯過

全部評論2

admin
2016年1月15日 23:31
相關(guān)教程:

上面是一些簡單的常用知識點介紹,更詳細的HTML和CSS簡明教程手冊下載地址如下:
附件:html和css標準手冊.zip
附件:工作流表單模板設(shè)計實用頁面設(shè)計方法.ppt 直接預(yù)覽

該評論在 2017/1/11 9:26:53 編輯過
admin
2016年12月17日 18:54
相關(guān)教程:
點晴OA工作流表單模板設(shè)計思路、經(jīng)驗參考及常用模板下載[27692]
  http://9251.oa22.cn
點晴OA工作流表單設(shè)計:表格table及宏控件的HTML、CSS、字體參數(shù)教程詳解[14270]
  http://7968.oa22.cn
點晴OA工作流表單模板創(chuàng)建注意事項(Word、Excel復(fù)制粘貼變形如何解決)[6016]
  http://4746.oa22.cn
點晴OA工作流表單模板中的控件如何取消邊框線寬度,我不想看到邊框線[608]
  http://9739.oa22.cn
如何更改點晴OA工作流申請頁面的寬度?[336]
  http://9765.oa22.cn
工作流模板設(shè)計時明明可以看到表格邊框線,申請時卻看不到邊框,要如何設(shè)置???有視頻教程嗎?[175]
  http://9979.oa22.cn
點晴OA工作流表單模板設(shè)計時如何調(diào)整宏控件大???[301]
  http://9849.oa22.cn
點晴OA工作流表單模板中的下拉框能不能實現(xiàn)直接設(shè)置控件高度?[366]
  http://9875.oa22.cn
如何直接調(diào)整工作流表單模板中表格的單元格行高和列寬?好像不能通過鼠標右鍵彈出菜單的方式設(shè)置[603]
  http://9806.oa22.cn
點晴OA工作流表單模板中如何設(shè)置表格的固定列寬?[20]
  http://10134.oa22.cn

該評論在 2016/12/17 18:54:52 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點,圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務(wù)都免費,不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2024 ClickSun All Rights Reserved