HTML 表格元素

在 CSS 之前，table 元素常用来布局，这种做法在 HTML4 之后不再推荐使用，table 的初衷是用于显示表格数据。

简单来说，表格由 table 标签来定义，每个表格均有若干行（由 tr 定义），每行被分割为若干单元格（由 td 定义）。td（table data），即数据单元格，其内容可以是文本、图片、列表、段落、表单、水平线表格等。

[ 表格的基本结构 ] 表格是由指定数目的行和列组成的。 // 同行的总高度一致，同列的总宽度一致。

单元格：表格的最小单位，一个或多个单元格纵横排列组成了表格

行：一个或多个单元格横向堆叠形成了行

列：由于表格单元格宽度必须一致，所以单元格纵向排列形成了列

[ HTML 中的表格 ] 在 HTML 中，表格提供了定义表格式数据的方法；表格由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；表格不要纠结于外观，都是可以通过 CSS 来实现的。

// table、tr、td，三者是创建表格的基本标签，缺一不可。

<table>
    <caption>表格的标题</caption>
	<tr>
		<td>单元格中的文字</td>
		...
	</tr>
	...
</table>

// table、tr、td，三者是创建表格的基本标签，缺一不可。

<table>

<caption>表格的标题</caption>

<tr>

<td>单元格中的文字</td>

...

</tr>

...

</table>

[1] table 用于定义一个表格，通过二维数据表表示的信息

// 默认样式：IE7-浏览器不支持border-spacing
   table{border-collapse: separate;border-spacing: 2px;border: 1px solid gray;}

// 表格的属性   
   border：设置表格的边框，默认为“border=0”，无边框（在html5中，border只能为"1"或" "）
   width:设置表格的宽度，常用属性值：像素值
   height：设置表格的高度，常用属性值：像素值
   align:设置表格在网页中的水平对齐方式，常用属性值：left/center/right (详见：表格的对齐方式)

   // 另，html5已废弃属性：
      cellpadding(px/%)：设置单元格内容与单元格边框之间的空白间距，常用属性值：像素值（默认为1像素）
      cellspacing(px/%)：设置单元格与单元格边框之间的空白间距，常用属性值：像素值（默认为2像素）

   在 html5 中，使用 <table style="border-collapse:collapse;"></table> 可以去掉 td 之间的间隔;
   对于单元格内容与边框之间的填充，可以通过 <td style="padding:0;"></td> 消除，一般通过CSSRset设置。

// 默认样式：IE7-浏览器不支持border-spacing

table{border-collapse: separate;border-spacing: 2px;border: 1px solid gray;}

// 表格的属性

border：设置表格的边框，默认为“border=0”，无边框（在html5中，border只能为"1"或" "）

width:设置表格的宽度，常用属性值：像素值

height：设置表格的高度，常用属性值：像素值

align:设置表格在网页中的水平对齐方式，常用属性值：left/center/right (详见：表格的对齐方式)

// 另，html5已废弃属性：

cellpadding(px/%)：设置单元格内容与单元格边框之间的空白间距，常用属性值：像素值（默认为1像素）

cellspacing(px/%)：设置单元格与单元格边框之间的空白间距，常用属性值：像素值（默认为2像素）

在 html5 中，使用 <table style="border-collapse:collapse;"></table> 可以去掉 td 之间的间隔;

对于单元格内容与边框之间的填充，可以通过 <td style="padding:0;"></td> 消除，一般通过CSSRset设置。

[2] caption 表格的标题，通常这个标题会被居中于表格之上（虽然写在 table 标签的里面）

// 默认样式
   caption{text-align: center;}

// 样式属性：<caption style="caption-side:bottom">北京天气</caption>
   caption-side: top(默认)
   caption-side: bottom

// caption标签必须紧随table标签之后，且只能对每个表格定义一个标题。

// 默认样式

caption{text-align: center;}

// 样式属性：<caption style="caption-side:bottom">北京天气</caption>

caption-side: top(默认)

caption-side: bottom

// caption标签必须紧随table标签之后，且只能对每个表格定义一个标题。

[3] colgroup 表格中的一组列表

// 属性：span（默认为1）

<table border=1>
    <colgroup span=2 width=70></colgroup>		
    <tbody>
	<tr>
	    <td>1</td><td>2</td><td>3</td>
	</tr>
	<tr>
	    <td>4</td><td>5</td><td>6</td>
	</tr>
    </tbody>
</table>

// 属性：span（默认为1）

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

[ col ] 定义列上所有公共单元格上的公共语义   // 属性：span

<table border=1> <colgroup> <col width=50 /> <col span=2 width=70/> </colgroup> <tbody> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> </tbody> </table>

1
2
3
4
5
6
7
8
9
10

<table border=1>
    <colgroup>
        <col width=50 />
        <col span=2 width=70/>
    </colgroup>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
    </tbody>
</table>

[4] 表格结构（了解）：tbody、thead、tfoot

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，不推荐）：

tbody 用于定义表格的主体，一系列行数据；子元素只能是tr；可出现多个。
      // 位于table标签中，一般包含网页中除头部和底部之外的其他内容。
thead 用于定义表格的头部，定义表格列头的行
      // 必须位于table标签中，一般包含网页的logo和导航等头部信息。
tfoot 表格页脚，定义表格列简介的行

// 它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚

tbody 用于定义表格的主体，一系列行数据；子元素只能是tr；可出现多个。

// 位于table标签中，一般包含网页中除头部和底部之外的其他内容。

thead 用于定义表格的头部，定义表格列头的行

// 必须位于table标签中，一般包含网页的logo和导航等头部信息。

tfoot 表格页脚，定义表格列简介的行

// 它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚

[5] tr 表格中的行 // HTML中，tr 中只能嵌套 td，而 td 标签，它就行一个容器，可以容纳所有的元素

[6] td 表格中的单元格

常用属性：colspan、rowspan、scope

// 默认样式
   th{padding: 1px;text-align: center;font-weight: bold;}
   td{padding: 1px;}

常用属性：colspan、rowspan、scope

// 默认样式

th{padding: 1px;text-align: center;font-weight: bold;}

td{padding: 1px;}

[7] th 表头标签（单元格的标题），一般位于表格的第一行或第一列，其文本加粗居中

1. 常用属性：colspan、rowspan、scope
2. scope属性 - 值：row、col、rowgroup、colgroup、auto
   表示单元格是某一行、某一列、（合并单元格后）rowgroup...标题，只有语义上的，没有视觉上的效果

1. 常用属性：colspan、rowspan、scope

2. scope属性 - 值：row、col、rowgroup、colgroup、auto

表示单元格是某一行、某一列、（合并单元格后）rowgroup...标题，只有语义上的，没有视觉上的效果

[ 合并单元格 & 对齐方式 ]

表格跨列：colspan="3" 表格中跨行：rowspan="2" colspan：规定单元格可横跨的列数。 rowspan：规定单元格可横跨的行数。 // col为column(列)的缩写，span为跨度；row为行，rowspan即跨行。跨行/列步骤：在需合并的第一个单元格（左上角），设置跨行或跨列属性；删除被合并的其他单元格； // 为什么呢？因为：跨行/列操作，在本质上其实是将需合并的第一个单元格扩大相应的操作，这会导致其他的单元格被挤压 ...

1
2
3
4
5
6
7

表格跨列：colspan="3"    表格中跨行：rowspan="2"
     colspan：规定单元格可横跨的列数。
     rowspan：规定单元格可横跨的行数。
    // col为column(列)的缩写，span为跨度；row为行，rowspan即跨行。

跨行/列步骤：在需合并的第一个单元格（左上角），设置跨行或跨列属性；删除被合并的其他单元格；
    // 为什么呢？因为：跨行/列操作，在本质上其实是将需合并的第一个单元格扩大相应的操作，这会导致其他的单元格被挤压 ...

// 对齐方式，建议使用CSS设置表格对齐（align）：居左（left）/ 居中（center）/ 居右（right）单元格对齐水平（align）：left 、center、right 垂直（valign）：top（顶端）、middle（居中）、bottom（底端）、baseline（基线）

1
2
3
4
5
6

// 对齐方式，建议使用CSS设置

    表格对齐（align）：居左（left）/ 居中（center）/ 居右（right）
    单元格对齐
           水平（align）：left 、center、right
           垂直（valign）：top（顶端）、middle（居中）、bottom（底端）、baseline（基线）