HTML学习（三）——表格
表格基本结构
<table>
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
...
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
其中，<tr> </tr>规定了表格有多少行；<th> </th>用来设定第一行的表格内容，也就是表格的标题栏位（自动加粗、居中）；<td> </td>用来设置其余行的表格内容，也就是表格的数据栏位。
这样就制作出了一个四列数行的表格。
<table></table>标记可以设置如下属性：
| 属性名称 |
设置数值 |
说明 |
| border |
像素 |
表格外边框线的宽度 |
| cellspacing |
像素 |
绝对设置，单元格框线的宽度（包括外边框） |
|
|
百分比 |
相对设置，单元格框线的宽度（包括外边框） |
| cellpadding |
像素 |
绝对设置，单元格内数据与边框的距离 |
|
|
百分比 |
相对设置，单元格内数据与边框的距离 |
| width |
像素 |
绝对设置，设置表格的总宽度 |
|
|
百分比 |
相对设置，设置表格的总宽度 |
| height |
像素 |
绝对设置，设置表格的总高度 |
|
|
百分比 |
相对设置，设置表格的总高度 |
| align |
left |
表格往网页左边靠 |
|
|
center |
表格居于网页中间 |
|
|
right |
表格往网页右边靠 |
| background |
URL |
表格的背景图片 |
| summary |
字符串 |
给表格的注释信息,不会显示在网页上 |
| bordercolor |
英文/十六 |
边框颜色 |
| bordercolorlight |
英文/十六 |
边框的亮色 |
| bordercolordark |
英文/十六 |
边框的暗色 |
| bgcolor |
英文/十六 |
表格的背景颜色 |
注意，在表格设置align属性后，表格就失去了自动换行的特性，也即如果同时有多个表格依次向下排列，在第一个表格设置align属性后，如果表格的左边或右边有足够空间，下面的表格会自动填充上来。
<table> </table>还可以设置frame和rules属性，它们都属于边框设置，其中frame属性必须要在border属性设置不为零的情况下才会其效果：
| 属性名称 | 设置值 | 说明 |
| frame | void | 不显示表格边线 |
| above | 只显示表格上边线 | |
| below | 只显示表格下边线 | |
| hsides | 只显示表格上下边线 | |
| vsides | 只显示表格左右边线 | |
| lhs | 只显示表格左边线 | |
| rhs | 只显示表格右边线 | |
| border/box | 会显示表格所有边线 | |
| rules | rows | 只显示横行的格框线 |
| cols | 只显示竖列的格框线 | |
| all | 显示全部格框线 | |
| groups | ||
| none | 不显示任何格框线 |
<tr></tr> <th></th> <td></td>标记的常用属性（优先级比table的标记大）：
| 属性名称 | 设定值 | 说明 |
| height | 像素 | 绝对设置，设置行高度 |
| 百分比 | 相对设置，设置行高度 | |
| bgcolor | 英文/十六 | 设置单元格或行的颜色 |
| align (水平方向) | left | 单元格内容居左 |
| center | 单元格内容居中 | |
| right | 单元格内容居右 | |
| valign (垂直方向) | top | 单元格内容居上 |
| middle | 单元格内容居中 | |
| bottom | 单元格内容居下 | |
| nowrap (在tr中无效) | 无 | 阻止单元格内容换行 |
拆分与合并单元格
| 属性名称 | 设定值 | 说明 |
| colspan | 数字 | 输入多少数字，代表向右合并多少单元格 |
| rowspan | 数字 | 输入多少数字，代表向下合并多少单元格 |
作业
<head> <title>表格作业</title> </head> <body> <table border="2" width="350" cellpadding="3"> <tr align="center"><th colspan="2">稱謂</th><th width="55">姓名</th><th width="35">年齡</th><th width="150">備註</th></tr> <tr align="center"><td rowspan="3" valign="middle">長輩</td><td>父</td><td>鄧飲豐</td><td align="left">58</td><td rowspan="8" valign="top"><ul><li><i>吳純純是越南來的女傭，中學畢業。</i></li><li><i>咪咪是我養的寵物。</i></li><li><i>Lucky是老爸最喜歡的伯獅丁狗。</i></li></ul></td></tr> <tr align="center"><td>母</td><td>吳春美</td><td align="left">55</td></tr> <tr align="center"><td nowrap>祖母</td><td>蔡招弟</td><td align="left">76</td></tr> <tr align="center"><td rowspan="2" valign="middle">同輩</td><td>兄</td><td>鄧來發</td><td align="left">27</td></tr> <tr align="center"><td>弟</td><td>鄧村長</td><td align="left">22</td></tr> <tr align="center"><td colspan="2">幫傭</td><td>吳純純</td><td align="left">22</td></tr> <tr align="center"><td rowspan="2" valign="middle">寵物</td><td>狗</td><td>Lucky</td><td align="left">3</td></tr> <tr align="center"><td>貓</td><td>咪咪</td><td align="left">2</td></tr> </table> </body> </html>
