表格组件的搭建

表格组件搭建的目的

表格组件的搭建是为了对后面写页面用到一些表格样式时可以直接用,或者在封装的表格组件上进行修改,当然表格只是所有组件中的一部分,博主还发了按钮和动画文字样式的博客,想要看的可以去看一下,虽说封装了这些东西,在写网页的时候可以自己写,也可以直接用,但是在不断的积累下,css样式属性的知识会得到很大的提高,而且在封装了这么多组件的情况下,可以将它们放到一个文件中,作为一个组件库,后面如果用到就可以直接在封装好的组件样式直接修改。

表格组件的步骤

  1. 创建文件
    将css文件正确导入到html文件中
  2. 创建基础表格样式
  3. 搭建各种样式的表格

具体的每个步骤

1.第一步直接省略了,从第二步开始说。
首先要创建好自己想要写的基础表格样式,基础表格类名.jc-table,这里我所表示的基础表格样式是没有列边框的表格,可以不需要一样,只是参考。
代码结构:
html文件

<h3>基础表格</h3>
   <div class="box">
       <table class="jc-table">
           <thead>
               <tr>
                   <th>表头1</th>
                   <th>表头2</th>
                   <th>表头3</th>
                   <th>表头4</th>
                   <th>表头5</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>表格001</td>
                   <td>表格002</td>
                   <td>表格003</td>
                   <td>表格004</td>
                   <td>表格005</td>
               </tr>
               <tr>
                   <td>表格001</td>
                   <td>表格002</td>
                   <td>表格003</td>
                   <td>表格004</td>
                   <td>表格005</td>
               </tr>
               <tr>
                   <td>表格001</td>
                   <td>表格002</td>
                   <td>表格003</td>
                   <td>表格004</td>
                   <td>表格005</td>
               </tr>
               
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值