表格

最新推荐文章于 2025-04-06 00:15:00 发布

原创最新推荐文章于 2025-04-06 00:15:00 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

HTML & CSS 专栏收录该内容

14 篇文章

订阅专栏

数据表格的作用及组成
作用：显示数据
组成：

	<table>
		<tr>行
			<td>单元格</td>
			<td></td>
		</tr>
	</table>

数据表格的相关属性
width = “表格的宽度”
height = “表格的高度”
border = “表格的边框”
bgcolor = “表格的背景色”
cellspacing = “单元格与单元格之间的间距”
cellpadding = “单元格与内容之间的空隙”
水平对齐方式：align=“left/center/right”;
合并单元格属性：
colspan = “所要合并的单元格的列数"合并列;
rowspan = “所要合并单元格的行数”合并行;

	表格                                    描述 
	
	<table>                                定义表格 
	<caption>                            定义表格标题 
	<th>                                定义表格列标题 
	<tr>                                 定义表格的行 
	<td>                                 定义表格单元 
	<thead>                             定义表格的页眉 
	<tbody>                             定义表格的主体 
	<tfoot>                              定义表格的页脚 
	<col/>                              定义表格列的分组
	<colgroup>                          定义表格列的分组

html重要属性：
1）colspan = “value” 合并列
2）rowspan = “value” 合并行
3）valign = “top/bottom/middle/baseline” 垂直对齐方式
4）rules = “groups/rows/cols/all/none” 添加组分隔线说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
数据列分组

	(1) <colgroup span="分组列数"></colgroup>
	(2) <col     span=" " />

数据行分组

	<thead></thead>      表头
	<tbody></tbody>      表体
	<tfoot></tfoot>      表尾
	<!--说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。-->

(1) 单元格间距：
单元格间距(该属性必须给table添加)表示单元格边框之间的距离，不可取负值
border-spacing:value;

(2) 合并相邻单元格边框：
作用：合并相邻单元格边框 (该属性必须给table添加)separate(边框分开)默认值，collapse(边框合并)
border-collapse:separate/collapse;

(3) 无内容时单元格的设置：
定义当单元格无内容时，是否显示该单元格的边框区域；(记住边框不要合并，不然看不到效果。)show：显示；hide：隐藏；
empty-cells:show/hide;

(4) 设置表格标题的位置
定义表格的caption对象放于表格的哪个位置，与caption对象一起使用；
top（默认值）,bottom IE6以上版本支持
left,right位置只有火狐识别
caption-side：top/right/bottom/left