CSS中表格介绍，表格相关的样式以及长表格的使用 |
您所在的位置：网站首页 › 表格的css样式大全图片怎么设置 › CSS中表格介绍，表格相关的样式以及长表格的使用 |
|
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单，在网页中也可以来创建出不同的表格 一：创建表格在HTML中，使用table标签来创建一个表格，在table标签中使用tr来表示表格中的一行，有几行就有几个tr，在tr中需要使用td来创建一个单元格，有几个单元格就有几个td rowspan用来设置纵向的合并单元格 colspan横向的合并单元格 A1 A2 A3 a4 B1 B2 B3 B1 B2 B3 C1 C2 C3 D1 二、设置表格样式 /*设置表格的宽度 */ table{ width: 300px; /*居中*/ margin: 0 auto; /*边框*/ border:1px solid black; /*table和td边框之间默认有一个距离 通过border-spacing属性可以设置这个距离 */ /* 需求一： 设置表格的边框，要单线边框 */ /* 方法一 */ /* border-spacing:0px ; */ /* 方法二 border-collapse [kə'læps] 可以用来设置表格的边框合并 如果设置了边框合并，则border-spacing自动失效 */ border-collapse:collapse; /*需求二：设置背景色样式*/ /* background-color: #bfa; */ } /* 设置边框 */ td , th{ border: 1px solid black; } /* 需求三： 设置隔行变色*/ tr:nth-child(even){ background-color: #bfa; } /* 需求四： 鼠标移入到tr以后，改变颜色 */ tr:hover{ background-color: #ff0; } /* 需求五：调整td文字在表格中的位置 */ td{ height: 50px; vertical-align: top; /* 可选值：top,bottom,middle */ text-align: center; /* 可选值：left，center，bottom */ } 学号 姓名 性别 住址 1 孙悟空 男 花果山 2 猪八戒 男 高老庄 3 沙和尚 男 流沙河 4 唐僧 男 女儿国 三、长表格的使用有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部 在HTML中为我们提供了三个标签： thead 表头 tbody 表格主体 tfoot 表格底部 这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中 thead中的内容，永远会显示在表格的头部 tfoot中的内容，永远都会显示表格的底部 tbody中的内容，永远都会显示表格的中间 如果表格中没有写tbody，浏览器会自动在表格中添加tbody 并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素 通过table > tr 无法选中行 需要通过tbody > tr 日期 收入 支出 合计 合计 100 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 10.24 500 300 200 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |