html表格制作应该注意什么软件,html表格制作
一、简单表格制作
举个例子来说,如果今天我们要做一个3栏2列的表格,在WORD中,只要设定表格为3栏、2列就完成了,不过,在网页中做一个3栏2列的表格,可是要分成好几个步骤的:
第一个步骤,利用
标签告诉电脑我要做一个表格;
第二个步骤,利用一组
标签先做一个横列,然后在横列中利用三组标签再分出三栏;
第三个步骤,重复第二个步骤,再做一横列然后再分三栏,如此才能得到一个3栏2列的表格。听不太懂吗?没关系,以下咱们就来慢慢的看个仔细:
A、首先我们来看一个最简单的表格:
代码:
1 |
结果:
1
利用
B、现在我们再来增加二个格子:
代码:
1 | 2 | 3 |
结果:
123
C、看见没有,
没有增加,却增加了二组。那如果我要再加上一列呢?很简单,就像这样:
代码:
1 | 2 | 3 |
4 | 5 | 6 |
结果:
123
456
二、合并表格栏位
1、左右栏位合并:如何将 1、2、3 格通通合并变成一大格
代码:
1 | ||
4 | 5 | 6 |
结果:
1
456
您应该会发现,怎么2、3都消失了?只剩下1,而且该栏的
标签还多了一个陌生的脸孔COLSPAN="3",没错,这就是“左右栏位合并”的属性,COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”,也正因如此,本来的两个都可以省掉了,因为都被并掉了嘛!
2、上下栏位合并:如何上下合并,将 1、4格通通合并变成一大格
代码:
1 | 2 | 3 |
5 | 6 |
结果:
123
56
有了上一次的经验后,我们就知道,要合并栏位就一定有些栏位会被“牺牲”掉(也就是那些被合并的栏位啦!),这次我们要“上下合并”,我们将1与4合并成一个栏位,那么被牺牲的是哪一个栏位呢?没错就是下面那一个倒楣的4,我们看看上图,果然4已经删掉了,而在1的
标签中则多了个生面孔ROWSPAN,这就是“上下栏位合并”的属性,ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”。
三、表格对齐设置
1、我可以自己设定表格的大小吗?当然可以,您可以自由设定表格的“宽”及“高”喔!我们来制作一个宽100、高60的表格,做法如下:
代码:
1 |
结果:
1
2、哎呀!怎么1老是在表格的左边呢?可以弄到中间吗?当然可以,只要在
加入 ALIGN=CENTER 这参数即可:
代码:
1 |
结果:
1
此外,利用 ALIGN=RIGHT可以让表格中物件置右、利用 ALIGN=LEFT可以让表格中物件置左(预设值),至于为什么要加在
中呢?因为,是一个栏位的意思,我们要指定在这栏位中的东西要置中或置左置右,就必须将ALIGN加在中。
3、既然可以置中,那么也可以控制表格内文字靠上方、靠下方吗?可以的,只要利用 VALIGN=TOP 这种属性即可让表格内物件靠上方对齐。
代码:
1 |
结果:
1
利用VALIGN=MIDDLE可以让表格中物件垂直置中(预设值),VALIGN=BOTTOM可以让表格中物件靠下方。
四、表格背景设置
1、那么表格可以设定底色吗?可以的不但表格可以,您也可以指定某栏或某列的颜色,方法和加背景颜色一样,利用BGCOLOR="颜色码"就行了。底下是指定整格表格背景颜色的方法:
代码:
1 | 2 |
3 | 4 |
结果:
12
34
将BGCOLOR="颜色码"加在
中,可以指定“一列”的背景颜色:
代码:
1 | 2 |
3 | 4 |
结果:
12
34
将BGCOLOR="颜色码"加在
中,可以指定“一栏”的背景颜色:
代码:
1 | 2 |
3 | 4 |
结果: 12
34
2、表格除了可以设定底色外,也可以用图片来作背景吗?当然可以,方法一样简单,只要将BACKGROUND="图片地址"加到表格中就行了。和表格背景颜色一样,不但表格可以设定背景图片,您也可以指定某栏或某列的背景图片:
代码:
1 | 2 |
3 | 4 |
结果:
12
34
将BACKGROUND="图片地址"加在
中,可以指定“一栏”的背景颜色:
代码:
1 | 2 |
3 | 4 |
结果:
12
34
五、 表格框线设置
1、如何设定表格粗细?只要利用BORDER="粗细值"就行了。
代码:
1 |
结果: 1
2、如何设定表格颜色?只要利用BORDERCOLOR="颜色码"就行了
代码:
1 |
结果:
1
3、另外,我们也可以设定表格的阴影、亮面颜色,让表格看起来更有立体感喔!只要利用 BORDERCOLORLIGHT="#颜色码"(亮面设定) BORDERCOLORDARK="颜色码"(暗面设定)就行了。
代码:
1 |
结果:
1
六、表格栏距设置
1、我们可以利用CELLPADDING属性自由设定表格内文距离格线的距离,这个属性很好用,保持适当的距离,看起来比较舒服。一般而言内定值为2,不过我建议设定为4比较漂亮。
代码:
1 | 2 |
结果:
12
2、我们可以利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2,不过我通常习惯设为 0 。
代码:
1 | 2 |
结果:
12
HTML表格制作相关文章链接:
HTML表格制作:
HTML表格标记详解1:标签定义 TABLE参数设定
HTML表格标记详解2:TR参数设定
HTML表格标记详解3:TD参数设定
HTML表格标记详解4:TD参数中设定跨列跨行属性
HTML表格标记详解5:TH参数中设定
HTML表格标记详解6:CAPTION标题参数设定
HTML表格标记详解7:THEAD表首标记/TBODY表主体标记/TFOOT表尾标记
HTML表格标记详解8:表格嵌套
HTML表格标记详解9:表格边框的css修饰语法
html表格制作应该注意什么软件,html表格制作相关推荐
- DVDStyler(dvd制作工具)官方中文版V3.2 | 制作dvd视频光盘软件下载 | 怎么制作dvd视频光盘
DVDStyler 是一款优秀跨平台且完全免费开源的制作dvd视频光盘软件,友好的用户界面,支持拖放和多核处理器,可基于可缩放矢量图形的灵活菜单创建,采用交互式菜单创建和刻录具有专业外观的DVD视频, ...
- 制作PHP动态网页软件,使用PHP制作动态网页过程中的五个技巧_php
1. str_replace str_replace是常用的php函数,用于字符串替换,经常看到某些php新人为了替换一批字符串,写了好多行str_replace,实在是惨不忍睹. 比如这个例子: P ...
- python制作网页用什么软件_网页制作软件有哪些?好用的网页制作软件是怎样的?...
网页制作软件有哪些?好用的网页制作软件是怎样的?对于网站编辑来说,网页编辑器是一个常用的软件,目前网页编辑器也有很多类型,对于新手来说,你不知道网页编辑器有哪些?其实,选择合适的web编辑器软件会提高 ...
- Linux下制作动图的软件,Linux 下制作Gif动画
1,首先使用ffmpeg将视频转换成帧图片 liuwei@IT:~/make gif$ ls temp 人再囧途之泰囧BD.rmvb liuwei@IT:~/make gif$ ffmpeg -i ...
- web表格控件FineReport作为企业web表格制作软件的核心优势
web表格控件FineReport作为企业web表格制作软件的核心优势 报表表格设计器 Excel表格的设计风格 企业在选择报表表格解决方案时,不仅要考虑报表表格工具的功能和服务,还要考虑它是否易学. ...
- 计算机表白那个视频教程,表白软件制作_表白软件制作教程_表白软件制作视频教程 _课课家...
第一阶段: EXCEL自定义符合自己习惯的操作环境及 Office软件默认的工作环境都是一样的,但默认的工作环境可能并不适合每个用户的使用习惯.为了更加高效地完成工作,通过本课程的学习,熟悉Excel ...
- 标签设计软件如何批量制作ITF14码
ITF14码对印刷精度要求不高,适合直接印刷于表面不够光滑.受力后尺寸易变形的瓦楞纸或纤维板上.其条码内容由14位数字且最后一位为校验位(校验位数字自动生成)组成,ITF14码四周有矩形保护框,且左右 ...
- 中琅条码软件如何批量制作防伪条形码
在很多产品的防伪标签上,防伪的形式也是多种多样,有数字防伪码也有防伪条形码,防伪二维码等,今天我们就来为大家演示一下如何使用中琅条码软件来批量制作防伪条形码? 首先,再中琅条码软件可以将标签纸设置为和 ...
- 标签设计软件如何批量制作CEPNet码
打开中琅标签设计软件,在文档设置窗口,点击"纸张"选项卡,纸张下拉选项选择"自定义大小",然后设置纸张尺寸. 然后选择"布局"选项卡,手工设 ...
最新文章
- 转载文章,感觉真的很心酸
- 2021-04-17 安装Ubuntu18.0.4 的深度学习训练服务器
- docker php 多端口,docker使用之php-fpm+apache多容器的xdebug和phpstorm的配置
- Mybatis框架中SqlSessionFactory
- 入门Python,限时1元!
- java点击关闭弹出窗口_java – JPopupMenu在子弹出窗口打开时关闭
- win10快速运行vue项目跑起来 - 方法篇
- rhel7 mysql无法运行_redhat7下mysql5.7.12重启电脑后起不来问题
- “出道” 5 年采用率达 78%,Kubernetes 为何如此成功?
- 任正非为什么向两千多年前的李冰父子学习?
- matlab交流电路仿真,单相交流调压电路Matlab仿真
- NiFi 学习 —自己实现处理器
- Keil4工程转keil5工程方法
- 求最大公因数的几种算法
- 手把手教你用EZDML批量生成vue-element-admin前端页面代码
- 用python3根据配置自动生成自定义图片logo(一键解决图片侵权困扰)
- splatter包安装总结
- 交互入门——基于鼠标控制的射击飞碟小游戏
- John Peluso、Chris 谈话筒设计及应用
- i5 1035G4和i5 1035G1 哪个好
热门文章
- Android 内存泄漏问题多多,怎么优化?
- 第二十二届中国科协年会开幕,百度CTO王海峰等共话产业发展机遇
- 从芯片到 AI 生态,52 岁英特尔的蜕变!
- 「刷新 CTO」微软与 CSDN 的 CTO 转型思想汇
- 虚拟化技术发展编年史
- “数”有专攻、智“汇”武汉,周末技术沙龙Call你来!
- Python 狠甩 Java,Rust 持续称王!揭晓Stack Overflow 2019 开发者报告
- 一文详解 React 组件类型
- 谁人来帮库克卖“苹果”?
- 「傻瓜」才能写出好代码!