Html Table 样式

最新推荐文章于 2024-03-29 11:21:27 发布
最新推荐文章于 2024-03-29 11:21:27 发布
阅读量1.7k 收藏
点赞数
文章标签： table html border c
框线制作常用代码
代码 含义
<table>...</table>建立表格，所有的其他标记都需要在此标记中
  
<table width=* heigth=*></table>设定表格宽度width和高度height，属性值可以使用点数，如：width=50，也可以使用百分比，如：width=50%。
<table bgcolor=*></table> 表格背景色。属性值可使用颜色英文名称如：bgcolor=Blue，也可以使用十六进制值如：bgcolor=#799ED2 。
<table background=*></table>表格的背景图。*=背景图片链接。如background=http://blog.hexun.com/images/rss2.png
<table border=*></table>表格框线的宽度。如：border=5
<table bordercolor=*></table>所有表格框线颜色，色值同上。
<table bordercolordark=*></table>表格框线暗面(即右边.下边)颜色。
<table bordercolorlight=*></table>表格框线亮面(即上边.左边)颜色。
<table align=*></table>表格水平对齐属性。属性值有left(左)center(中)right(右)三种。
<table valign=*></table>表格垂直对齐属性。属性值有top(顶部)bottom(底部)两种。
<table cellspacing=*></table>单元格间隙属性。
<table cellpadding=*></table>单元格数据间隙属性。
<table rules=*></table>表格内框线属性。rules=none(隐藏表格内所有框线)。rules=rows(显示所有行间的水平框线)rules=cols(显示所有列间的垂直框线)
 
<tbody>....</tbody>body标记就是HTML文件的内容，内可含有所有文字、图片、表格和多媒体文件等组合。处于<table></table>内。
 
<tr>......</tr>行。一组<tr></tr>为表格一行
<td>.....</td>单元格。在<tr>与</tr>之间，一组<td></td>就是一小格。注：单元格也可以自设定高宽度，如：<td width=150 height=30></td>
<td rowspan=*></td>表格的行合并。*＝全部合并行数，如rowspan=5，指向下合并四行。
<td colspan=*></td>单元格合并。*＝全部合并格数，如colspan=5，指向右合并四格。
<td width=* height=* align=* valign=* bordercolor=* bgcolor=*></td><td>也可以像<table>那样使用多种属性代码定义单元格自有属性。
  
其它常用代码 
<img src=图片链接 width=* height=*></img>贴图代码。
<br>换行代码。这个代码只有单个，没有</br>
<p>......</p>分段代码。
  
示例 
<table width=* height=* bgcolor=* border=* bordercolor=* cellspacing=* cellpadding=*>
<body>
<tr>
<td>
此处加入内容
</td>
</tr>
</body>
</table>		这就是一个带方框的代码贴子最基本的形式。如果在table和td里加上上边介绍的各种属性代码，或者增添tr和td的组数，就可以做出形式各异的贴子。
 
  

 

各种纯代码边框
<TABLE cellSpacing=0 borderColorDark=#4c8328 cellPadding=0 width=10 height=10 borderColorLight=#98d470 border=8> <TBODY> <TR> <TD> <TABLE cellSpacing=0 borderColorDark=#98d470 cellPadding=0 width="100%" bgColor=#ffffff borderColorLight=#4c8328 border=6> <TBODY> <TR> <TD> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD> <TABLE cellSpacing=0 borderColorDark=#4c8328 cellPadding=0 width="100%" borderColorLight=#98d470 border=2> <TBODY> <TR> <TD> <TABLE cellSpacing=0 borderColorDark=#98d470 cellPadding=0 width="100%" bgColor=#ffffff borderColorLight=#4c8328 border=3> <TBODY> <TR> <TD> <TABLE cellSpacing=5 cellPadding=0 width=500 height=600 border=0> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>
<TABLE style=" BORDER-BOTTOM: #cc9900 4px dashed" cellSpacing=0 cellPadding=10 align=center height=600> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE>
<TABLE style="BORDER-RIGHT: Blue 5px dashed; BORDER-BOTTOM: Blue 5px dashed" cellSpacing=0 cellPadding=0 align=center> <TBODY> <TR> <TD> <TABLE borderColor=Blue height=600 cellSpacing=2 cellPadding=40 width=500 align=center bgColor=Blue border=3> <TBODY> <TR> <TD background=背景图链接> <TABLE border=0> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>
<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#2907b5 cellSpacing=0 cellPadding=5 width=650 align=center border=10> <TBODY> <TR> <TD> 内容........ </TD> </TR> </TBODY> </TABLE>
<TABLE style="BORDER-RIGHT: #000000 5px dotted; " cellSpacing=3 cellPadding=5 width=500 height=500 align=center border=5> <TBODY> <TR> <TD> <TABLE cellSpacing=0 cellPadding=0 width="75%" border=0> <TBODY> <TR> <TD> 内容...... </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=100% border=0> <TBODY> <TR> <TD> <center> <TABLE cellSpacing=0 cellPadding=0 width=100% border=0> <TBODY> <TR> <TD vAlign=top width=100% height=20> <TABLE style="WORD-BREAK: break-all; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width=10% border=0> <TBODY> <TR> <TD width=26></TD> <TD style="LINE-HEIGHT: 18px" width=100%> <TABLE cellSpacing=0 cellPadding=15 width="100%" border=0> <TBODY> <TR> <TD vAlign=top width="100%" bgColor=#ffffff> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD vAlign=top> <center> <TABLE style="BORDER-RIGHT: #000000 4px dotted; BORDER-BOTTOM: #000000 4px dotted" cellSpacing=0> <TBODY> <TR> <TD> <TABLE style="BORDER-RIGHT: #000000 2px dotted; BORDER-BOTTOM: #000000 2px dotted" cellSpacing=0> <TBODY> <TR> <TD> <TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 width=100% border=5> <TBODY> <TR> <TD> <center> <TABLE cellSpacing=0 cellPadding=5 width=500 height=600 border=0> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </center> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </center> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </center> </TD></TR></TBODY></TABLE>
<table style="BORDER-TOP-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#666666 cellSpacing=0 cellPadding=0 align=center border=2> <tbody> <tr> <td> <table style="BORDER-TOP-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted" borderColor=#666666 cellSpacing=0 cellPadding=2 border=2> <tbody> <tr> <td> <table style="BORDER-RIGHT: #666666 1px dotted; BORDER-BOTTOM: #666666 1px dotted" borderColor=#666666 cellSpacing=2 cellPadding=4 width=500 height=600 align=center border=1> <tbody> <tr> <td> 内容...... </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table>
<table style="BORDER-TOP-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#000000 cellSpacing=0 cellPadding=0 border=3> <tbody> <tr> <td> <table style="BORDER-TOP-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted" borderColor=#000000 cellSpacing=0 cellPadding=0 border=3> <tbody> <tr> <td> <table style="BORDER-TOP-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#000000 cellSpacing=0 cellPadding=0 border=4> <tbody> <tr> <td> <table style="BORDER-TOP-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted" borderColor=#000000 cellSpacing=0 cellPadding=0 border=3> <tbody> <tr> <td> <table style="BORDER-RIGHT: #000000 0px ridge; BACKGROUND-COLOR: #000000" cellSpacing=3> <tbody> <tr> <td> <table style="BORDER-TOP-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#ffffff cellSpacing=0 cellPadding=0 border=2> <tbody> <tr> <td> <table style="WIDTH: 500px; BORDER-BOTTOM-STYLE: dotted" borderColor=#ffffff height=0 cellSpacing=0 cellPadding=10 border=3> <tbody> <tbody> <tr> <TD style="COLOR: #ffffff"> 内容...... </TD> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table>
******************************
<TABLE style="BORDER-RIGHT: #4d2d7d 3px dotted; BORDER-BOTTOM: #4d2d7d 3px dotted" cellSpacing=0 cellPadding=0 align=center> <TBODY> <TR> <TD> <TABLE style="BORDER-RIGHT: #7d69c9 6px dotted; BORDER-BOTTOM: #7d69c9 6px dotted" cellSpacing=0 cellPadding=0 width=10> <TBODY> <TR> <TD> <TABLE style="BORDER-RIGHT: #4d2d7d 8px dotted; BORDER-BOTTOM: #4d2d7d 8px dotted" cellSpacing=0 cellPadding=0 width=10> <TBODY> <TR> <TD style="BORDER-RIGHT: #7b7bc0 1px dotted; BORDER-BOTTOM: #7b7bc0 1px dotted" borderColor=#7b7bc0 width=10 bgColor=#7b7bc0 height=10 border="0" cellpadding="0" cellspacing="0"> <TABLE height=600 cellSpacing=0 cellPadding=20 width=500 background=背景图链接 border=0> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>
<TABLE style="BORDER-RIGHT: #3faf6c 6px dotted; BORDER-BOTTOM: #3faf6c 6px dotted" cellSpacing=0 cellPadding=0 align=center> <TBODY> <TR> <TD> <TABLE style="BORDER-RIGHT: #439b43 6px dotted; BORDER-BOTTOM: #439b43 6px dotted" cellSpacing=0 cellPadding=0 width=10> <TBODY> <TR> <TD> <TABLE style="BORDER-RIGHT: #94d1b9 5px dotted; BORDER-BOTTOM: #94d1b9 5px dotted" cellSpacing=0 cellPadding=0 width=10> <TBODY> <TR> <TD style="BORDER-RIGHT: #3f6c3f 2px dotted; BORDER-BOTTOM: #3f6c3f 2px dotted" borderColor=#3f6c3f width=10 bgColor=#3f6c3f height=10 border="0" cellpadding="0" cellspacing="0"> <TABLE height=600 cellSpacing=0 cellPadding=20 width=500 background=背景图链接 border=0> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>
<TABLE cellPadding=3 width="480" bgColor=#000000 border=0> <TBODY> <TR> <TD> <TABLE height=660 cellSpacing=0 cellPadding=10 width=480 border=5 bortercolor="#000000"> <TBODY> <TR> <TD style="COLOR: #99ccff">内容....... </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE>
<TABLE cellPadding=5 height=600 width=500 align=center border=5> <TBODY> <TR> <TD> 内容...... </TD> </TR> </TBODY> </TABLE>
<TABLE width=500 height=600 borderColor=#aaaaaa cellSpacing=25 cellPadding=5 align=center bgColor=#eeeeee border=10> <TBODY> <TR> <TD> 内容...... </TD> </TR> </TBODY> </TABLE>
<TABLE borderColor=#ebd0be cellSpacing=2 cellPadding=3 width=180 height=120 bgColor=#000000 border=5> <TBODY> <TR> <TD style="COLOR: #ffffff">内容...... </TD> </TR> </TBODY> </TABLE>
<TABLE cellSpacing=0 width=10> <TBODY> <TR> <TD> <TABLE cellSpacing=0> <TBODY> <TR> <TD> <TABLE cellSpacing=0> <TBODY> <TR> <TD> <TABLE borderColor=#663300 cellSpacing=1 borderColorDark=#663300 cellPadding=1 width=10 align=center border=4> <TBODY> <TR> <TD> <TABLE cellSpacing=3 cellPadding=5 borderColor=white height=600 width=500 border=3> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>
<TABLE style="BORDER-RIGHT: 8px groove; BORDER-BOTTOM: 8px groove" height=500 cellSpacing=5 borderColorDark=#808080 cellPadding=2 width=500 align=center borderColorLight=#c0c0c0 border=7> <TBODY> <TR> <TD> 内容...... </TD> </TR> </TBODY> </TABLE>
<table style="BORDER-RIGHT: #a6b9f2 8px ridge; BACKGROUND-COLOR: #e6e7f6" cellSpacing=15 cellPadding=5 align=center border=10> <tbody> <tr> <td> 内容...... </td> </tr> </tbody> </table>
  
 
yuling59520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
漂亮的table表格样式
06-16
非常漂亮 实现简单 亮蓝色 鼠标移动变色
HTML table样式
qq_43527694的博客
07-13 5122
如果想在网页中建一个如下table表格应该怎么做呢？ 首先建一个表<table> <table>/*table标签就是建一个表格*/ <tr>/*tr标签就是table row，即为表格中的一行*/ <th>学号</th>/*th标签即table head，就是表头*/ <th>姓名</th> <th>手机号</th> <th>家庭地址</th&
前端学习笔记一一HTML表格标签（table）
最新发布
2303_77877769的博客
03-29 1157
大象哺乳纲动物群居草食一个表格只能有一个标题在上述代码的间添加表格宽度为width，高度为height语法为语法为在对齐方式中填入相应的属性值：left:左对齐center：居中right：右对齐border值不设置时或设置为0时，显示为无边框语法为, 5为边框宽度语法为， 各颜色对应的具体编码可从网上查找表格内框宽度属性用于设置表格内部每个单元格之间的间距语法为在默认情况下，单元格里的内容会紧贴着表格的边框，这样看上去会非常拥挤，可用词语法设置其间距离语法为语法为语法为。
html table background,HTML Table Background
weixin_34157892的博客
06-16 330
HTML Table BackgroundThis page contains HTML table background code. This code enables you to modify the background of your HTML tables. For example, you can change the background color or add a backgr...
HTML中Table表格的使用与漂亮的表格模板
热门推荐
pan_junbiao的博客
08-04 6万+
1、表格标记 表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。 标记 说明 表格标记<table> <table></table>标记表示整个表格。<ta...
在html <table> 标签的中background和bgcolor两个属性有什么关系？
a18351660773的博客
03-16 772
两者没有关系，一个设置制定标签的背景图片一个是设置背景颜色。 是HTML中标签的背景颜色属性，而background是CSS中的属性，bgcolor只定义背景颜色。 background可以定义如下属性： background-color 规定要使用的背景颜色； back...
html,table常用样式
11-30
html,table常用样式，适用于对htm样式美观有要求的项目
分享一个首行表头和最左列和最右列固定中间滚动的html table样式
12-22
一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列...
table样式.zip
06-09
这个可以帮助你们在web前端开发中，绘制HTML的Table更美观，漂亮， HTML自定义Table 好看的Table样式 前台Table样式
HTML常用table样式
08-06
源代码包 博文链接：https://atgoingguoat.iteye.com/blog/2074431
html中table的表格样式
05-24
NULL 博文链接：https://zhou-hong-liang.iteye.com/blog/365301
html table专业样式,html 简单的table样式
weixin_30562025的博客
06-20 2524
1 2 3 4 5 html 简单的table样式6 7 /*gridtable*/8 table.gridtable{9 font-family:verdana,arial,sans-serif;10 font-size:11px;11 color:#333333;12 border-width:1px;13 border-color:#666666;14 bor...
html 简单的table样式
z_qifa的博客
07-03 2万+
效果预览： 代码： 1 DOCTYPE html> 2 html> 3 head> 4 meta charset="utf-8"> 5 title>html 简单的table样式title> 6 style type="text/css"> 7 /* gridtable */ 8 table.grid
html 给表格添加背景,HTML中新建表格怎么加背景
weixin_36222664的博客
07-01 6448
在html中，可以使用background属性设置新建表格中的背景，只需要给表格元素设置“background:属性值”即可。background属性在一个声明中设置所有的背景属性，可以设置对象为纯色的背景颜色，也可以设置图片为背景。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。表格的颜色设置非常简单，和文字的颜色设置完全一样。CSS通过bac...
前端知识分享小课堂基础篇—html(table表格标签)
yunduanaoligei的博客
12-15 485
今天分享下”前端知识分享小课堂基础篇—html(table表格标签)“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 表格的标签组成HTML中的表格是由为主体标签，浏览器会将该标签解释为一个表格。表格中的行使用标签进行定义。标签为标签的子类，设置若干个标签可以将表格分割为若干个行。标签的子类，因此每个行都需要设置相应数量的标签用于定义表格的列，标签为又是标签来分割列，形成一个完整的表格。 表格的标签组合关系为： XM
Html漂亮的table样式模板
干饭银的足迹——博客
08-23 6304
Html漂亮的table样式模板
HTML——表格的基本样式
iheyu(一个新手小白女PHP初学者)
08-20 1869
表格在以前用的比较多，之前的表格主要是作面布局！表格的代码不好维护不推荐使用！ div+css布局就代替表格！ 1.在页面里面做表格用——> <table></table>——>在页面的表格是怎么定义的——>表格组成元素是行——> <tr></tr> ——>把一行分成了若干单元格——>标题标签——> &l...
htmltable样式
09-24
我们可以使用CSS样式来设置HTML表格的样式。要显示表格边框，可以在\<table>标记中添加属性border="1" cellspacing="0"。另外，可以使用CSS样式来设置表格的边框和单元格的样式，例如使用border-collapse属性来控制...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值