html>
表格table{
margin: 0px auto;
width: 700px;
text-align: center;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #666;
}
table tr:hover {
background-color: #efefef;
color: coral;
}
table tr td a {
text-decoration: none;
width:140px;
height:40px;
padding:5px;
border:1px solid black;
background: white;
color:black;
border-radius: 8px;
}
img{
width: 50px;
height: 50px;
}
物品表格
序号品名图片操作1桌布 查看详情2夹子 查看详情3支架 查看详情运行效果如下:
运行结果完成了我想要的目的,简单的表格制作会非常简单,但是复杂及功能多样的有些难以理解如何去操作,很多代码不知道什么意思,看手册的时间偏多。
总结:学习了table及所关联标签制作出一个表格页面,这个应该是我学习到现在最为实用的一个功能之一了,很喜欢朱老师上的这节课,让人比较容易懂,但是跨度较大,我需要多多学习!
以下为手抄代码: