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

现在,我们就利用目前学到的知识 ( 即前面的文章 ) 

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

案例展示 : 

             前端 - 基础 表格标签 - 练习案例 小说排行榜_第1张图片

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

先制作表格的结构  : 

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

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

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

第一行 : 

                        ​​​​​​​        ​​​​​​​前端 - 基础 表格标签 - 练习案例 小说排行榜_第2张图片

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

                                前端 - 基础 表格标签 - 练习案例 小说排行榜_第3张图片

             

                  

第二行至结束 : 

                        前端 - 基础 表格标签 - 练习案例 小说排行榜_第4张图片

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

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

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

                       ===>>>

                      前端 - 基础 表格标签 - 练习案例 小说排行榜_第5张图片

                       前端 - 基础 表格标签 - 练习案例 小说排行榜_第6张图片

                       可以看到是打开的新窗口 

                       其余行,就照搬照抄即可 

                      前端 - 基础 表格标签 - 练习案例 小说排行榜_第7张图片

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

                      前端 - 基础 表格标签 - 练习案例 小说排行榜_第8张图片

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

再书写表格属性  : 

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

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

#  表格浏览器  中对齐  

               前端 - 基础 表格标签 - 练习案例 小说排行榜_第9张图片

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

               前端 - 基础 表格标签 - 练习案例 小说排行榜_第10张图片

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

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

              前端 - 基础 表格标签 - 练习案例 小说排行榜_第11张图片

              我们就加 cellspacing 属性即可 

              前端 - 基础 表格标签 - 练习案例 小说排行榜_第12张图片

             至此,我们整个 表格就做完了( 当然了,没有让内容完全一致 ) 

你可能感兴趣的:(WEB-前端,前端,html)