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>