网页实现样本:
- 设计好网页框架表格
理想:
现实:
很明显看出来12这一行是没有全部填满的23 24也是,此时的代码如下:
这里我没有用跨行或者跨列。
<html>
<head>
<title></title>
</head>
<body>
<form>
<table border="1px">
<tbody>
<tr>
<td>
1
<table border="1px" align="right" width = 90%>
<tbody>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width = 98%>12</td>
</tr>
<tr>
<td width = 40%>13</td>
<td width = 60%>14</td>
</tr>
<tr>
<td width = 40%>15</td>
<td width = 60%>16</td>
</tr>
<tr>
<td width = 40%>17</td>
<td width = 60%>18</td>
</tr>
<tr>
<td width = 40%>19</td>
<td width = 60%>20</td>
</tr>
<tr>
<td width = 40%>21</td>
<td width = 60%>22</td>
</tr>
<tr>
<td width = 98%>
23
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>24</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
修改:
增加上该有的跨列。
如图所示:
还有两行就不放上来,和以上操作相同。
修改结果如下
调整比例之后:
最终结果:
最新的代码在下面。
总结:
其实不难发现,有很多细节问题还是没办法做到
比如:
1.(未解决)
这段文字做不到向上对齐,我只做到了放在中间。
2. (解决)
控制最外层的表格大小(治标不治本,具体设置位置还不会)
这一段是向上对齐, 不是靠中间的。
3. (解决)
同上治标不治本
这里也是,有对齐的问题,不是在正中间的。
4. (解决)
<style="float: right;">
上面这张图,所画线的地方都是没有做到的。
还有就是字体的改变,换字体,没有换相对应的。
上述问题,还需慢慢摸索来解决,目前先这样了~
总结(不太会用的几个知识点):
1.<font size = 1 color = "white">
用于设置字体的大小以及颜色
2.style 是用于设置边框属性 type用于设置表单中便签的类型
3.当表格不规则,例如左边一列和右边一列行数不相符时,需要利用跨行或者跨列来实现。
4.关于设置图片的大小以及表格的大小最好是使用具体的像素值来定义,利用百分比,不好控制大小,容易出现偏差。
改版:
代码:
<!--修改 4.1-->
<!--网页细节增加-->
<html>
<head>
<title></title>
</head>
<body style = "background-color: rgb(134, 136, 156);">
<form>
<table align ="center" style = "background-color: floralwhite;" width = 778px height = 800px >
<tbody>
<tr>
<td colspan="2" height = 50px>
<img src="img/0.png" width= 15% height = 32px>
<table align="right" width = 85% height = 30px>
<tbody>
<tr align="center" cellpadding = 0>
<td style="background-color: #666688";"><font size = 1 color = white><b>设计动态</b></font></td>
<td style="background-color:#8C8EA3"><font size = 1 color = white>技术文档</font></td>
<td style="background-color: #8C8EA3;"><font size = 1 color = white>艺术设计</font></td>
<td style="background-color: #8C8EA3;"><font size = 1 color = white>摄影摄像</font></td>
<td style="background-color: #8C8EA3;"><font size = 1 color = white>计算机技术</font></td>
<td style="background-color: #8C8EA3;"><font size = 1 color = white>资源下载</font></td>
<td style="background-color: #8C8EA3;"><font size = 1 color = white>个人专栏</font></td>
<td style="background-color: #8C8EA3;"><font size = 1 color = white>CG绘画</font></td>
<td style="background-color: #8C8EA3;"><font size = 1 color = white>专题</font></td>
<td style="background-color: #8C8EA3;"><font size = 1 color = white>论坛</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width = 98% colspan="2" height = 25px style="background-color: silver;"><font size = 1>您所在的位置:<a href="">首页</a> > <a href="">业界动态</a></font></td>
</tr>
<tr height = 15%>
<td width = 25% height = 15%>
<img src="img/1.png" width = 250px height = 120px >
</td>
<td width = 75%>
<img src="img/2.png" width = 750px height = 120px>
</td>
</tr>
<tr height = 25px>
<td width = 25% style="background-color: silver;">
<font size = 2> <b> 最新消息</b></font>
</td>
<td width = 75% style="background-color: silver;" >
<font size = 2> <b>其他信息</b></font>
<!--同一行文字一部分左对齐一部分右对齐-->
<font size = 1 style="float: right;">更多内容 </font>
</td>
</tr>
<tr height = 25%>
<td width = 25% style="background-color: rgb(226, 225, 225);">
<!--list-style用于取消圆点标志 -->
<ul style="list-style: none;padding:0px;margin:0px">
<li><a href="https://blog.csdn.net/"><font size = 3>谈交互设计的经验积累</font></a></li>
<li><a href="https://blog.csdn.net/"><font size = 3>视觉中国锐店第二波设计风波</font></a></li>
<li><a href="https://blog.csdn.net/"><font size = 3>7天精通PS CSS平面视觉设计</font></a></li>
<li><a href="https://blog.csdn.net/"><font size = 3>触动人心-设计优秀的iPhone应用</font></a></li>
<li><a href="https://blog.csdn.net/"><font size = 3>不卖东西,反而卖的好</font></a></li>
<li><a href="https://blog.csdn.net/"><font size = 3>论应届毕业生的职业发展</font></a></li>
<li><a href="https://blog.csdn.net/"><font size = 3>网恋组织内幕:培训员工谈恋爱</font></a></li>
<li><a href="https://blog.csdn.net/"><font size = 3>为创意工作者打造高效的工作环境</font></a></li>
<li><a href="https://blog.csdn.net/"><font size = 3>视觉设计师原创iPhone4保护壳</font></a></li>
</ul>
</td>
<td width = 75% style="background-color: rgb(226, 225, 225);">
<table width = 600px>
<tbody>
<tr>
<td>
<img src="img/3.png"width = 265px height = 230px>
</td>
<td>
<a href="https://blog.csdn.net/"><font size = 3>谈交互设计的经验积累</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>视觉中国锐店第二波设计风波</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>7天精通PS CSS平面视觉设计</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>触动人心-设计优秀的iPhone应用</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>不卖东西,反而卖的好</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>论应届毕业生的职业发展</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>网恋组织内幕:培训员工谈恋爱</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>为创意工作者打造高效的工作环境</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>视觉设计师原创iPhone4保护壳</font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr height = 25px>
<td width = 25% style="background-color: rgb(192, 202, 174);">
<img src="img/4.png" width = 60px height = 20px align = "left">
<input name = "class"type ="radio" align = "right"> <font size = 2>全网</font>
<input name = "class" type ="radio" align = "right"> <font size = 2>本站</font>
<input name = "class" type ="radio" align = "right"> <font size = 2>论坛</font>
</td>
<td width = 75% style="background-color: silver;">
<font size = 2> <b>软件信息</b></font>
<font size = 2 style="float: right;">更多内容 </font>
</td>
</tr>
<tr height = 23%>
<td width = 25% style="background-color: rgb(192, 202, 174);">
<table height = 184px>
<tbody>
<tr height = 19px>
<td>
<input type="search"> <input type="button" value="搜索">
</td>
</tr>
<tr>
<td>
<h align = "right"><font size = 2>热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG</font></h>
</td>
</tr>
</tbody>
</table>
</td>
<td width = 75% style="background-color: rgb(226, 225, 225);">
<table width = "600px">
<tbody>
<tr>
<td>
<img src="img/5.png"width = 265px height = 230px>
</td>
<td>
<a href="https://blog.csdn.net/"><font size = 3>谈交互设计的经验积累</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>视觉中国锐店第二波设计风波</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>7天精通PS CSS平面视觉设计</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>触动人心-设计优秀的iPhone应用</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>不卖东西,反而卖的好</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>论应届毕业生的职业发展</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>网恋组织内幕:培训员工谈恋爱</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>为创意工作者打造高效的工作环境</font></a>
<br/>
<a href="https://blog.csdn.net/"><font size = 3>视觉设计师原创iPhone4保护壳</font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr height = 15px style="background-color: silver;">
<td colspan="2">
</td>
</tr>
</tbody>
<tfoot >
<tr height = 55px>
<td colspan="2" style="background-color: steelblue;">
<h><font color = "white">关于站点 | 免责声明 | 联系站长 | 版权隐私 | 友情链接 | 网站地图 | 京ICP备05002321 </font></h>
<h ><font color = "white" style="float: right;"> ©1999-2013 Blueidea.com.版权所有</font></h>
</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
问题:
1.cellpadding,cellspacing失效问题,
2.无序列表,取消圆点并且与单元格有间隙
3.如何控制嵌套表格在母表格中的位置