版权声明:本文为桑海田原创文章,转载请注明此文章,否则,追究侵权责任。 https://blog.csdn.net/lxh_gdmu/article/details/49306865
本文用到了两个表格,一个是大表格,一个是内嵌在大表格里面的成绩排名表格
用绝对定位相对比较好控制布局!
效果图:
.html
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>表格布局</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<table id="whole" cellspacing="2px" cellpadding="5px">//大表格,边框边距为2px,文字距离边框5px
<tr >
<td id="img" colspan="8"></td>//第一行合并8列,放第一张图片
</tr>
<tr id="dao">
<td>导航1</td>
<td>导航2</td>
<td>导航3</td>
<td>导航4</td>
<td>导航5</td>
<td>导航6</td>
<td>导航7</td>
<td>导航8</td>
</tr>
<tr>
<td id="left" colspan="2"></td>//第二行,合并前两列,放第二张图片
<td id="right" colspan="6">//合并最后6列
<table id="tb2" border="1px" cellpadding="1px" cellspacing="0px" bordercolor="#999999" >//内嵌表2,设置边框大小为1,
文字与边框的距离1,边框间距,边框颜色
<caption align="left"><font color="#FF0000" size="+2">学生成绩排名(由低到高)</font></caption>//标题
<tr> </tr>//空一行
<tr bgcolor="#0066CC">//设置该行颜色
<font color="#FFFFFF">
<td>名次</td>
<td>姓名</td>
<td>学号</td>
<td>英语成绩</td>
<td>数学成绩</td>
<td>语文成绩</td>
<td>物理成绩</td>
</font>
</tr>
<tr>
<td>top10</td>
<td>洪承畴</td>
<td>1501</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr bgcolor="#999966">
<td>top9</td>
<td >刘基</td>
<td>1502</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>top8</td>
<td>赵普</td>
<td>1503</td>
<td>30</td>
<td>30</td>
<td>30</td>
<td>30</td>
</tr>
<tr bgcolor="#999966">
<td>top7</td>
<td>魏徵</td>
<td>1504</td>
<td>40</td>
<td>40</td>
<td>40</td>
<td>40</td>
</tr>
<tr>
<td>top6</td>
<td>诸葛亮</td>
<td>1505</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr bgcolor="#999966">
<td>top5</td>
<td>张良</td>
<td>1506</td>
<td>60</td>
<td>60</td>
<td>60</td>
<td>60</td>
</tr>
<tr>
<td>top4</td>
<td>李斯</td>
<td>1507</td>
<td>70</td>
<td>70</td>
<td>70</td>
<td>70</td>
</tr>
<tr bgcolor="#999966">
<td>top3</td>
<td >范蠡</td>
<td>1508</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>top2</td>
<td>管仲</td>
<td>1509</td>
<td>90</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr bgcolor="#999966">
<td>top1</td>
<td >吕尚(姜子牙)</td>
<td>1510</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</td>
</tr>
<tr class="bottom" >
<td colspan="8" id="bk">版权声明:<a href="http://blog.csdn.net/lxh_gdmu/article/details/49306865">来源桑海田</a></td>
</tr>
</table>
</body>
</html>
.css
@charset "gb2312";
/* CSS Document */
body{
margin-top:0px;//贴紧上边
margin-left:0px;//贴紧左边
}
#whole{
margin:0 auto;
margin-left:0px;
}
#img{
background:url(img/head.jpg);
width:1366px;
height:100px;
}
#dao{
text-align:center;
background:#666;
color:#FFF;
}
#left{
background:url(img/left.jpg);
width:340px;
height:368px;
position:absolute;//绝对定位
left:0px;//前提要有position,距离左边的距离
top:144px;//前提要有position,距离上边的距离
color:#666;//边框颜色
border:solid;//边框类型
}
#right{
background:#FFF;
width:350px;
height:360px;
border:solid;
color:#666;//边框颜色
}
#tb2{
position:absolute;
left:570px;
top:200px;
text-align:center;//文本居中
width:700px;
color:#000;
}
.bottom{
background:#CCC;
width:1290px;
height:100px;
text-align:center;
}
#bk{
color:#666;
border:solid;
cellspacing:0px;
border-top:5px;
}
a{text-decoration:none;}
a:link{color:#333;}
a:visited{color:#333;}
a:hover{color:#F00;}