table表格标签的属性
table标签目前前端主流推荐HTML、CSS、JS三者分离，实际使用table标签的CSS样式代码还是采用table的style的属性和值来进行外观样式控制。
习惯样式：
1 table {
2 display: table;
3 border-collapse: separate;
4 border-spacing: 2px;
5 border-color: gray;
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 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title>表格属性</title>
6 <meta charset="utf-8">
7 <style>
8 table {
9 border: 1px solid gray;
10 }
11
12 table.main {
13
14 width: 500px;
15 border-spacing: 0;
16 margin: 0 auto;
17 text-align: center;
18 }
19
20 .main>tbody>tr>th,
21 .main>tbody>tr>td {
22 padding: 5px;
23 }
24
25 td,
26 th {
27 border: 1px solid gray;
28 }
29
30 .one {
31 background: orange;
32
33 }
34
35 table table {
36 border-spacing: 0;
37 margin: 0 auto;
38 }
39 </style>
40 </head>
41
42 <body>
43
44 <table class='main'>
45 <caption>课程表</caption>
46 <tr class='one'>
47 <th>星期一</th>
48 <th>星期二</th>
49 <th>星期三</th>
50 <th>星期四</th>
51 <th>星期五</th>
52 </tr>
53 <tr>
54 <td rowspan="2">语文</td>
55 <td>数学</td>
56 <td>化学</td>
57 <td>英语</td>
58 <td>生物</td>
59 </tr>
60 <tr>
61 <td>数学</td>
62 <td>化学</td>
63 <td>英语</td>
64 <td>生物</td>
65 </tr>
66 <tr>
67 <td colspan="5">课间活动</td>
68 </tr>
69 <tr>
70 <td rowspan="2">
71 <table>
72 <tr>
73 <td>前半节</td>
74 <td>后半节</td>
75 </tr>
76 <tr>
77 <td>诗词</td>
78 <td>古文</td>
79 </tr>
80 </table>
81 </td>
82 <td>数学</td>
83 <td>化学</td>
84 <td>英语</td>
85 <td>生物</td>
86 </tr>
87 <tr>
88 <td>数学</td>
89 <td>化学</td>
90 <td>英语</td>
91 <td>生物</td>
92 </tr>
93 </table>
94 </body>
95
96 </html>
当然，一些“前辈”代码可能还采用table标签的一些属性来进行样式控制，对于需要维护特定“祖传代码”的工程师来说，还是有必要了解一些此类“考古”前端知识。
譬如上述table效果也可以采用table的“远古”属性来实现同样的效果：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title>表格属性</title>
6
7 <meta charset="utf-8">
8 <style>
9 </style>
10 </head>
11
12 <body>
13 <table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
14 <caption>课程表</caption>
15 <tr bgcolor="orange" align="center">
16 <th>星期一</th>
17 <th>星期二</th>
18 <th>星期三</th>
19 <th>星期四</th>
20 <th>星期五</th>
21 </tr>
22 <tr align="center">
23 <td rowspan="2">语文</td>
24 <td>数学</td>
25 <td>化学</td>
26 <td>英语</td>
27 <td>生物</td>
28 </tr>
29 <tr align="center">
30 <td>数学</td>
31 <td>化学</td>
32 <td>英语</td>
33 <td>生物</td>
34 </tr>
35 <tr align="center">
36 <td colspan="5">课间活动</td>
37 </tr>
38 <tr align="center">
39 <td rowspan="2">
40 <table border="1" cellspacing="0" >
41 <tr>
42 <td>前半节</td>
43 <td>后半节</td>
44 </tr>
45 <tr align='center'>
46 <td >诗词</td>
47 <td >古文</td>
48 </tr>
49 </table>
50 </td>
51 <td>数学</td>
52 <td>化学</td>
53 <td>英语</td>
54 <td>生物</td>
55 </tr>
56 <tr align="center">
57 <td>数学</td>
58 <td>化学</td>
59 <td>英语</td>
60 <td>生物</td>
61 </tr>
62 </table>
63 </body>
64
65 </html>
标签用于定义HTML中的表格，其主要属性以及功能如下：
width:设置表格长度;
align：表格相对于周围元素的对齐方式;
bgcolor:设置表格的背景颜色;
border:设置表格的外边框宽度;
frame：设置表格外边框哪部分是可见的;
cellspacing：设置表格单元与表格单元、外边框的间距;
cellpadding：设置表格单元内容与表格单元边框的间距;
rules：设置表格单元边框哪部分是可见的。
cellpadding属性与style中的padding属性类似，但是它只能设置一个值，即上下左右的内间距都相同;cellspacing与border-spacing属性类似，同样cellspacing只能设置一个值，但是border-spacing可以设置1或2个值。
table表格标签的属性的更多相关文章
- html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用
<!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...
- h5标签基础 table表格标签
一.表格的定义:用于有规范的显示数据. 二.基本组成: 行<tr>/列<td>/表头<caption>/表标题<th> eg: <table> ...
- html表格标签与属性
标记: 标 记 说 明 <Table> 表格标记 <Tr> 行标记 <Td> 单元格标记 <Th> 表头标记 <Table>标记属性: ...
- HTML中表格元素TABLE,TR,TD及属性的语法
table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- HTML表格标签
table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...
- html基本标签与属性
HTML 超文本标记语言 html5 建立一个HTML文件:文件名 . 后缀(html) 解析:就是去识别 注释:就是给开发人员开的批注------浏览器不去解析(不去输出) HTML的整体框 ...
- HTML基础【4】：表格标签
表格标签 在过去表格标签用的非常非常的多,绝大多数的网站都是使用表格标签来制作的,也就是说表格标签是一个时代的代表 作用:以表格形式将数据显示出来,当数据量非常大的时候,表格这种展现形式被认为是最为清 ...
- HTML高级标签之表格标签
前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...
随机推荐
- ZooKeeper伪分布式集群安装及使用
ZooKeeper伪分布式集群安装及使用 让Hadoop跑在云端系列文章,介绍了如何整合虚拟化和Hadoop,让Hadoop集群跑在VPS虚拟主机上,通过云向用户提供存储和计算的服务. 现在硬件越来越 ...
- 题解：洛谷P1357 花园
题解:洛谷P1357 花园 Description 小 L 有一座环形花园,沿花园的顺时针方向,他把各个花圃编号为 \(1∼n\).花园 \(1\) 和 \(n\) 是相邻的. 他的环形花园每天都会换 ...
- linux(centos8):安装java jdk 14 (java 14.0.2)
一,下载jdk14 官方网站: https://www.oracle.com/java/ 下载页面: https://www.oracle.com/cn/java/technologies/javas ...
- DefenseCode宣布集成GitHub为开发人员提供SAST解决方案
DefenseCode集团宣布,DefenseCode静态应用程序安全测试(SAST)ThunderScan解决方案现可作为一个GitHub Action,提供30多种语言的安全漏洞分析,并将详细的漏 ...
- 微信小程序分类的实现
微信小程序的分类功能思路 实现思路 1.把屏幕当成一个固定的盒子,然后把盒子分成两边,并让盒子的每一边都能够滚动. 2.通过将左侧边栏元素的id和右边内容的categoryId进行匹配,渲染展示相同i ...
- docker启动redis并设置密码
docker启动redis并设置密码: docker run -d --name redis -p 6379:6379 redis --requirepass "password" ...
- Linux的top命令及交换分区
TOP命令关键指标 %MEM,在内存中的占用率 %CPU,使用率,如果两核,最大可到200% TIME+, 占用cpu的总时间/s SHR,分享内存 RES, 常驻内存,进程当前使用的内存大小,不包括 ...
- 在CentOS 8 上 部署 .Net Core 应用程序
在Centos 8 上 部署 .Net Core 应用程序 -- 记录篇 1.更新dnf 源 1 dnf update 2.安装 Asp.Net Core 运行时 1 dnf install ...
- [SuProxy]Ngnix+Lua 实现SSH2,LDAP,ORACLE,SQLSERVER等TCP/IP协议分析,劫持,代理,会话及负载
目录 目录 目录 前言 介绍 安装 下载并拷贝 使用LuaRocks安装 运行测试 使用简介 处理器(processor)创建 通道(channel)创建 负载均衡 会话信息和会话管理 Event H ...
- [分享] 通过修改CSS自定义chrome滚动条样式
首先得说一句 我不懂CSS的写法之类的 这段CSS也是在网上找的 所以有更先进的需求的话 我肯定不能满足你们了 不好意思效果图在10楼有人上了 我这边不管怎么弄 上传图片都卡在96% 而且不翻wall ...