HTML表格(table)属性--左右(colspan)、上下(rowspan)合并、合并边框、位置 部分内容
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;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库