html表格设计（分列，设置边框）
先放一段代码，展示效果，再详细解释。
<html>
<body><table border = "1px" cellspacing = "0px" width = "800px"><tr><th colspan="2">姓名</th><td colspan="3" style="background-color:#f5f5f0;">Rhett Butler</td></tr><tr><th colspan="2">性别</th><td colspan="3" style="background-color:#f5f5f0;">男</td></tr><tr><th colspan="2">年龄</th><td colspan="3" style="background-color:#f5f5f0;">40</td></tr><tr><th width="20%">三个爱好</th><td width="20%" contenteditable="true" > </td><td width="20%" contenteditable="true"> </td><td width="20%" contenteditable="true"> </td><td width="20%" contenteditable="true"> </td></tr><tr><th width="20%">三个特长</th><td width="20%" contenteditable="true"> </td><td width="20%" contenteditable="true"> </td><td width="20%" contenteditable="true"> </td><td width="20%" contenteditable="true"> </td></tr><tr><th colspan="2">今日心情</th><td colspan="3" contenteditable="true"> </td></tr></table>
</body>
</html>运行效果如下：
这个运行结果可以自己复制代码到https://www.w3school.com.cn/tiy/t.asp?f=eg_html_td_colspan网页去尝试，直接运行查看效果。
其中包含的知识点有：
（1）一个表格内不同行的列数不同。
采用的办法是colspan属性
colspan="3"
在这段代码中我限制了table整体的宽度为800px，之后限定单元格宽度的行数为第四行和第五行。在第四行和第五行设置了5个单元格，也就是分为5列，每列宽度都为20%。
之后我设置其他行的第一个单元格横跨两列，第二个单元格横跨3列。
就可以实现同一个表格内不同行有不同的列数。
（2）设置表格的边框
初始的表格边框是双层的，不太像我们平时使用的表格形式，因此需要修改边框格式。
border = "1px" cellspacing = "0px"
使用cellspacing属性将单元格之间的空隙设置为0即可。
（3）设置空单元格
这个就是基础知识点了
<td> </td>
用 当作空的占位符即可，不要忘记设置合适的宽度。
（4）设置单元格内容是否可更改
单元格内容默认是不可让用户手动在界面输入更改的。但是在一些情况下，我们需要让用户手动输入部分内容，因此就可以设置单元格属性，设置为内容可更改。
contenteditable="true"
tips：一般不可更改的单元格可以用灰色加以区分。
结语
其他的好像没了，其实都是一些基础的知识，但是业余人员从零开始，还是要费大劲查找。再次整理一下，方便日后使用。后面遇到其他的再整理。
html表格设计（分列，设置边框）相关推荐
- relativelayout设置边框_Android表格布局之设置边框
Android表格布局本身没有边框,不过可以通过背景色的设置可以实现表格边框的显示. 首先可以设置TableRow的背景色,然后设置内容的背景色.根据它们的颜色差就出现了边框.只要微调Content与 ...
- android wps表格如何设置边框颜色
今天,简单讲讲如何使用WPS Excel设置表格边框. 这个可以说可android的关系不大,但是之前工作时,组长让我写一下工作计划要求用表格写.我完成后,组长说要是美观一些就好,于是自己查询了相关资 ...
- 计算机考试中如何设置表格外边框,Excel表格中怎么为单元格区域设置边框
在Excel表格工作表中,我们可以为选中的单元格区域设置各种类型的边框.Excel表格中为单元格区域设置边框的方法其实很简单,下面由学习啦小编告诉你! Excel表格中为单元格区域设置边框的方法 01 ...
- 用jacob为word表格设置边框线
网上关于jacob如何操控word的例子已经有很多,但基本处理出来的表格,是没有边框线的. 在这里对此我做点补充,jacob版本是1.17 ActiveXComponent word = new Ac ...
- html表格分行分列,excel表格内怎样设置分行和分列
Excel中的表格经常需要用到分行分列的功能,具体该如何做到分行又分列呢?接下来学习啦小编举例简单的例子告诉大家excel表格分行分列的设置方法,欢迎大家来到学习啦学习. excel表格分行分列的设置 ...
- java导出excel设置边框_Excel如何设置表格边框样式，记住这几个关键属性就懂了
Excel表格边框的设置,对于制作一个漂亮的工作表,十分有用. 由于审美的差异,我们通常做的表格都是以黑色边框白底为主,或者说,有些人根本不知道除了黑白表格还有带颜色的. 如何设置表格边框属性呢,下面 ...
- python3-xlwt-Excel设置表格基础(字体颜色 背景颜色 设置边框 边框颜色 冻结窗口 字体大小 字体高度 字体加粗 下划线 斜体字 单元格对齐方式 自动换行 删除线 超链接 插入公式)
文章目录 引入xlwt和创建workboos对象 初始化样式和创建设置字体,赋值给style 保存文件 自定义样式 字体颜色 背景颜色 设置边框 边框颜色 冻结窗口 字体大小 字体高度 字体加粗 下划 ...
- 知识学习1：word插入表格，标题行边框分开设置
知识学习1:word插入表格,标题行边框分开设置 遇到问题:发表文章中,表格基本是三线形势,当标题行1个单元格涵盖多行内容,又有多块内容时,将每块内容分开会更加清晰,那么应该怎么设置内. 示例: 设置 ...
- html表格虚线外边框,html表格虚线怎么设置
HTML如何在表格与表格之间加虚线,我已经border设单元格之间加虚线么?border不要设置为零,给个dashed样式就可以了,举个栗子 TEST table{margin:100px;borde ...
- B端数据表格设计实战指南（建议收藏）
作者:nick (转载已取得作者授权) 1. 前言 在企业级中后产品中,通常大量使用表格来展示结构化的数据.合理地设计表格能给用户带来高效的信息获取率,但如何言而有物地设计表格,相信是绝大数刚入行B端 ...
最新文章
- 一个爬虫的故事：这是人干的事儿？
- js和Java分别正则匹配小数点后多余的0
- mysql 社区版 阿里云_Mysql各版本介绍及下载
- WinForm应用只运行一次
- Redis复制（Replication）
- 20155225 实验三《敏捷开发与XP实践》实验报告
- python限制输入值范围_求python 中if 里如何设定一个值的范围
- 编程方法学12：枚举
- 前端学习（1928）vue之电商管理系统电商系统之美化一层循环的UI结构for循环ui美化
- Perl中的替换(七)
- ubuntu15.04 php版本,在ubuntu下安装php版本问题
- canvas填充和描边介绍
- [开源软件]数值计算软件OCTAVE 、SCILAB与R简介
- AvalonDock使用（1）-基本用法
- html返回的状态值,iradon函数返回的是什么值
- 基于python的手机号码归属信息查询系统
- 为什么重写equals方法时必须重写hashcode方法
- vs code 保存显示无法写入文件的解决方法
- 用Cool Edit Pro 2.1做铃声渐入的效果
- 无MAC法安装genymotion的解决办法_Invalid reply from server..