杜秋霖:不同结构的表格样式 - 蓝色妖姬的日志 - 网易博客

来源:百度文库 编辑:中财网 时间:2024/05/03 06:11:41

 

在圈子里看不出效果,请点击查看原文欣赏!

1.

单行单列

 

代码:





单行单列

2.

一行多列 一行多列 一行多列

代码:







一行多列

一行多列

一行多列

3.

一列多行 一列多行 一列多行

代码:









一列多行

一列多行

一列多行

4.

多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列

代码:















多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

5.

合并列的表格 合并列的表格 合并列的表格 合并列的表格 合并列的表格 合并列的表格 合并列的表格

代码:













合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

6.

合并行的表格 合并行的表格 合并行的表格 合并行的表格 合并行的表格 合并行的表格 合并行的表格

代码:













合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

7.

复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格 复杂表格

代码:
























复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

8.

隐藏 横向 分隔线 隐藏 横向 分隔线 隐藏 横向 分隔线

代码:














隐藏横向分隔线
隐藏横向分隔线
隐藏横向分隔线

 

9.

隐藏 纵向 分隔线 隐藏 纵向 分隔线 隐藏 纵向 分隔线

代码:














隐藏纵向分隔线
隐藏纵向分隔线
隐藏纵向分隔线

10.

隐藏 纵横 分隔线 隐藏 纵横 分隔线 隐藏 纵横 分隔线

代码:














隐藏纵横分隔线
隐藏纵横分隔线
隐藏纵横分隔线

 




只显示右边框

附:表格常用属性

border:表格的边框宽度。如border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。
       cellspacing:表格中各单元格的间距。属性值为数字。当表格只有一个单元格时,则表示该单元格与表格边框的距离。
       cellpadding:单元格内容与单元格边框之间的距离,属性值是数字。
       width:表格的宽度。属性值为像素和百分比两种。
       height:表格的高度。取值方法同width。
       bgcolor:表格的背景颜色。属性值为各种颜色代码。
       background:表格的背景图案。属性值为有效的图片地址。
       bordercolor:表格边框的颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
       bordercolorlight:亮边框(表格的左边和上边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
       bordercolordark:暗边框(表格的右边和下边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
       align:表格的对齐方式。属性值为left(左对齐,默认)、center(居中)以及right(右对齐)。
       colspan:定义合并表格的列数。属性值是数字。
       rowspan定义合并表格的行数,属性值是数字。