HTML基本知识点——Table表格

表格<table>标记：

  基本格式：语法

<table>              <!—定义表格-->

<caption>...</caption>   <!—定义表名（标题）-->

    <tr>                  <!—定义表行-->

       <td>...</td>      <!—定义表列（单元格）-->              

</tr>

<tr>

       <td>...</td>

</tr>

</table>

注：将<td>..</td>换成<th>...</th>定义标题栏（单元格内的内容自动加粗居中）

<caption>的属性：

属性名称	属性值	说明
align	top	标题在表格上方
	bottom	标题在表格下方

 

  基本属性：

属性	用法
<table bgcolor=””>	设置表格的背景色
<table background=””>	设置表格的背景图片
<table border=””>	设置边框的宽度，若不设置此属性，则边框宽度默认为0
<table cellpadding=””>	设置表格单元格边框与其内部内容之间空间的大小，默认为2（表格的边距）
<table cellspacing=””>	设置单元格之间的空间的大小
<table bordercolor=””>	设置表格边框的颜色
<table bordercolorlight=””>	设置边框亮部分的颜色（当border值大于1时起作用）（默认下边框和右边框）
<table bordercolordark=””>	设置边框暗部分的颜色（当border值大于1时起作用）（默认上边框和左边框）
<table align=””>	设置表格的对齐方式（left,right,center）
<table width=””>	设置表格的宽度，单位用绝对像素值或百分比
<table height=””>	设置表格的高度，单位用绝对像素值或百分比

  <table>标签下的边框设置书属性

属性名称	属性值	说明
frame 该属性必须在border的属性值不为0的状态下 （table的外框属性）	void	不显示表格的边框
	above	只显示表格的上边框
	below	只显示表格的下边框
	hsides	只显示表格的上下边线
	vsides	只显示表格的左右边线
	lhs	只显示表格左边线
	border/box	显示表格的边框线
rules （table的内框属性）	rows	只显示水平方向的格框线
	cols	只显示垂直方向的格框线
	all	显示全部格框线
	groups	表示列组合水平部分
	none	不显示任何框线

 

  列（单元格）<td>的属性：

属性	用途
<td width=””>	设置单元格的宽度
<td height=””>	设置单元格的高度
<td bgcolor=””>	设置单元格的背景颜色
<td background=””>	设置单元格的背景图片
<td align=””>	设置单元格的水平对齐方式
<td valign=””>	设置单元格的垂直对齐方式
<td rowspan=””>	设置行合并数的目
<td colspan=””>	设置列合并的数目
<td nowarp=”nowarp”>	设置在单元格中不换行
<td bordercolorlight=””>	设置边框亮部分的颜色（当border值大于1时起作用）（默认下边框和右边框）
<td bordercolordark=””>	设置边框暗部分的颜色（当border值大于1时起作用）（默认上边框和左边框）

  表格的结构化

1.  结构化格式：

<tbale>

<thead>..........</thead>-------------表头区

<tbody>..........</tbody>——————表体区

...........................

<tfoot>....</tfoot>————————---表尾区

</table>

2.  表格列的直列化格式：<colgroup>...</colgroup> （列的组合）

属性名称	属性值	说明
align	left	靠左
	center	水平居中
	right	靠右
valign	top	靠上
	middle	垂直居中
	bottom	bottom
span	数字	从第一列开始向右直列的个数
bgcolor	颜色	背景颜色

注：个别直列设置：格式<col>功能完全和<colgroup>一样

在HTML代码中图片标记的两侧，不要有空白

错误代码：

<td>

    <imgsrc=”images/pic.jpg”/>

</td>

正确的代码：

<td><img src=”images/pic.jpg”/></td>