Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > HTML表格（table）属性--左右（colspan）、上下（rowspan）合并、合并边框、位置 部分内容
Blogger Information
Blog 8
fans 0
comment 0
visits 14620
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML表格（table）属性--左右（colspan）、上下（rowspan）合并、合并边框、位置 部分内容
熟悉的新风景
Original
2455 people have browsed it

在这里插入图片描述

<h4> <font color="red">border-collapse: collapse; ( 合并边框)

<h4> <font color="red"> rowspan=”2”; (上下合并)

<h4> <font color="red"> colspan=”2”;（左右合并）

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>商务风格表格的设计与实现</title>
  5.         <style>
  6.             /*设置表格总体样式*/
  7.             #recruit {
  8.                 width: 100%;
  9.                 border-collapse: collapse;/* 为表格设置合并边框模型： */
  10.                 text-align: left;
  11.             }
  13.             /*设置单元格样式*/
  14.             #recruit td,
  15.             #recruit th {
  16.                 /* font-size: 1em;*/
  17.                 border: 1px solid orange;
  18.                 padding: 7px;
  19.             }
  21.             /*设置标题单元格样式*/
  22.             #recruit th {
  23.                 background-color: orange;
  24.                 color: #ffffff;
  25.             }
  27.             /*设置单元行样式*/
  28.             #recruit tr.orange {
  29.                 background-color: #FFEDDB
  30.             }
  31.         </style>
  32.     </head>
  33.     <body>
  34.         <h3>商务风格表格的设计与实现</h3>
  35.         <hr />
  36.         <table id="recruit" border="1">
  37.             <caption>招聘信息表</caption>
  38.             <tr>
  39.                 <th>地点</th>
  40.                 <th>招聘职位</th>
  41.                 <th>公司</th>
  42.             </tr>
  43.             <tr>
  44.                 <td>全国</td>
  45.                 <td>产品培训生</td>
  46.                 <td>腾讯</td>
  47.             </tr>
  48.             <tr class="orange" >
  49.                 <td colspan="2">全国(左右合并colspan="2")</td>
  50.                 <td>前端开发工程师</td>
  51.                 <td>阿里巴巴</td>
  52.             </tr>
  53.             <tr >
  54.                 <td>上海</td>
  55.                 <td>交互设计师</td>
  56.                 <td>网易游戏</td>
  57.             </tr>
  58.             <tr class="orange" >
  59.                 <td>北京</td>
  60.                 <td>视觉设计师</td>
  61.                 <td>360</td>
  62.             </tr>
  63.             <tr >
  64.                 <td rowspan="2">深圳（上下合并rowspan="2"）</td>
  65.                 <td>数据分析师</td>
  66.                 <td>IBM</td>
  67.             </tr>
  68.             <tr class="orange">
  69.                 <td>杭州</td>
  70.                 <td>数据研发工程师</td>
  71.                 <td>微软</td>
  72.             </tr>
  73.         </table>
  74.     </body>
  75. </html>

<h4> <font color="red">border-spacing

该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。

  1.              border-collapse:separate;    /* 默认样式 */
  2.               border-spacing:10px 50px;

在这里插入图片描述

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post