博主信息
熟悉的新风景
博文
8
粉丝
0
评论
0
访问量
783
积分:0
P豆:18

HTML表格(table)属性--左右(colspan)、上下(rowspan)合并、合并边框、位置 部分内容

2020年05月22日 10:37:47阅读数:71博客 / 熟悉的新风景 / html

在这里插入图片描述

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

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

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

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

在这里插入图片描述

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
暂无评论暂无评论!