h5学习笔记：Table2

最新推荐文章于 2024-06-29 23:26:25 发布
最新推荐文章于 2024-06-29 23:26:25 发布
阅读量2.1k 收藏
点赞数
分类专栏： javascript和Egret相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hero82748274/article/details/52431423
版权

在传统的Table下，表格使用经常使用，与数据库配搭更加是常客。在默认的table下，样式并不好看。需要对其进行一些调整

1.table的默认样式

这里写图片描述

<table>
     <thead></thead>
     <tbody></tbody>
     <tfoot></tfoot>
 </table>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Table案例</title>
    </head>
    <style type="text/css">

         .main table{

         }

    </style>
    <body>

        <div class="main">
             <table border="1">
                 <thead>
                    <tr>
                        <th>名字</th>
                        <th>年龄</th>
                        <th>身高</th>
                        <th>联系方式</th>                   
                    </tr>
                 </thead>
                 <tbody>
                    <tr>
                        <td>小明</td>
                        <td>12</td>
                        <td>1.5</td>
                        <td>11111111111</td>
                    </tr>
                    <tr>
                        <td>小红</td>
                        <td>13</td>
                        <td>1.4</td>
                        <td>222222222222</td>
                    </tr>
                    <tr>
                        <td>小花</td>
                        <td>11</td>
                        <td>1.2</td>
                        <td>33333333333</td>
                    </tr>
                    <tr>
                        <td>小新</td>
                        <td>10</td>
                        <td>1.6</td>
                        <td>4444444444</td>
                    </tr>
                 </tbody> 
            </table>

        </div>


    </body>
</html>

2.美化表格样式

这里写图片描述
加入了 border-collapse: collapse; 这个表格合并看起来自然一些。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Table案例</title>
    </head>
    <style type="text/css">

         .main table,th,td{

            border: 1px solid #333333;
            border-collapse: collapse;
            margin: 0;
            padding: 0;

         }
         .main  thead{
            background-color: #f8f8f8;
        }

         .main th,td{
            width: 20%;
            height: 40px;
            line-height: 40px;
            text-align: center;
         }

    </style>
    <body>

        <div class="main">
             <table>
                 <thead>
                    <tr>
                        <th>名字</th>
                        <th>年龄</th>
                        <th>身高</th>
                        <th>联系方式</th>                   
                    </tr>
                 </thead>
                 <tbody>
                    <tr>
                        <td>小明</td>
                        <td>12</td>
                        <td>1.5</td>
                        <td>11111111111</td>
                    </tr>
                    <tr>
                        <td>小红</td>
                        <td>13</td>
                        <td>1.4</td>
                        <td>222222222222</td>
                    </tr>
                    <tr>
                        <td>小花</td>
                        <td>11</td>
                        <td>1.2</td>
                        <td>33333333333</td>
                    </tr>
                    <tr>
                        <td>小新</td>
                        <td>10</td>
                        <td>1.6</td>
                        <td>4444444444</td>
                    </tr>
                 </tbody> 
            </table>

        </div>


    </body>
</html>

3.产生梅花间效果

这里写图片描述

使用nth-child对偶数行进行填充颜色。

 .main tbody tr:nth-child(2n)
{
   background-color:  rgba(0,0,0,0.2);       
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Table案例</title>
    </head>
    <style type="text/css">

         .main table,th,td{

            border: 1px solid #333333;
            border-collapse: collapse;
            margin: 0;
            padding: 0;

         }
         .main  thead{
            background-color: #f8f8f8;
        }

         .main th,td{
            width: 20%;
            height: 40px;
            line-height: 40px;
            text-align: center;
         }
         .main tbody tr:nth-child(2n)
         {
            background-color:  rgba(0,0,0,0.2);

         }
    </style>
    <body>

        <div class="main">
             <table>
                 <thead>
                    <tr>
                        <th>名字</th>
                        <th>年龄</th>
                        <th>身高</th>
                        <th>联系方式</th>                   
                    </tr>
                 </thead>
                 <tbody>
                    <tr>
                        <td>小明</td>
                        <td>12</td>
                        <td>1.5</td>
                        <td>11111111111</td>
                    </tr>
                    <tr>
                        <td>小红</td>
                        <td>13</td>
                        <td>1.4</td>
                        <td>222222222222</td>
                    </tr>
                    <tr>
                        <td>小花</td>
                        <td>11</td>
                        <td>1.2</td>
                        <td>33333333333</td>
                    </tr>
                    <tr>
                        <td>小新</td>
                        <td>10</td>
                        <td>1.6</td>
                        <td>4444444444</td>
                    </tr>
                 </tbody> 
            </table>            
        </div>
    </body>
</html>
hero82748274
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5前端学习笔记
03-21
【标签】"h5"、"前端"、"学习笔记"进一步明确了内容的重点。"h5"即HTML5，是前端开发的核心；"前端"意味着这些笔记涉及的是用户可见和交互的部分，包括网页设计和用户体验；"学习笔记"则提示我们，资料可能以教程、...
TableGPT
qq_40438523的博客
08-03 1440
TableGPT阅读
《layui宇宙版教程》：数据表格table-2
来吧，学习！
08-20 406
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入： 1.23.3 基础参数一览表 基础参数并非所有都要出现，有必选也有可选，结合实际需求自由设置即可。基础参数一般出现在以下三种场景中。 （1）场景一是在方法渲染中使用，如图1-xx所示。 （2）场景二是在自动渲染中使用，如图1-xx所示。 （3）场景三是在重加载reload中使用，如图1-xx所示。 图1-xx所示是目前table模块所...
h5兼容table ，如何实现h5在app内使用h5渲染table表格而且实现横屏预览？
最新发布
qq_37030315的博客
06-29 378
【代码】h5兼容table ，如何实现h5在app内使用h5渲染table表格而且实现横屏预览？
HTML5 表格标签 Table 详解
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
06-02 2423
Table 表格 表格的作用：进行数据查看，整合多行多列的数据。 表格属性：border边框 width宽度 height高度 bgcolor背景色 background背景图片 bordercolor边框颜色 align对齐方式 cellspacing单元格与单元格之间的距离 cellspadding单元格与单元格内容的间距 thead表头部分 th表头单元格 tr表示行 td表示列 caption表格标题 合并边框c...
HTML5中thead标签,【HTML5】table标签中thead、tbody、tfoot的作用
weixin_42352080的博客
06-21 918
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了...
Key Fact as Pivot: A Two-Stage Model for Low Resource Table-to-Text Generation 论文代码解析
weixin_41089007的博客
08-22 423
1.数据处理部分 原始文本处理 table2entity2text.py 举例：原始数据的一个句子 键值对 name_1:walter name_2:extra image:<none> image_size:<none> caption:<none> birth_name:<none> birth_date_1...
前端学习（一）——H5学习笔记
08-09
HTML入门
PHP个人学习笔记
03-13
PHP个人学习笔记
h5webstorage:Angular 2的Web存储
05-17
npm install h5webstorage --save 2.将模块和提供程序导入顶级模块： import { WebStorageModule } from "h5webstorage" ; 注册模块： @ NgModule ( { ... imports : [ WebStorageModule . forRoot ( ) ] ...
h5-poster:海报builder
05-30
海报生成器 My majestic Nuxt.js project 启动命令 # install dependencies $ npm install 安装依赖 # serve with hot reload at localhost:3000 $ npm run dev 启动项目 # build for production and launch server ...
HTML5表单标签和表格标签详解
一只文森特
12-09 2292
表单标签和表格标签
h5 Table表格
qq_38932407的博客
04-15 5317
table:表格 tr:行rowspan：占据行数 td列 clospan：占据列数 th表头（浏览器默认样式粗体居中） caption标题（浏览器默认样式居中）
H5 table表格案例、边距 解析（表格带有滚动条）
林中明月间丶
12-18 8765
一个简单的表格： <table id="tab1" width="100%" cellspacing="0" border="1px"> <thead> <tr> <th>第一季度</th> <th>第二季度</th> <th>第三季度...
html怎么制作table,html 制作复杂table
weixin_33730916的博客
06-18 1238
数据分析，一般都需要显示数据，就需要使用html做复杂的表格。复杂表格一般是对td的rowspan 、colspan属性值。在html中 标签定义 HTML 表格中的标准单元格。(1)rowspan 属性规定单元格可横跨的行数;(2)colspan 属性规定单元格可横跨的列数。复杂表格网站统计情况 奇虎360 http://hao.360.cn/11http://sh.qihoo.co...
H5学习笔记（十二）表格
huangpf_vcx
05-09 249
表格 在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格 变成了一个极受欢迎的布局工具。 但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来 表示格式化的数据。 HTML中的表格可以很复杂，但是通常情况下我们不需 要创建过于复杂的表格。table、tr、th、td 使用table标签创建一个表格。 • tr表示表格中的一行。 • tr中可以编写一个或多个th或td。 • th表示表头。 简单的表格 .
h5封装table表格 vue
南佳的博客
02-02 1428
因某些原因,开发时总是需要在h5页面上开发表格, 所以就自己封装了一个, 这样就便于维护.一下直接提供源码, 不足之处, 请不吝赐教.
H5的colspan跨列和rowspan跨行实现课表的制作
aibai666的博客
11-25 1230
通过H5来实现课表需要借用到表格。H5中的表格由table标签tr标签及td标签组成。 <table>...</table>标签表示着一个表格的开始与结束 <tr>...</tr>标签表示着表格中一行的开始与结束 <td>...</td>标签表示着一个单元格的开始与结束，也可以理解为一行中列的个数。td标签一般写于tr标签内 简单的分析图片，然后创建表格，这里应该创建一个六行六列的表格 <!Doctype HTM...
36-表格总结
weixin_45683698的博客
11-21 158
1.7表格总结 表格学习整体可以分为三大部分： 1.表格的相关标签 2.表格的相关属性 3.合并单元格 1.表格的相关标签 我们学习了 table标签 tr 行标签 td 单元格标签 th 表头单元格标签 thead 表格头部区域标签 tbody 表格主体区域标签 2.表格的相关属性 3.合并单元格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
前端基础学习笔记：从JS到Node进阶
前端基础学习笔记是一份由作者精心整理的文档，主要涵盖了JavaScript和Node.js的学习内容，旨在帮助公司的前端开发人员系统地理解和掌握这两种关键技术。以下是部分内容的详细解读： 1. JavaScript基础知识： - **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值