HTML学习笔记（四）表格

一、表格标签的基本使用

1、表格标签：给一堆表格添加表格语义。当数据量非常大时，表格被认为是最为清晰的一种展现形式。

2、格式：

<table>
	<tr>
		<td></td>
	</tr>
</table>

（1）table代表整个表格，tr代表表格中的一行，td代表表格中一行的一个单元格。
（2）表格标签的边框属性，决定边框宽度，默认情况下为0.
（3）表格中的高和宽默认是按照内容的尺寸来调整，也可通过width/height修改。
（4）如果给td标签设置width/height，会修改当前单元格的宽和高，不会影响到整个表格的宽和高。
（5）align属性：水平方向的对齐方式，left/right/center
A、给table设置align属性，可控制表格在水平方向的对齐方式。
B、给tr设置align属性，可控制当前行中所有单元格内容在水平方向的对齐方式。
C、给td设置align属性，可控制当前单元格中内容在水平方向的对齐方式。
注意：如果td、tr同时设置了align，则单元格中内容会按照td中设置的来对齐。

<table align="left/right/center">

（6）valign属性：垂直方向的对齐方式，top/bottom/center
A、给tr设置valign属性，可控制当前行所在单元格中内容在垂直方向的对齐方式。
B、给td设置valign属性，可控制当前单元格中内容在垂直方向的对齐方式。
（7）外边距：单元格与单元格之间的距离，默认为2px。

<table cellspacing="2px">

（8）内边距：单元格的边框与文字之间的间隙，默认为1.

<table cellpadding="1">

二、细线表格（仅供了解）

1、细线表格的制作方式：
（1）给table标签设置bgcolor（背景颜色）
（2）给tr标签设置bgcolor
（3）给table标签设置cellspacing=”1px”

三、表格中的其他标签

1、表格标题：在表格标签中提供了一个标签专门用于设置表格的标题，这个标题叫做caption。

2、caption标签注意点：
（1）caption一定要写在table标签中，否则无效。
（2）只要将标题写在caption标签中，那么标签就会自动想对于表格的宽度居中。

3、标题单元格标签：在表格中提供了一个标签专门用来存储每一列的标题，这个标题叫做th标签，只要将当前列的标题存储在这个标签中，就会自动居中+加粗文字。

4、注意：表格中有两种单元格，一种为td，一种为th，td是专门用来存储数据的，th是专门用来存储当前列的标题的。

四、表格的结构

1、表格的分类：表格的标题、表格的表头信息、表格的主体信息、表格的页尾。

2、表格的完整结构：

<table>
        <caption>表格的标题</caption>
        <thead>（表头信息）
            <tr>
                <th>每一列的标题</th>
            </tr>
        </thead>
        <tbody>（主体信息）
            <tr>
                <td>数据</td>
            </tr>
        </tbody>
        <tfoot>（表格附加信息）
            <tr>
                <td>数据</td>
            </tr>
        </tfoot>
</table>

3、注意
（1）如果没有编写tbody，系统会自动添加。
（2）如果指定了thead和tfoot，那么在修改整个表格高度时，thead和tfoot有自己默认的高度，不会随表格高度的变化而变化。

五、单元格合并

1、水平方向上的单元格合并：可以给td标签添加一个colspan属性，来指定把一个单元格当做多个单元格来看待。

<td colspan="2"></td> <!--把当前单元格当作两个单元格来看待-->

注：由于把某一单元格当作多个看待，所以会多出一些单元格，需删除才能正常显示。
注：一定要注意单元格合并永远是向后或向下合并，而不能向前或向下合并。

2、垂直方向合并：rowspan属性

<td rowspan="2"></td>

六、表格联系

1、快捷键：
ctrl+shift+向上箭头：选中当前行及上面的行；
ctrl+shift+向下箭头：选中当前行及下面的行

2、多行代码同时左移一个tab键：ctrl+[；
多行代码同时右移一个tab键：ctrl+]

3、快速新起一行：ctr;+enter