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 表格

运行效果：