HTML表格(table)属性--左右(colspan)、上下(rowspan)合并、合并边框、位置 部分内容
2019-08-09 13:23
2111 查看
border-collapse: collapse;
rowspan="2"
colspan="2"
<html> <head> <meta charset="utf-8"> <title>商务风格表格的设计与实现</title> <style> /*设置表格总体样式*/ #recruit { width: 100%; border-collapse: collapse;/* 为表格设置合并边框模型: */ text-align: left; } /*设置单元格样式*/ #recruit td, #recruit th { /* font-size: 1em;*/ border: 1px solid orange; padding: 7px; } /*设置标题单元格样式*/ #recruit th { background-color: orange; color: #ffffff; } /*设置单元行样式*/ #recruit tr.orange { background-color: #FFEDDB } </style> </head> <body> <h3>商务风格表格的设计与实现</h3> <hr /> <table id="recruit" border="1"> <caption>招聘信息表</caption> <tr> <th>地点</th> <th>招聘职位</th> <th>公司</th> </tr> <tr> <td>全国</td> <td>产品培训生</td> <td>腾讯</td> </tr> <tr class="orange" > <td colspan="2">全国(左右合并colspan="2")</td> <td>前端开发工程师</td> <td>阿里巴巴</td> </tr> <tr > <td>上海</td> <td>交互设计师</td> <td>网易游戏</td> </tr> <tr class="orange" > <td>北京</td> <td>视觉设计师</td> <td>360</td> </tr> <tr > <td rowspan="2">深圳(上下合并rowspan="2")</td> <td>数据分析师</td> <td>IBM</td> </tr> <tr class="orange"> <td>杭州</td> <td>数据研发工程师</td> <td>微软</td> </tr> </table> </body> </html>
border-spacing
该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 separate,否则将忽略这个属性。
border-collapse:separate; /* 默认样式 */ border-spacing:10px 50px;
相关文章推荐
- C# Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素
- 【HTML】table表格拆分合并(colspan、rowspan)
- 【HTML】table表格拆分合并(colspan、rowspan)
- HTML怎么让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替?
- HTML怎么让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替?
- html table 上下左右边框
- html table 上下左右边框
- HTML表格的rowspan与colspan视频教程 colspan 属性 -- 可以实现HTML表格中一行跨越多列
- HTML中表格属性rowspan与colspan的使用小例子
- 黑马程序员之HTML学习笔记:rowspan属性实现HTML表格中一列跨越多行,colspan 属性实现HTML表格中一行跨越多列
- HTML表格标记教程(38):表头的边框色属性BORDERCOLOR
- HTML表格标记教程(35):跨列属性COLSPAN
- html,表格(table)属性中的 thead、tbody 以及 tfoot的关系
- html中table居中和表格内容居中的问题
- javaScript+css+html——键盘事件(通过键盘上下左右控制图形位置)
- 巧用table的rules属性设置表格的边框掩饰。。。
- POI操作Word中表格 转html的table时解决横跨colspan
- 利用CSS边框合并属性打造table无缝细边框
- html基础 框架网页 将网页分为上下三部分 显示框架的边框线 设置边框线的宽及颜色
- html的table中rowspan colspan实现跨行或者跨列