表格布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<h2>购物清单</h2>
<p>牛奶</p>
<p>苹果</p>
<p>电风扇</p>
<hr>

<style>

table {
width: 700px;
/*text-align: center;*/
/*表格整体居中*/
margin: 20px center;
/*表格边线由双线变成单线*/
border-collapse:collapse;
}
table caption{
font-size 3rem;
font-weight:bolder;
color:#666;
margin-bottom: 2px;
}
table,th,td {
border:1px solid #666;
/*align:center; 表格行内文字及图片居中无效*/
/*表格行内文字及图片居中格式要这样写：*/
text-align:center;

/*height:20px;*/
/*line-height:20px;*/
}
table tr:first-child{
background-color:lightgreen;}

/*鼠标移动到行上面自动变色*/
table tr:hover{
background-color:#efefef;
color:coral;
}

table tr td img{
padding:5px;
border-radius:10px;
/*align:center;*/
/*margin:0 auto;*/
}
/*把a标签改造成按钮*/
table tr td a {
/*去掉a标签下划线*/
text-decoration: none;

width: 140px;
height: 40px;
padding: 5px;
border: 1px solid black;
background: white;
color: black;

/*边框变成圆角*/
border-radius: 8px;
}

/*鼠标移动按钮到行上面自动变色*/
table tr td a:hover{
background-color:black;
/*font-size:1.1em;*/
color:white;
}

</style>

<ul>
<li>牛奶</li>
<li>苹果</li>
<li>电风扇</li>
</ul>

<hr>

<table>
<caption>购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>***</th>
<th>数量</th>
<th>缩略图</th>
<th>***</th>
</tr>
<tr>
<td>1</td>
<td>牛奶</td>
<td>伊利</td>
<td>1箱</td>
<td><img src="images/milk.jpg" width="100" ></td>
<td><a href="http://jd.com">点击***</a></td>
</tr>
<tr>
<td>2</td>
<td>苹果</td>
<td>红富士</td>
<td>5斤</td>
<td><img src="images/apple.jpg" width="100" ></td>
<td><a href="http://jd.com">点击***</a></td>
</tr>
<tr>
<td>3</td>
<td>电风扇</td>
<td>美的</td>
<td>1台</td>
<td><img src="images/fan.jpg" width="100" ></td>
<td><a href="http://jd.com">点击***</a></td>
</tr>
</table>

相关文章