用表格实现网页设计_网页中表格的应用实例

一个简陋的大体网页布局图

把网页分成表格的形式

实现过程遇到的难点

1. 表格与网页布局的转换
   ✔在实现过程中，把网页布局转换为表格需要对表格的格式很熟悉，理清楚行和单元格。
   ✔一行用标签包含起来，里一个单元格内容用标签包含起来。
   
   实现代码如下：

<tr>
     <td >
         <b>三月推荐</b><br><br>
         《XXX的异世界冒险》<br>
         《XXX的奇妙物语》<br>
         《转生成为XXX》<br>
         《在地下城寻找XX》<br>
         《被绑架到贵族学院的XXX》<br>
     </td>
     <td class="book_pic">
         <img src="图片/宫村 (2).png">
     </td>
     <td class="book_pic">
         <img src="图片/花子.png">
     </td>
     <td class="book_pic">
         <img src="图片/辉夜.png">
     </td>
     <tr>
         <td> </td>
         <td>日漫类</td>
         <td>国漫类</td>
         <td>轻小说类</td>
     </tr>
 </tr>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

 ✔上诉的表格实现，其实是在一行里分为了两行，下一行的第一个内容格设置为空，以此实现上图形式的表格。
1

2. 表格中插入图片
   ✔按平常插入图片的方式直接在标签中插入标签即可

<td class="book_pic">
    <img src="图片/宫村 (2).png">
</td>
1
2
3

3. 表格样式的调整
   ✔将表格边框隐藏 (默认无边框)
   ✔调整单元格之间的距离
   ✔将单元格文字居中显示

table{
    width: 1250px;
    table-layout: fixed; /*列宽由表格宽度和列宽度设定。*/
    border-spacing: 30px 30px; /*设置相邻单元格的边框间的距离*/
}
td{
    text-align: center; /*文字居中*/
}
1
2
3
4
5
6
7
8

实现效果如下：

总结

表单设计页面并不是很方便，页面布局的调整很麻烦，不够灵活。不过做下来能加深自己对表格的理解，还是值得一试的。

最后附上完整代码链接：
https://codepen.io/hhhguihub/pen/ExWLLYM