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