前端 - 基础 表格标签 - 练习案例 小说排行榜

现在，我们就利用目前学到的知识 （ 即前面的文章 ） 

来做一个 以 表格 为主 的小案例 

案例展示 ： 

             

                 我们就以 示例  为基点 来引出思路 

先制作表格的结构  ： 

#  表格第一行 显然 加粗，居中显示，那就需要用到 th 表头单元格 

#  第二行开始就是 普通单元格了  td  ~！ 

#  单元格里面也可以放任何元素，文字，连接，图片 都可~！！  

第一行 ： 

                        ​​​​​​​        ​​​​​​​

                我们先把结构梳理出来，梳理了第一行也即 表头的结构，并将响应内容填入

                                

             

                  

第二行至结束 ： 

                        

                       这是第二行的内容，有涉及到 图片标签，链接标签，空链接

                       我们给此加了两个真实链接，是可跳转的，并且打开新窗口

                       图片 是由空链接做的，下面几行也都用空链接做了~！！ 

                       ===>>>

                      

                       

                       可以看到是打开的新窗口 

                       其余行，就照搬照抄即可 

                      

                       我们并没有 完全照示例走，只是内容不一致而已，知识都是重复的~！ 

                      

                       至此，这个表格的内容，架构就完成了~！！ 

再书写表格属性  ： 

#  可以看到 表格 有宽有高，有边框

#  单元格与单元格之间也是没有距离的~！ 

#  表格浏览器  中对齐  

               

               我们先写了 几个属性，写了 对其位置， 宽度，高度，和边框 

               

               可以看到，基本上已经成型了，还有一点就是 单元格与单元格之间有距离

               我们需要让它 没有距离，那就需要另外一个属性了 

              

              我们就加 cellspacing 属性即可 

              

             至此，我们整个 表格就做完了（ 当然了，没有让内容完全一致 ）