第一章基础表格和第二章
主要内容
-
了解表格应用场景
略
-
表格基本结构
image.png -
如何操作表格
image.png
image.png
image.png
image.png
image.png -
表格属性
image.png
image.png
image.png
image.png
image.png -
表格跨行跨列
image.png
image.png -
表格嵌套
image.png -
案例：表格网页布局
钟琳天才的杰作
<!DOCTYPE html>
<html>
<head>
<title> 表格 </title>
<meta charset="utf-8">
</head>
<body>
<table caption="前端工程师平均工资" border="1px" align="center" cellpadding="10" cellspacing="0">
<!-- 创建一个五行五列的表格 -->
<thead bgcolor="yellow">
<tr>
<th rowspan="2"> 城市 </th>
<th colspan="2"> 2014年 </th>
<th rowspan="2"> 2015年 </th>
<th rowspan="2"> 2016年 </th>
</tr>
<tr>
<th> 上半年 </th>
<th> 下半年 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 北京 </td>
<td> 8000 </td>
<td bgcolor="blue"> 9000 </td>
<td bgcolor="blue"> 10000 </td>
<td bgcolor="blue"> 12000 </td>
</tr>
<tr>
<td> 上海 </td>
<td> 6000 </td>
<td> 7000 </td>
<td> 8000 </td>
<td> 10000 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> 合计 </td>
<td> 7000 </td>
<td> 8000 </td>
<td> 9000 </td>
<td> 11000 </td>
</tr>
</tfoot>
</table>
</body>
</html>
第三章 表格布局
-
image.png
网友评论