万万没想到,我竟然画了这个表。
这个表包含的知识有:表格的基本结构、如何操作表格、表格属性、表格的跨行跨列、表格的嵌套。
<!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>里面 -->