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表格标签的属性的更多相关文章

  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. 对NETIF_F_GSO的一些理解

    看linux内核协议栈的时候看到tcp_sendmsg函数,看起来并不难理解,但是申请skb的时候主buff大小让我很困惑.我以前一直以为会根据sack/ip option/pmtu等计算一个mss, ...

  2. sql 删除所有存储过程

    1.执行以下sql语句即可删除所有存储过程 --/**********删除所有存储过程*************************/-- use 数据库名 go declare @tname v ...

  3. 数据库备份作业的T-SQL语句

    1.关于大容量数据导入导出的一些方法SQL SERVER提供多种工具用于各种数据源的数据导入导出,这些数据源包括本文文件.ODBC数据源.OLE DB数据源.ASCII文本文件和EXCEL电子表格.2 ...

  4. C# indexof和indexofany区别(转)

    定位子串是指在一个字符串中寻找其中包含的子串或者某个字符.在String类中,常用的定位子串和字符的方法包括IndexOf/LastIndexOf及IndexOfAny/LastIndexOfAny, ...

  5. 假如 Web 当初不支持动态化

    楔子 Web 生而具有极其灵活的动态化基础能力,诸如: 动态插入script标签执行任意脚本逻辑 动态插入style标签引入任何 CSS 样式规则 通过iframe标签嵌入整站 以上标签均可直接加载网 ...

  6. Java实现:抛开jieba等工具,写HMM+维特比算法进行词性标注

    一.前言:词性标注 二.经典维特比算法(Viterbi) 三.算法实现 四.完整代码 五.效果演示: 六.总结 一.前言:词性标注 词性标注(Part-Of-Speech tagging, POS t ...

  7. .gdbinit文件配置

    .gdbinit文件配置 #打印数组的索引下标 set print array-indexes on #每行打印一个结构体成员 set print pretty on #除了断点有关的线程会被停下来, ...

  8. Deepin v15.11驱动安装问题

    最近想用Linux跑深度学习,试了好几个发行版,最终选择了Deepin v15.11,但由于配置比较新,它不能兼容很多驱动,还得自己装,以下是我失败N次后得到的经验: 电脑配置 配置如下: 型号:DE ...

  9. oracle强制修改字符集

    首先查看服务端字符集 select * from v$nls_parameters where parameter = 'NLS_CHARACTERSET' NLS_CHARACTERSET WE8M ...

  10. Java 中的 3 个双引号是什么语法?Java 15 刷新你的认知!

    Java 中的 3 个双引号 """ 是什么语法? 这是 Java 15 新出的,刷新你的认知! 一.前言 在 Java 15 的推出的时候,Text Blocks 正式 ...