table

資料庫控制項

Table控制項主要用於在web頁面上創建表格，其功能與HtmlTable類似。不同的是，Table控制項可以用動態的內容以編程的方式來生成表格。

目錄
1基本信息 基本語法 邊框表格 不帶邊框 2詳細解釋 表元
多列表元 多行表元 表格設置 邊框尺寸 表格尺寸 表格間隙
空白設置 文字對齊 3排序 4Sql 5HTML 定義
HTML4.01與HTML5之間的差異 屬性 實例

基本信息

基本語法

〈table〉...〈/table〉 - 定義表格
〈th〉 - 定義表頭 Defines a table header
〈tr〉 - 定義錶行 Defines a table row
〈td〉 - 定義表元(表格的具體數據) td stands for "table data," Defines a table cell.

邊框表格

〈table border〉
〈/tr〉
〈/table〉

不帶邊框

〈table〉
〈/tr〉
〈/table〉

詳細解釋

表元

(Table Span)

多列表元

〈th colspan=#〉
Morning Menu

多行表元

〈th rowspan=#〉
Morning MenuFood A
Drink B
Sweet C

表格設置

〈table border=#〉

邊框尺寸

〈table border width=# height=#〉

表格尺寸

〈table border cellspacing=#〉

表格間隙

〈table border cellpadding=#〉

空白設置

Food Drink Sweet
A B C

文字對齊

〈tr align=#〉
〈th align=#〉 #=left, center, right
〈td align=#〉
Food Drink Sweet
ABC
〈tr valign=#〉
〈th valign=#〉 #=top, middle, bottom, baseline
〈td valign=#〉
Food DrinkSweet Other
ABCD

排序

基本步驟
1，把需要排序的行放到tbody中（程序會直接取tbody的rows）；
2，把排序行放到一個數組中；
this.Rows = Map(this.tBody.rows, function(o){ return o; });
3，按需求對數組進行排序（用數組的sort方法）；
this.Rows.sort(Bind(this, this.Compare, orders, 0));
4，用一個文檔碎片（document.createDocumentFragment()）保存排好序的行；
var oFragment = document.createDocumentFragment();
forEach(this.Rows, function(o){ oFragment.appendChild(o); });
ps：文檔碎片並不是必須的，但建議使用，大量dom操作時使用文檔碎片會更有效率。
5，把文檔碎片插入到tbody中。
this.tBody.appendChild(oFragment);

Sql

在Sql中也有table表的概念
在SQl創建table的語句為
CREATE TABLE table_name(
{ < column_definition > | column_name AS computed_column_expression
| < table_constraint > ::= [ CONSTRAINT constraint_name ] }
| [ { PRIMARY KEY | UNIQUE } [ ,...n ]

HTML

定義

標籤定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
更複雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

HTML4.01與HTML5之間的差異

在 HTML5 中，僅支持 "border" 屬性，並且只允許使用值 "1" 或 ""。

屬性

標籤的屬性請您參考以下的列表：
屬性值描述
align
lef
tcenter
right
HTML5 不支持。HTML 4.01 已廢棄。規定表格相對周圍元素的對齊方式。
bgcolor
rgb(x,x,x)
#xxxxxx
colorname
HTML5 不支持。HTML 4.01 已廢棄。規定表格的背景顏色。
border
1
""
規定表格單元是否擁有邊框。
cellpaddingpixelsHTML5 不支持。規定單元邊沿與其內容之間的空白。
cellspacingpixelsHTML5 不支持。規定單元格之間的空白。
frame
voi
dabove
below
hsides
lhs
rhs
vsides
box
border
HTML5 不支持。規定外側邊框的哪個部分是可見的。
rules
none
groups
rows
cols
all
HTML5 不支持。規定內側邊框的哪個部分是可見的。
summarytextHTML5 不支持。規定表格的摘要。
width
pixels
%
HTML5 不支持。規定表格的寬度。

實例

一個簡單的 HTML 表格，包含兩行兩列：
Month Savings
January $100

基本信息

中文名
工作台
外文名
table
功能
其功能與HtmlTable類似
不同
以編程的方式來生成表格
主要用於
在WEB頁面上創建表格