表格如何调出好看的样式？

html部分：

<table><tr><td>属性1</td><td><input type="text"></td><td>属性2</td><td colspan="2"><input type="text"></td></tr><tr><td rowspan="2">属性1</td><td rowspan="2"><input type="text"></td><td rowspan="2">属性2</td><td>姓名</td><td><input type="text"></td></tr><tr><td>年龄</td><td><input type="text"></td></tr><tr><td>属性1</td><td colspan="4"><input type="text"></td></tr>
</table>

css部分：

table {width: 960px;border-collapse: collapse;  /*应用于表格的样式，合并相邻单元格的边框*/
}
table td {height: 40px;line-height: 40px;margin: 0px;padding: 0px;font-family: "仿宋";font-size: 18px;text-align: center;line-height: 40px;border: 1px solid #ABABAB;
}
table input {/*可输入区域样式*/display: inline-block;width: 100%;height: 40px;line-height: 40px;margin: 0;padding: 0;border: none;background: none;
}

要清楚rowspan和colspan的使用：

注：每一种颜色代表每一行，也就是tr标签里面的内容，绿色那一行包含了属性1，属性2，姓名；而蓝色的那一行只包含了年龄，这是因为属性1和属性2已经使用了rowspan="2"，占了上下两个单元格，所以蓝色一行只有两个单元格可展示，而且只能展示在姓名下面，只有那两个单元格是没有被占用的；对于最后一行紫色那行，属性1右边的内容占了4个单元格，所有用了colspan="4"
效果如下：

表格如何调出好看的样式？相关推荐

表格行与列边框样式处理的原理分析及实战应用
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:韩宇波导语:table之间的边框存在共用问题,自然而然就存在冲突.既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题.本文就主要研 ...
CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式
转自爱设计原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为 ...
android按钮好看的样式
按钮好看的样式首先来一张全部的样式: 下载demo的地址:在最下面简介: 1.按下变背景颜色 2.按下变字体颜色 3.圆角 4.边框 5.背景半透明 6.透明.边框.圆角组合 7.背景颜色.字体颜 ...
使用表格和 CSS 设计天气预报样式
使用表格和 CSS 设计天气预报样式一.实验题目:使用表格和 CSS 设计天气预报样式二.实验内容:设计如下图所示的天气预报样式,可适当加入其他元素三.实验步骤:写明实验具体内容及步骤.源代码. ...
用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式第6章 CSS设置表格与表单样式学习目标什么是表格模型对数据表格应用样式. 创建简单和复杂的表单布局对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
xlsx-style使用(导出表格及修改单元格样式)
xlsx-style使用(导出表格及修改单元格样式) 针对导出表格需要与xlsx配合使用,通过xlsx的方法生成sheet对象然后在对象上修改样式本文对xlsx-style 如何修改单元格样式做了 ...
使用word中的宏实现选中指定类型表格，并且批量修改样式结构
使用word中的宏实现选中指定类型表格,并且批量修改样式结构 Sub SelectAllTables() ' ' SelectAllTables 宏选中所有表格 ' 'Dim tempTable A ...
Excel每隔2行间隔设定颜色，是表格更加直观好看
今天小编要和大家分享的是,Excel每隔2行间隔设定颜色,是表格更加直观好看的操作,比如说下图中的重复的1-2月设置-- (方方格子插件) 1.先看动图演示吧 2.首先我们选中需要间隔设置的数据区域 ...
html中表格边框好看的样式,table完美css样式 table表格边框样式
蕃薯耀2016年6月15日星期三一.的css样式边框线不会重复叠加,不会有些粗有些细,全部统一. /**/ -{ /*-moz--; --border-radius:5px; border-rad ...
cass怎么添加指北针图例_怎么才能在excel中把表格做的好看？
在日常工作中,数据分析往往不可或缺. 那么如何将图表做的好看? excel操作分享一些可操作的牛逼图表做法: 1.excel对比图表第一步:点击插入--图表--插入柱形图或条形图第二步:选中柱形 ...

表格如何调出好看的样式？

表格如何调出好看的样式？相关推荐

最新文章

热门文章