点晴永久免费OA工作流表单设计:表格table及宏控件的HTML、CSS、字体参数教程详解
当前位置:点晴OA办公管理信息系统
→『 工作流使用交流 』
说明: 虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网管掌握一定的HTML、CSS、Javascript等相关知识还是很有必要的,否则只能按照系统默认效果显示使用了。 其实并不需要太多高深的知识,懂些皮毛就够了,主要是如何固定表格宽度、行高、列宽、居中、颜色、字体大小之类的。 下面对一些简单常用的HMTL和CSS知识进行了介绍,详细的相关知识请自行百度获取。以下内容都必须将编辑器切换到源码模式下才能操作: Kinder编辑器 ClickSun编辑器 对table设置css样式边框,分为几种情况: <table width="400" border="10" cellspacing="2" ceelpadding="5"> width="400" border="10" cellspacing="2" cellPadding=5 align="CENTER" valign="TOP". background="背景图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF" 一、只对表格table标签设置边框 只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。 对应html代码片段
效果图: 二、对td设置边框 对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。 对应html源代码片段
效果图: 三、对table和td技巧性设置表格边框 如上第二点,只对表格对象td设置单一边框样式,中间部分td与td标签之间就会出现双边框现象。 对应html源代码片段:
效果图: 四、对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> 该文章在 2020/4/1 12:34:00 编辑过
|
关键字查询
相关文章
正在查询... |