HTML学习笔记【5】使用表格

1.  创建表格

A. 表格的基本构成 table tr td

<table>

<tr>

<td>单元格内的文字</td>

<td>单元格内的文字</td>

</tr>

<tr>

<td>单元格内的文字</td>

<td>单元格内的文字</td>

</tr>

</table>

其中<table></table>标记分别表示表格的开始与结束，<tr></tr>分别表示行飞开始和结束<td><td>表示单元格的开始和结束

B. 设置表格的标题 caption

<caption>表格的标题</caption>

一个<table>表格中只能有一个标题

C. 表头 th

<table>

<tr>

<th>表头文字</th>

。。。。

</tr>

<tr>

<td>单元格内的内容<td>

<td>单元格内的内容<td>

。。。。

</tr>

</table>

2. 表格的基本属性

A. 表格宽度 widh <table width="表格宽度">

B. 表格高度  height <table height="表格长度">

C. 表格对齐方式 align <table align="表格对其方式">

如：<table width="500" height="500" align="center">

3.  表格的边框

A. 表格边框宽度 border <table border="表格边框宽度">

B. 表格边框颜色 bordercolor <table bordercolor="表格边框宽度">

C. 内框宽度 cellspacing <table cellspacing="内框宽度">

D. 表格内文字与边框间距 cellpadding  <table cellpadding="表格内文字与边框间距">

如：<table width="500" height="500" align="center" border="5" bordercolor="#999999" cellspacing="5" cellpadding="10">

4.  表格背景

A. 表格背景颜色 bgcolor <table bgcolor="表格背景颜色">

B. 表格背景图像 background <table bgcolor="表格背景图像地址">

如： <table bgcolor="#FF99FF" background="image/1.jpg">

5.  表格的行属性

A. 高度控制 height <tr height="行的高度">

B. 边框颜色 bordercolor <tr bordercolor="边框颜色">

C. 行背景bgcolor background <tr bgcolor="行背景颜色" background="行背景图片">

D. 行文字的水平对齐方式 align <tr align="行文字的水平对齐方式">

E. 行文字的垂直对齐方式 valign <tr align="行文字的垂直对齐方式">

6.  单元格属性

A. 单元格大小 width height <td width="单元格宽度" height="单元格高度">

B. 水平跨度   colspan   <td colspan="跨度列数">

C. 垂直跨度   rowspan   <td rowspan="跨度行数">   

D. 对齐方式   align valign  <td align="水平对齐方式" valign="垂直对齐方式">

其中垂直对齐方式有 top middle bottom 水平对齐方式有 left center right

E. 单元格的背景色 bgcolor  <td bgcolor="背景颜色">

F. 单元格的边框颜色 bordercolor <td bordercolor"边框颜色">

G. 单元格的亮边框 bordercolorlight <td bordercolorlight="亮边框的颜色">

H. 单元格的暗边框 bordercolordark <td bordercolordark="暗边框的颜色">

I. 单元格的背景图案  background <td background="背景图像地址">

7.  表格结构

A. 表格的表首标记<thead> 

<thead bgcolor="背景颜色" align="对齐方式">

。。。。。。

</thead>

B. 表格的表主体标记<tbody>

<tbody bgcolor="背景颜色" align="对齐方式">

。。。。。。

</tbody>

C. 表格的表尾标记<tfoot>

<tfoot bgcolor="背景颜色" align="对齐方式">

。。。。。。

</tfoot>