收藏
批改状态：合格
老师批语：
一、表格的基础：当在网页中需要展示一组相关元素的情况下，可以用表格。
二、实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 700px;
text-align: center;
margin: 20px auto;
}
table caption {
font-size: 2rem;
font-weight: bolder;
color: #666;
margin-bottom: 20px;
}
table, th, td {
border: 1px solid #666;
}
table tr:first-child {
background-color: lightgreen;
}
table tr:not(:first-child):hover {
background-color: #efefef;
color: coral;
}
table tr td img {
padding: 5px;
border-radius: 10px;
}
table tr td 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: black;
color:white;
}
img{
width: 60px;
height: 70px;
}
</style>
</head>
<body>
<table>
<caption>成绩表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>照片</th>
<th>班级</th>
<th>学科</th>
<th>分数</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td><img src="http://s16.sinaimg.cn/bmiddle/4fa8f979g7607e4408a7f&690" alt=""></td>
<td>101</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td><img src="http://s16.sinaimg.cn/bmiddle/4fa8f979g7607e4408a7f&690" alt=""></td>
<td>102</td>
<td>语文</td>
<td>92</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td><img src="http://s16.sinaimg.cn/bmiddle/4fa8f979g7607e4408a7f&690" alt=""></td>
<td>103</td>
<td>数学</td>
<td>99</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td><img src="http://s16.sinaimg.cn/bmiddle/4fa8f979g7607e4408a7f&690" alt=""></td>
<td>105</td>
<td>数学</td>
<td>90</td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、运行结果：
这段代码，展示了一组学生的成绩相关信息。代码使用了css相关选择器，还运用了伪类选择器实现动画效果。
三，学习总结：
1、学习了伪类选择器的用法，原来没用过；
2、进一步学习了id选择器、类选择器、标签选择器的用法；
3、学习了table的显示控制 包括tr td th 以及在td 中加入其它标签的处理；
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
