◆ 主要标签:
1.<table>
<table>...</table>标签用于创建表格,包含表格本身的代码。
2.<tr>
<tr>用来表示表格行,多个行结合在一起就构成一个表格。表格的每一行都用<tr>标签表示,并用相应的</tr> 结束
3.<td>
<td>标签表示每一行中的单元格(也可以算是定义了一个列),嵌与<tr>标签中。td是表格数据(Table Data)的英文缩写。
◆ 表格基本格式:
<table> #表格
<tr> #行
<td>单元格内容</td> #列
<td>单元格内容</td>
</tr>
</table>
示例:
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>snow</td>
<td>18</td>
</tr>
</table>
显示效果:
姓名 | 年龄 |
snow | 18 |
◆ 表格属性:
★ border=”1” 单元格边框粗细,一般设置为1即可,为0是不现实边框。
★ bordercolor="red" 边框颜色
★ bgcolor=”red” 背景颜色
★ width=”500” 单元格宽度
★ height=”300” 单元格高度
★ cellspacing=”2” 单元格与单元格的距离
★ cellpadding=”2” 内容距边框的距离
★ align=”left|right|center” 水平位置:左、右、中
1、<table align=”center”>,表格居中
2、<tr align="center">或<td align="center">,tr或者td内容居中。
★ valign=”top|middle|bottom” 垂直位置,仅针对表格内容
◆ 表格的标准结构:
在使用表格进行布局时,可以将表格划分为头部、主体和页脚,具体 如下所示:
★ <thead></thead>:用于定义表格的头部,必须位于<table></table>标记中,一般包含网页的logo和导航等头部信息。
★ <tbody></tbody>:用于定义表格的主体,位于<table></table>标记中<thead></thead>标记之后,一般包含网页中除头部和底部之外的其他内容。
★ <tfoot></tfoot >:用于定义表格的页脚,位于<table></table>标记中<tbody></tbody>标记之后,一般包含网页底部的企业信息等。
示例:
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
◆ 标题<caption></caption>:
对每个表格只能定义一个标题,通常这个标题会居中于表格之上。
示例:
<table>
<cpation align="center">标题</caption>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
显示效果:
标题姓名 | 年龄 |
注:align属性可以让表头居中
◆ 单元格合并:
colspan=”2” #合并同一行上的单元格
rowspan=”2” #合并同一列上的单元格
示例:
<table border="1">
<tr>
<td rowspan="2">单元格</td>
<td>单元格</td>
</tr>
<td>单元格</td>
</tr>
<tr>
<td colspan="2">单元格</td>
</tr>
</table>
显示效果:
单元格 | 单元格 |
单元格 | |
单元格 |
◆ 表头 <th></th>:
表头一般位于表格的第一行或第一列,其文本加粗居中,标题的文字自动加粗水平居中对齐。
示例:
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>snow</td>
<td>18</td>
</tr>
</table>
效果显示(因编辑器问题,无法居中,实际为居中):
姓名 | 年龄 |
---|---|
snow | 18 |
细线表格:
表格的边框线最小为1像素,所以正常情况下单元格与单元格之间的的边框最小为2像素(相邻的两个单元格各有一条边框线)。为了实现边框为1像素,采取的方法如下:
1、表格的边框线设置为0像素,并添加背景颜色。然后让单元格之间的距离为1像素。
2、单元格的背景颜色设置为白色。
原理:单元格之间的距离即为边框。
示例:
<table width="100" height="100" border="0" bgcolor="green" cellspacing="1">
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
</table>