9.1 使用属性
在HTML中可以通过多种方式给表格设置样式。其中一种方式就是直接在表格或它的元素标签中使用属性。尽管现代开发者更喜欢用CSS来做样式化，但理解HTML的属性对于基本样式化还是很有帮助的。
表格的主要属性
属性 border
定义表格边框的宽度，通常以像素值来表示。
HTML
<table border="1">
<tr>
<th>名字</th>
<th>分数</th>
</tr>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</table>
属性 cellpadding:
定义单元格的内边距（单元格内容与边框之间的空隙）。
HTML
<table cellpadding="10">
<tr>
<th>名字</th>
<th>分数</th>
</tr>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</table>
属性 cellspacing:
定义单元格之间的间距。
HTML
<table cellspacing="5">
<tr>
<th>名字</th>
<th>分数</th>
</tr>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</table>
属性 width 和 height:
设置表格的宽度和高度。这些属性也可以用于 <td> 和 <th> 标签，为单元格设置尺寸。
HTML
<table style="text-align: left;" width="100%" height="200">
<tr>
<th width="50%">名字</th>
<th width="25%">项目</th>
<th width="25%">城市</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>Paris</td>
</tr>
</table>
属性 align:
定义表格在页面中的对齐方式（left, right, center）。
HTML
<table align="center">
<tr>
<th>名字</th>
<th>分数</th>
</tr>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</table>
属性 bgcolor:
设置表格或单元格的背景颜色。
HTML
<table bgcolor="#f0f0f0">
<tr>
<th>名字</th>
<th>分数</th>
</tr>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</table>
9.2 表格单元格的属性
表格单元格的属性
属性 colspan:
水平合并单元格。
HTML
<td colspan="2">合并的单元格</td>
属性 rowspan:
垂直合并单元格。
HTML
<td rowspan="2">合并的单元格</td>
属性 align:
定义单元格内容的水平对齐方式（left, right, center）。
HTML
<td align="center">居中的文本</td>
属性 valign:
定义单元格内容的垂直对齐方式（top, middle, bottom）。
HTML
<td valign="top">顶部对齐的文本</td>
属性 bgcolor:
定义单元格的背景颜色。
HTML
<td bgcolor="#ffcc00">彩色背景</td>
9.3 完整示例
带属性表格样式化的完整示例：
HTML
<table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
<caption>学生名单及成绩</caption>
<thead bgcolor="#c0c0c0">
<tr>
<th align="left">名字</th>
<th align="center">年龄</th>
<th align="right">城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td align="center">30</td>
<td align="right">London</td>
</tr>
<tr>
<td colspan="2" align="center">Maria 和 Peter</td>
<td align="right">Liverpool</td>
</tr>
<tr>
<td rowspan="2" valign="middle">Anna</td>
<td>25</td>
<td>Manchester</td>
</tr>
<tr>
<td>27</td>
<td>Leeds</td>
</tr>
</tbody>
<tfoot>
<td colspan="3" align="center">表格结束</td>
</tfoot>
</table>
示例说明
border="1": 设置表格边框宽度为1像素cellpadding="10": 设置所有单元格的内边距为10像素cellspacing="5": 设置单元格之间的间距为5像素width="80%": 表格宽度设置为父元素宽度的80%align="center": 将表格居中显示bgcolor="#e0e0e0": 设置表格背景颜色<caption>: 为表格添加标题-
<thead>和<tbody>: 分别对表格标题和主体进行分组，标题部分的背景颜色通过bgcolor="#c0c0c0"设置 <th>和<td>: 用于定义表头单元格和数据单元格<align>和<valign>: 定义单元格内容的水平和垂直对齐方式<colspan>和<rowspan>: 分别水平和垂直合并单元格
GO TO FULL VERSION