一、表格
表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。
单元格的特点：同行等高、同列等宽。
表格的基本语法：
表格的一些常用标签：
table的属性
- border：设置表格的边框，默认没有边框
- align：设置表格的水平对齐方式，默认left，取值center，right
- width：设置表格的宽度
- height：设置表格的高度
- cellpadding：设置内容距离边框的距离
- cellspacing:设置单元格之间的距离，默认1px 当取值为0，变成一条线
- bgcolor:设置背景颜色
- background:设置背景图片（图片的优先级大于背景颜色）
- bordercolor：设置边框颜色
练习： 设置一个三行三列的表格
<table cellpadding="50" cellspacing="0" border="1"> <tr> <td>三行三列的表格</td> <td>三行三列的表格</td> <td>三行三列的表格</td> </tr> <tr> <td>三行三列的表格</td> <td>三行三列的表格</td> <td>三行三列的表格</td> </tr> <tr> <td>三行三列的表格</td> <td>三行三列的表格</td> <td>三行三列的表格</td> </tr> </table>
练习二：
<table border="1" align="center" width="500"> <caption align="center"><b>同学通讯录</b></caption> <tr bgcolor="pink"> <th>姓名</th> <th>性别</th> <th>电话</th> <th colspan="2">兴趣爱好</th> </tr> <tr align="center"> <td>王明</td> <td>男</td> <td>123456</td> <td>打球</td> <td>唱歌</td> </tr> <tr align="center"> <td>张三</td> <td>男</td> <td>123789</td> <td>跳舞</td> <td>篮球</td> </tr> <tr height="25"> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>
练习三：
<table border="1" cellspacing="0" cellpadding="0" width="500" align="center"> <caption align="center">列车时刻表</caption> <tr align="center"> <td>站名</td> <td>到站时间</td> <td>开车时间</td> </tr> <tr align="center"> <td>北京</td> <td>10:30</td> <td>10:50</td> </tr> <tr align="center"> <td>上海</td> <td>11:20</td> <td>11:40</td> </tr> </table>
二、tr的属性
三、td的属性
- colspan:水平合并，写在合并开始的单元格上，取值为数字。删除的个数=合并的个数-1
- rowspan:垂直合并，写在合并开始的单元格上，取值为数字。删除的个数=合并的个数-1
练习：
<table border="1" width="200" height="200" cellspacing="0" cellpadding="1" align="center"> <caption align="center">学生信息表</caption> <tr align="center"> <th colspan="3"> 学生基本信息</th> <th colspan="3">成绩</th> </tr> <tr align="center"> <th>姓名</th> <th>性别</th> <th>专业</th> <th colspan="2">课程</th> <th>分数</th> </tr> <tr align="center"> <td>1</td> <td>1</td> <td rowspan="2">计算机</td> <td rowspan="3" colspan="2">C </td> <td>1</td> </tr> <tr align="center"> <td>2</td> <td>2</td> <td>2</td> </tr> <tr align="center"> <td>4</td> <td>4</td> <td>4</td> <td>4</td> </tr> <tr align="center"> <td>3</td> <td>3</td> <td>3</td> <td colspan="2">3</td> <td>3</td> </tr> </table>
