6.2表格基本结构例子练习,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格基本结构</title>
<!----这里使用CSS为表格加上边框-->
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td>jQuery</td>
</tr>
<tr>
<td>hello</td>
<td>world</td>
</tr>
</table>
</body>
</html>
加上表格标题,表头单元格,表头,表身,表脚后:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格基本结构</title>
<!----这里使用CSS为表格加上边框-->
<style type="text/css">
table,tr,td,th{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>JavaScript</td>
<td>jQuery</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>hello</td>
<td>world</td>
</tr>
</tfoot>
</table>
</body>
</html>
合并行知识:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rowspan属性</title>
</head>
<body>
<table>
<tr>
<td>姓名:</td>
<td>小明</td>
</tr>
<tr>
<td rowspan="2">喜欢水果</td>
<td>苹果</td>
</tr>
<tr>
<td>香蕉</td>
</tr>
</table>
</body>
</html>
合并列知识:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>colspan属性</title>
</head>
<body>
<table>
<tr>
<td colspan="2">前端开发技术</td>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td>jQuery</td>
</tr>
</table>
</body>
</html>
第六章课后编程题2练习,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生成绩表</title>
<style type="text/css">
table,tr,td,th{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>学生成绩表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>250</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>520</td>
</tr>
<tr>
<td>平均分</td>
<td colspan="2">385</td>
</tr>
</table>
</body>
</html>