表格制作8.14作业

代码

实例

<h2>购物清单</h2>
<p>牛奶</p>
<p>苹guo</p>
<P>电风扇</P>

<hr>

<ur>
   <li>牛奶</li>
   <li>苹guo</li>
   <li>电风扇</li>
</ur>




<style type="text/css">
     table {
     	width: 700px;
        text-align: center;
        margin: 20px auto;
        border-collapse: collapse;
         }

      table caption{
          font-size: 3rem;
          font-weight: bolder;
          color: #888
          margin-bottom: 20px;

          }
      table,th,td{
      	border: 1px solid #888;
      }
      
      table tr:first-child {
      	background-color: lightgreen;
      }
      table tr:hover {
      	background-color: #efefef;
      	color:coral;
      }
      table tr td img {
          padding: 5px;
          border-radius: 10px;
      }
      /*a标签变成按钮*/
      table tr td a{

      	text-decoration-line: none;/*去掉下划线*/

      	width: 140px;
      	height: 40px;

      	padding: 5px;

      	border: 1px solid black;

      	background-color: white;

      	color: black;

      	border-radius: 8px;/*圆角*/

      }

      table tr td a:hover {
      	background-color: black;
        /*font-size: 1.1em;字体变大*/
      	color: white;
      }
</style> 




<table>
     <caption>购物清单</caption>
<tr>
	<th>编号</th>
	<th>名称</th>
	<th>品拍</th>
	<th>数量</th>
	<th>缩略图</th>
	<th>操作</th>
</tr>
<hr>
<tr>
	<td>1</td>
	<td>牛奶</td>
	<td>伊利</td>
	<td>1箱</td>
	<td><img src="images/milk.jpg" width="100px;"></td>
	<td><a href="http://jd.com">点击购物</a></td>
</tr>
<tr>
	<td>2</td>
	<td>苹guo</td>
	<td>红富士</td>
	<td>5斤</td>
	<td><img src="images/apple.jpg" width="100px;"></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="100px;"></td>
	<td><a href="http://jd.com">点击购物</a></td>
</tr>
</table>

总结

表格