HTML学习笔记之第五章:表格
前言:关于本章节的内容,并非全部是个人原创,只是在学习中的总结笔记。难免有与其他学习网站或者博客相同之处,如有类同,各位大神莫怪!!!此资料只是用来学习和工作的参考,并不作为商业用途。希望与大家一起分享,共同进步!!!
第五章:表格
1.表格的基本结构
表格由<table>标签来定义,每个表格均有若干行,每行被分为若干单元。
<table> …</table>定义表格
<caption 属性="属性值">表格的标题</caption>
<th>定义表格的表头</th>
<tr>定义表格的行</tr>
<td>定义表格单元</td>
<thead>定义表格的页眉</thead>
<tbody>定义表格的主体</tbody>
<tfoot>定义表格的页脚</tfoot>
(<thead>、<tbody> 以及 <tfoot> 很少被使用,这是因为糟糕的浏览器支持)
<col 属性=“属性值”>定义用于表格列的属性
<colgroup></colgroup>对表格中的列进行组合,以便对其进行格式化。
(如需对全部列应用样式,这样就不需要对各个单元和各行重复应用样式了)
2.<table>标签
<table> 标签定义HTML表格。
简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。
tr元素定义表格行,th元素定义表头,td元素定义表格单元。
更复杂的HTML表格也可能包括 caption、col、colgroup、thead、tfoot 以及tbody 元素。
格式:<table 属性1="属性值1" 属性2="属性值2" ... ... >表格内容</table>
属性:align:规定表格相对周围元素的对齐方式。
left 居左显示
center居中显示
right居右显示
bgcolor:规定表格的背景颜色。
rgb(x,x,x)
#xxxxxx
colorname
border:规定表格边框的宽度。
cellpadding:规定单元边沿与其内容之间的空白。
cellspacing:规定单元格之间的空白。默认是2px,单位像素
width:表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分百(%)
height:表示表格的高度,它的值可以是像素(px)也可以是父级元素的百分百(%)
frame:规定外侧边框的哪个部分是可见的。
void(默认值):表示无边框
above:表示仅顶部有边框
below:表示仅有底部边框
hsides:表示仅有顶部边框和底部边框
lhs:表示仅有左侧边框
rhs:表示仅有右侧边框
vsides:表示仅有左右侧边框
box:包含全部4个边框
border:包含全部4个边框
rules:规定内侧边框的哪个部分是可见的。
rules属性在Firefox和Opera中可以正确地显示。
Internet Explorer、Chrome以及Safari 3对该属性的显示并不正确。
none(默认值):无分割线
all:表示所有的分割线
rows:仅有行分割线
clos:仅有列分割线
groups:仅在行组和列组之间有分割线
3.<caption>标签
<caption> 表格标题 </caption>
caption标签必须紧随table标签之后,<tr>表格行之前。
您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
属性:
align:规定标题的对齐方式。
top:标题放在表格的上部
bottom:标题放在表格的下部
left:标题放在表格的左部
right:标题放在表格的右部
4.<tr>标签
<tr>...</tr>标签定义HTML表格中的行。tr元素包含一个或多个th或td元素。
属性:align:规定表格行中内容的水平对齐方式。
rght:右对齐
lft:左对齐
cnter:居中对齐
bgcolor:规定表格行的背景颜色。
valign:性规定表格行中内容的垂直对齐方式。
top:对内容进行上对齐。
middle:对内容进行居中对齐(默认值)。
bottom:对内容进行下对齐。
baseline:与基线对齐。
height:控制行的高度。
bordercolor:设置行的边框颜色。
5.<td>和<th>标签
<td>和<th>都是单元格的标记,其必须嵌套在<tr>标签内,是成对出现。
<th>定义表格内的表头单元格</th>
<td>单元格中的数据</td>
注意:<th>中的文字默认会被加粗,而<td>不会。
属性:
align:规定单元格内容的水平对齐方式。
bgcolor:规定单元格的背景颜色。
valign:规定单元格内容的垂直排列方式。
width:设置单元格宽度
height:设置单元格高度
colspan:规定单元格可横跨的列数。
rowspan:设置单元格所占行数
6.例如:本例演示如何定义跨行或跨列的表格单元格。
显示效果:
7. 例如:HTML <colgroup> 标签
只能在 <table> 元素之内,在任何一个 <caption> 元素之后,在任何一个
<thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。
如果想对 <colgroup> 中的某列定义不同的属性,请在 <colgroup> 标签内使用 <col> 。
运行效果:
8. 例如:带有 thead、tbody 以及 tfoot 元素的HTML 表格
运行效果: