table标签目前前端主流推荐HTML、CSS、JS三者分离，实际使用table标签的CSS样式代码还是采用table的style的属性和值来进行外观样式控制。

习惯样式：

  1. 1       table {
  2. 2             display: table;
  3. 3             border-collapse: separate;
  4. 4             border-spacing: 2px;
  5. 5             border-color: gray;
  6. 6         }

table的style重要属性：

border-spacing：规定表格单元格与单元格、外边框的间距;

table-layout：规定表格的布局算法;

border-collapse：设置表格的边框是否被合并为一个单一的边框;

empty-cells：在 collapsed-borders模型中，该属性无效; 在 separated-borders模型中，当该属性值为hide时，空的表格单元将没有边框和背景。

table表格编程练习

小伙伴，编写代码设置表格相应属性，按照效果图，实现相应效果。

效果图：

任务

1、设置第一列的北京颜色为orange，表格边框宽度为1，单元格(不包括插入的小表格内单元格)内间距为5px;

2、将表格第一列的第二行和第三行合并;

3、将表格第一列的第五行和第六行合并;

4、在最后合并的单元格的内嵌套一个两行两列的表格;

5、嵌套表格边框为1px;

6、将整个第四行合并;

参考代码：

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3
  4.  4 <head>
  5.  5     <title>表格属性</title>
  6.  6     <meta charset="utf-8">
  7.  7     <style>
  8.  8         table {
  9.  9             border: 1px solid gray;
  10. 10         }
  11. 11
  12. 12         table.main {
  13. 13
  14. 14             width: 500px;
  15. 15             border-spacing: 0;
  16. 16             margin: 0 auto;
  17. 17             text-align: center;
  18. 18         }
  19. 19
  20. 20         .main>tbody>tr>th,
  21. 21         .main>tbody>tr>td {
  22. 22             padding: 5px;
  23. 23         }
  24. 24
  25. 25         td,
  26. 26         th {
  27. 27             border: 1px solid gray;
  28. 28         }
  29. 29
  30. 30         .one {
  31. 31             background: orange;
  32. 32
  33. 33         }
  34. 34
  35. 35         table table {
  36. 36             border-spacing: 0;
  37. 37             margin: 0 auto;
  38. 38         }
  39. 39     </style>
  40. 40 </head>
  41. 41
  42. 42 <body>
  43. 43
  44. 44     <table class='main'>
  45. 45         <caption>课程表</caption>
  46. 46         <tr class='one'>
  47. 47             <th>星期一</th>
  48. 48             <th>星期二</th>
  49. 49             <th>星期三</th>
  50. 50             <th>星期四</th>
  51. 51             <th>星期五</th>
  52. 52         </tr>
  53. 53         <tr>
  54. 54             <td rowspan="2">语文</td>
  55. 55             <td>数学</td>
  56. 56             <td>化学</td>
  57. 57             <td>英语</td>
  58. 58             <td>生物</td>
  59. 59         </tr>
  60. 60         <tr>
  61. 61             <td>数学</td>
  62. 62             <td>化学</td>
  63. 63             <td>英语</td>
  64. 64             <td>生物</td>
  65. 65         </tr>
  66. 66         <tr>
  67. 67             <td colspan="5">课间活动</td>
  68. 68         </tr>
  69. 69         <tr>
  70. 70             <td rowspan="2">
  71. 71                 <table>
  72. 72                     <tr>
  73. 73                         <td>前半节</td>
  74. 74                         <td>后半节</td>
  75. 75                     </tr>
  76. 76                     <tr>
  77. 77                         <td>诗词</td>
  78. 78                         <td>古文</td>
  79. 79                     </tr>
  80. 80                 </table>
  81. 81             </td>
  82. 82             <td>数学</td>
  83. 83             <td>化学</td>
  84. 84             <td>英语</td>
  85. 85             <td>生物</td>
  86. 86         </tr>
  87. 87         <tr>
  88. 88             <td>数学</td>
  89. 89             <td>化学</td>
  90. 90             <td>英语</td>
  91. 91             <td>生物</td>
  92. 92         </tr>
  93. 93     </table>
  94. 94 </body>
  95. 95
  96. 96 </html>

当然，一些“前辈”代码可能还采用table标签的一些属性来进行样式控制，对于需要维护特定“祖传代码”的工程师来说，还是有必要了解一些此类“考古”前端知识。

譬如上述table效果也可以采用table的“远古”属性来实现同样的效果：

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3
  4.  4 <head>
  5.  5     <title>表格属性</title>
  6.  6     
  7.  7   <meta charset="utf-8">
  8.  8     <style>
  9.  9   </style>
  10. 10 </head>
  11. 11
  12. 12 <body>
  13. 13     <table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
  14. 14         <caption>课程表</caption>
  15. 15         <tr bgcolor="orange" align="center">
  16. 16             <th>星期一</th>
  17. 17             <th>星期二</th>
  18. 18             <th>星期三</th>
  19. 19             <th>星期四</th>
  20. 20             <th>星期五</th>
  21. 21           </tr>
  22. 22         <tr align="center">
  23. 23             <td rowspan="2">语文</td>
  24. 24             <td>数学</td>
  25. 25             <td>化学</td>
  26. 26             <td>英语</td>
  27. 27             <td>生物</td>
  28. 28           </tr>
  29. 29         <tr align="center">
  30. 30             <td>数学</td>
  31. 31             <td>化学</td>
  32. 32             <td>英语</td>
  33. 33             <td>生物</td>
  34. 34           </tr>
  35. 35         <tr align="center">
  36. 36             <td colspan="5">课间活动</td>
  37. 37           </tr>
  38. 38         <tr align="center">
  39. 39             <td rowspan="2">
  40. 40                 <table border="1" cellspacing="0" >
  41. 41                     <tr>
  42. 42                         <td>前半节</td>
  43. 43                         <td>后半节</td>
  44. 44                       </tr>
  45. 45                     <tr align='center'>
  46. 46                         <td >诗词</td>
  47. 47                         <td >古文</td>
  48. 48                       </tr>
  49. 49                   </table>
  50. 50               </td>
  51. 51             <td>数学</td>
  52. 52             <td>化学</td>
  53. 53             <td>英语</td>
  54. 54             <td>生物</td>
  55. 55           </tr>
  56. 56         <tr align="center">
  57. 57             <td>数学</td>
  58. 58             <td>化学</td>
  59. 59             <td>英语</td>
  60. 60             <td>生物</td>
  61. 61           </tr>
  62. 62       </table>
  63. 63 </body>
  64. 64
  65. 65 </html>

标签用于定义HTML中的表格，其主要属性以及功能如下：

width:设置表格长度;

align：表格相对于周围元素的对齐方式;

bgcolor:设置表格的背景颜色;

border:设置表格的外边框宽度;

frame：设置表格外边框哪部分是可见的;

cellspacing：设置表格单元与表格单元、外边框的间距;

cellpadding：设置表格单元内容与表格单元边框的间距;

rules：设置表格单元边框哪部分是可见的。

cellpadding属性与style中的padding属性类似，但是它只能设置一个值，即上下左右的内间距都相同;cellspacing与border-spacing属性类似，同样cellspacing只能设置一个值，但是border-spacing可以设置1或2个值。

table表格标签的属性的更多相关文章

  1. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  2. h5标签基础 table表格标签

    一.表格的定义:用于有规范的显示数据. 二.基本组成: 行<tr>/列<td>/表头<caption>/表标题<th> eg: <table> ...

  3. html表格标签与属性

    标记:  标 记  说 明 <Table> 表格标记 <Tr> 行标记 <Td> 单元格标记  <Th> 表头标记 <Table>标记属性: ...

  4. HTML中表格元素TABLE,TR,TD及属性的语法

    table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...

  5. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  6. HTML表格标签

    table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...

  7. html基本标签与属性

    HTML 超文本标记语言 html5 建立一个HTML文件:文件名 . 后缀(html)   解析:就是去识别 注释:就是给开发人员开的批注------浏览器不去解析(不去输出)   HTML的整体框 ...

  8. HTML基础【4】：表格标签

    表格标签 在过去表格标签用的非常非常的多,绝大多数的网站都是使用表格标签来制作的,也就是说表格标签是一个时代的代表 作用:以表格形式将数据显示出来,当数据量非常大的时候,表格这种展现形式被认为是最为清 ...

  9. HTML高级标签之表格标签

    前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...

随机推荐

  1. 初探电波钟(A Brief Introduction Of Radio Controlled Clock AND Its Appliciations)

    文档标识符:Radio_Controlled_Clock_T-D-P11 作者:DLHC 最后修改日期:2020.10.12 本文链接:https://www.cnblogs.com/DLHC-TEC ...

  2. idea如何新建一个springmvc 工程

    java 版本 1.8.0_261 idea 版本2020.1 Tomcat 9  maven 3.6 新建工程 File->new->project 默认会下载springframewo ...

  3. 51Testing和传智播客相比哪个好？

    首先我们需要先了解两家企业,51Testing是博为峰旗下的主营业务之一,主要是软件测试人才培训,包含就业培训.企业内训等服务,博为峰除了51Testing这个主营业务之外,还开设了51Code,主要 ...

  4. 以太坊blockchain源码分析

    blockchain关键元素 db:持久化到底层数据储存,即leveldb: genesisBlock:创始区块 currentBlock:当前区块,blockchain中并不是储存链所有的block ...

  5. vi/vim系统编辑命令使用技巧

    01前言 在Linux系统中会有很多的文件信息,这些文件的内容如果需要编辑,就必须借助vi或vim编辑命令. vi是Linux命令行界面下的重要文字编辑器.vim是vi命令的增强版. [语法格式] v ...

  6. 解决python的requests库在使用过代理后出现拒绝连接的问题

    在使用过代理后,调用python的requests库出现拒绝连接的异常 问题 在windows10环境下,在使用代理(VPN)后.如果在python中调用requests库来地址访问时,有时会出现这样 ...

  7. linux(centos8):prometheus使用alertmanager发送报警邮件(prometheus 2.18.1/alertmanager 0.20.0)

    一,alertmanager的用途 1,Alertmanager的作用: Alertmanager是一个独立的报警模块, 它接收Prometheus等客户端发来的警报,并通过分组.删除重复等处理, 通 ...

  8. selenium 浏览器标签切换

    from time import sleep from selenium import webdriver from selenium.webdriver.chrome.options import ...

  9. python web自动化上传文件工具

    工具下载地址:链接:https://pan.baidu.com/s/1cHdNHW 密码:56bp说明:1.WinSpy-1.0.2.7z解压即可.2.pywin32的exe程序,根据自己安装的pyt ...

  10. 在电脑上操作手机屏幕scrcpy工具就搞定了

    手机安卓版本:10 电脑:win64 使用步骤 电脑步骤 下载scrcpy scrcpy 是免费开源的投屏软件,支持将安卓手机屏幕投放在 Windows.macOS.GNU/Linux 上,并可直接借 ...