万万没想到，我竟然画了这个表。
这个表包含的知识有：表格的基本结构、如何操作表格、表格属性、表格的跨行跨列、表格的嵌套。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格HTML</title>
</head>
<body>
<table border="5" width="600px cellspacing="" cellpadding="" align="center" frame="below">
<caption>标题：年平均气温</caption>
<thead>
</thead>
<tbody>
<tr>
<td>3月</td>
<td> <!-- 表格嵌套 -->
<table border="5" width="500px" bgcolor="skyblue" cellspacing="0"
cellpadding="20px" align="center" frame="void">
<caption>标题：3月平均气温</caption> <!-- 一个表格只有一个标题，caption紧跟在table标签后面 -->
<!-- thead tbody tfoot 结构化展示表格，不影响表格的外观，
无论 thead tbody tfoot怎么摆放，thead总是相对显示在最上面，tfoot总是相对显示在最下面-->
<thead>
<tr align="center" valign="center" bgcolor="steelblue">
<th height="40px">城市</th> <!-- 加粗和居中 -->
<!-- <td>上海 </td> -->
<td align="center" colspan="2">上海/北京</td>
<td>广州</td> <!-- colspan 跨列要把这一列删除掉 -->
</tr>
</thead>
<tbody >
<tr align="center">
<td rowspan="2">温度/紫外线</td>
<td >26℃</td>
<td>25℃</td>
<td>30℃</td>
</tr>
<tr align="center">
<!-- <td>紫外线</td> --> <!-- rowspan 跨行要把跨的行的那一列删掉 -->
<td >弱</td>
<td>弱</td>
<td>强</td>
</tr>
<tr align="center">
<td >天气</td>
<td>多云</td>
<td>多云</td>
<td>晴天</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td >风力</td>
<td>3级</td>
<td>4级</td>
<td>1级</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<table border="5" width="600px cellspacing="" cellpadding="" align="center" frame="below">
<thead>
</thead>
<tbody>
<tr>
<td>4月</td>
<td> <!-- 表格嵌套 -->
<table border="5" width="500px" bgcolor="skyblue" cellspacing="0"
cellpadding="20px" align="center" frame="void">
<caption>标题：4月平均气温</caption> <!-- 一个表格只有一个标题，caption紧跟在table标签后面 -->
<!-- thead tbody tfoot 结构化展示表格，不影响表格的外观，
无论 thead tbody tfoot怎么摆放，thead总是相对显示在最上面，tfoot总是相对显示在最下面-->
<thead>
<tr align="center" valign="center" bgcolor="steelblue">
<th height="40px">城市</th> <!-- 加粗和居中 -->
<!-- <td>上海 </td> -->
<td align="center" colspan="2">上海/北京</td>
<td>广州</td> <!-- colspan 跨列要把这一列删除掉 -->
</tr>
</thead>
<tbody >
<tr align="center">
<td rowspan="2">温度/紫外线</td>
<td >27℃</td>
<td>28℃</td>
<td>34℃</td>
</tr>
<tr align="center">
<!-- <td>紫外线</td> --> <!-- rowspan 跨行要把跨的行的那一列删掉 -->
<td >弱</td>
<td>弱</td>
<td>强</td>
</tr>
<tr align="center">
<td >天气</td>
<td>多云</td>
<td>多云</td>
<td>晴天</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td >风力</td>
<td>4级</td>
<td>4级</td>
<td>3级</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
<!-- 笔记 -->
<!-- th 加粗和居中 -->
<!-- 一个表格只有一个标题，caption紧跟在table标签后面 -->
<!-- thead tbody tfoot 结构化展示表格，不影响表格的外观，无论 thead tbody tfoot怎么摆放，thead总是相对显示在最上面，tfoot总是相对显示在最下面-->
<!-- 表格属性 -->
<!-- border：外框线宽度 -->
<!-- width：表格宽度 -->
<!-- bgcolor：表格背景颜色 -->
<!-- cellspacing：内框线宽度 -->
<!-- cellpadding：表格内文字与表格的距离 -->
<!-- align：表格位置 -->
<!-- frame：外框线属性。当使用这个属性时，不会再有border的效果 -->
<!-- rules：内框线属性 none表示不显示内框线 -->
<!-- 跨列 colspan -->
<!-- 跨行 rowspan -->
<!-- 表格嵌套：1.需要完整结构 2.把需要嵌套的表格放到<td></td>里面 -->
3795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
