HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" type="text/css" href="Text05.css">
</head>
<body>
<table id="tb">
<tr>
<th>赛季</th>
<th>战队名字</th>
<th>战绩</th>
</tr>
<tr>
<td>2018夏季</td>
<td>IG</td>
<td>11-3</td>
</tr>
<tr class="cl">
<td>2018夏季</td>
<td>RNG</td>
<td>9-8</td>
</tr>
<tr>
<td>2018夏季</td>
<td>RW</td>
<td>12-2</td>
</tr>
<tr class="cl">
<td>2018夏季</td>
<td>WE</td>
<td>2-13</td>
</tr>
</table>
</body>
</html>CSS代码
#tb{
border-collapse: collapse;
width: 450px;
height: 450px;
}
/*border-collapse边框合并，不然会有两条边框,折叠方式*/
#tb td,#tb th{
border: 2px solid bisque;
padding: 8px;
text-align: center;
}
/*solid（固体的）设置外边框的颜色*/
/*tr标签控制一行整体，th为标题，tr为内容*/
/*通过id选择器选择表格，再用逗号连结所有标签，默认只有外边框*/
/*padding控制内边框*/
#tb th{
text-align:right;
background-color: aqua;
color: #ffffff;
}
/*text-align控制文字内容是否在表格的居中位置*/
#tb tr.cl td{
text-align: center;
color: black;
background-color: deepskyblue;
}效果：
