四段代码分别完成了以下功能
1.使用了表格的基本标签
注意thead,tbody,tfoot存在的意义,以及tfoot里面的使用方法
2.设置某行的背景的颜色
3.设置某列的背景颜色,方法一
注意占位,以及span的使用方法4.设置某列的背景颜色,方法二
代码:<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5-表格</title>
</head>
<body>
<h1>1.表格中的基本属性</h1>
<p>包含有caption,thead,tbody,tfoot</p>
<p>其中,thead内使用th;tbody和tfoot使用tr和td</p>
<table border="1">
<caption>张三的成绩表</caption>
<thead>
<th>学科</th>
<th>成绩</th>
<th>排名</th>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>99</td>
<td>1</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
<td>1</td>
</tr>
<tr>
<td>外语</td>
<td>6</td>
<td>33</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"> 总分:205 总排名:22</td>
</tr>
</tfoot>
</table>
<br>
<h1>2.将表格中的某行的背景色设置为红色</h1>
<table border="1">
<caption>张三的成绩表</caption>
<thead>
<th>学科</th>
<th>成绩</th>
<th>排名</th>
</thead>
<tbody>
<tr style="background-color: red">
<td>语文</td>
<td>99</td>
<td>1</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
<td>1</td>
</tr>
<tr>
<td>外语</td>
<td>6</td>
<td>33</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"> 总分:205 总排名:22</td>
</tr>
</tfoot>
</table>
<br>
<h1>3.1.将表格中的某列的背景色设置为红色-方法一</h1>
<table border="1">
<colgroup span="1"><!--占位符,如果没有这一行-->
<colgroup style="background-color: red" span="1">
<caption>张三的成绩表</caption>
<thead>
<th>学科</th>
<th>成绩</th>
<th>排名</th>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>99</td>
<td>1</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
<td>1</td>
</tr>
<tr>
<td>外语</td>
<td>6</td>
<td>33</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"> 总分:205 总排名:22</td>
</tr>
</tfoot>
</table>
<br>
<h1>3.2.将表格中的某列的背景色设置为红色-方法二</h1>
<table border="1">
<colgroup>
<col span="1">
<col style="background-color: red" span="1">
</colgroup>
<caption>张三的成绩表</caption>
<thead>
<th>学科</th>
<th>成绩</th>
<th>排名</th>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>99</td>
<td>1</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
<td>1</td>
</tr>
<tr>
<td>外语</td>
<td>6</td>
<td>33</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"> 总分:205 总排名:22</td>
</tr>
</tfoot>
</table>
<br>
</body>
</html>
效果图: