1、目录
2、1 案例 1——表格的基本结构HTML中的表格不仅可以清晰地显示数据,而且可以用于页面布局。类似于Word中的表格。
3、HTML中的表格标记如下:1、<table>用于表示一个表格对象的开始,</table>表示结束,只允许出现一对<table>标记。HTML5中不再支持它的任何属性。2、<tr>表示表格的行,有多少对就有多少行。3、<td>表示单元格数量。!DOCTYPE html><html><head><title>表格基本结构</title></head><body><table border="1"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> </tr></body></html>从预览图中,可以发现,表格没有边框,行高及列宽无法控制。td只提供了两个单元格合并属性。
4、2 创建表格
5、【例9.2】创建普通表格<!DOCTYPE html><html><body><h4>一列多唉捋胝:</h4><table border="1"><tr> <td>100</td></tr></table><h4>一行三列:</h4><table border="1"><tr> <td>100</td> <td>200</td> <td>300</td><tr></table><h4>两行三列:</h4><table border="1"><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></body></html>
6、【例9.3】创建一个带有标题的表格<!DOCTYPE html><html><body><h4>带有标题的表格</h4><table border="3"><caption>数据统计表</caption><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></body></html>
7、编辑表格
8、3.1 案例4—缇吾怩舭—定义表格的边框类型使用表格的border属性可以定义表格的边框类型。【例9.4】创建不同的边框类型的表格<!DOCTYPE html><html><body><h4>普通边框</h4><table border="1"><tr> <td>First</td> <td>Row</td></tr><tr> <td>Second</td> <td>Row</td></tr></table><h4>加粗边框</h4><table border="8"><tr> <td>First</td> <td>Row</td></tr><tr> <td>Second</td> <td>Row</td></tr></table></body></html>
9、3.2 案例5—缇吾怩舭—定义表格的表头表格中也存在表头,常见的表头分为水平和垂直两种。<!DOCTYP呶蓟鹭毵E html><html><body><h4>水平的表头</h4><table border="1"><tr> <th>姓名</th> <th>性别</th> <th>电话</th></tr><tr> <td>张三</td> <td>男</td> <td>56789</td></tr></table><h4>垂直的表头</h4><table border="1"><tr> <th>姓名</th> <td>小丽</td></tr><tr> <th>性别</th> <td>女</td></tr><tr> <th>电话</th> <td>56789</th></tr></table></body>
10、3.3 案例6——设置表格背景1、定义表格背景颜色<!DOCTYPE html><html><body><h4>背景颜色</h4><table border="1"bgcolor="green"><tr> <td>100</td> <td>200</td></tr><tr> <td>300</td> <td>400</td></tr></table></body></html>