表格

表格简介

表格可以方便、灵活的实现对网页的排版，可以把相互关联的信息元素层次清晰的集中定位。
创建一个表格的基本步骤:
（1)设计表格草图
（2)确定表头
（3)确定需要的行数和列数，标识出需要跨多少个单元格的行和列
(4)合理的运用表的的嵌套

表格标记和表格标题

表格标记：

主要由三个标记组成：即<table> <tr> <td>
基本语法：

<table>
<tr>
  <td>...</td>
  ...
</tr>
<tr>
  <td>...</td>
  ...
</tr>
...
</table>    

语法说明：
（1）<table>标记代表表格的开始，</table>代表表格的结束。
（2） <tr>标记代表行的开始， </tr>代表行的结束。
（3） <td> 标记之间是单元格的内容，可以是文字，也可以是其他标记。
（4）在一个表格中， <tr>的个数代表表格的行数，每对 <tr>… </tr>之间 <td> 的个数代表该行的单元格数。

表格标题：

一般放在表格的外部上面，对表格内容的简单说明，用<caption>标记实现。
基本语法：

<caption>...</caption>

表格表头：

表头是指表格的第一行或第一列等对表格内容的说明，文字样式为居中、加粗显示，通过<th> 标记实现。
基本语法：

<tr>
  <th>...<th>
  ...
</tr>

表格的属性修饰

设置表格的边框属性:
可以通过添加border、bordercolor、bordercolorlight（上边框颜色）、bordercolordark（下边框颜色）属性为表格设置边框线以及美化表格。
基本语法：

<table border="" bordercolor="" bordercolorlight=""bordercolordark=""

设置表格的高度和宽度：
基本语法：

<table width="" height="">

语法说明：
（1）width和height属性的值可以是像素或百分比。
（2）对于非嵌套表格，百分比表示的是表格应该占据的浏览器窗口的百分比，对于嵌套表格，百分比表示的是相对嵌套表格所在的单元格宽度。
（3）用百分比设置大小的表格会随着浏览器窗口或嵌套表格所在的单元格大小变化调整，而用像素设置大小的表格是绝对大小。
（4）默认情况下，表格的宽度和高度会根据内容自动调整。
设置表格的背景颜色：
基本语法：

<table bgcolor="">

设置表格的背景图像：
基本语法：

<table backgroung="">

设置边框样式：
我们可以利用<table>标记的frame属性控制只显示部分表格的边框，也可以利用rules属性控制只显示部分内部边框
基本语法：

<table frame="" rules="">

frame的属性：

属性	描述
above	显示上边框
below	显示下边框
hsides	显示上下边框
lhs	显示左边框
rhs	显示右边框
vsides	显示左右边框
border	显示上下左右边框
void	不显示边框

rules的属性:

属性	描述
all	显示所有内部边框
none	不显示内部边框
cols	仅显示列边框
rows	仅显示行边框
groups	显示介于行列间的边框

设置表格的单元格间距
基本语法：

<table cellspacing="">

设置表格的单元格边距：
单元格边距指的是单元格中的内容与单元格边框的距离
基本语法：

<table cellpadding="">

设置表格的水平对齐属性
基本语法：

<table align="left/center/right”>

设置表格行的属性

<tr>标记的属性

属性	描述
align	行内容的水平对齐
valign	行内容的垂直对齐
bgcolor	行的背景颜色
bordercolor	行的边框颜色
bordercolorlight	行的亮边框颜色
bordercolordark	行的暗边框颜色

行内容水平对齐
基本语法：

<tr align="">...</tr>

align的值可以是left、center、right 默认值是left
行内容垂直对齐
基本语法：

<tr valign="">...</tr>

valign的值可以为top、middle、bottom 默认值是middle

设置表格中某一单元格的属性

<td> 标记的属性

属性	描述
align	单元格内容的水平对齐
valign	单元格内容的垂直对齐
bgcolor	单元格的背景颜色
bordercolor	单元格的边框颜色
bordercolorlight	单元格的亮边框颜色
bordercolordark	单元格的暗边框颜色
width	单元格的宽度
height	单元格的高度
rowspan	单元格的跨行
colspan	单元格的跨列

设置单元格跨行
基本语法：

<td rowspan="">...</td>

设置单元格跨列
基本语法：

<td colspan="">...</td>