表格的基本語法
Table控制項主要用於在web頁面上創建表格，其功能與HtmlTable類似。不同的是，Table控制項可以用動態的內容以編程的方式來生成表格。〈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〉〈th〉Food〈/th〉〈th〉Drink〈/th〉〈th〉Sweet〈/th〉
〈tr〉〈td〉A〈/td〉〈td〉B〈/td〉〈td〉C〈/td〉
〈/table〉
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
不帶框線的表格
〈table〉〈tr〉〈th〉Food〈/th〉〈th〉Drink〈/th〉〈th〉Sweet〈/th〉〈/tr〉
〈tr〉〈td〉A〈/td〉〈td〉B〈/td〉〈td〉C〈/td〉 〈/tr〉
〈/table〉
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
詳解
跨多行、多列的表元
(Table Span)跨多列的表元
〈th colspan=#〉〈table border〉
〈tr〉〈th colspan=3〉 Morning Menu〈/th〉
〈tr〉〈th〉Food〈/th〉 〈th〉Drink〈/th〉 〈th〉Sweet〈/th〉
〈tr〉〈td〉A〈/td〉〈td〉B〈/td〉〈td〉C〈/td〉
〈/table〉
| Morning Menu | ||
|---|---|---|
| Food | Drink | Sweet |
| A | B | C |
跨多行的表元
〈th rowspan=#〉〈table border〉
〈tr〉〈th rowspan=3〉 Morning Menu〈/th〉
〈th〉Food〈/th〉 〈td〉A〈/td〉〈/tr〉
〈tr〉〈th〉Drink〈/th〉 〈td〉B〈/td〉〈/tr〉
〈tr〉〈th〉Sweet〈/th〉 〈td〉C〈/td〉〈/tr〉
〈/table〉
| Morning Menu | Food | A |
|---|---|---|
| Drink | B | |
| Sweet | C |
表格尺寸設定
〈table border=#〉框線尺寸設定
〈table border=10〉〈tr〉〈th〉Food〈/th〉〈th〉Drink〈/th〉〈th〉Sweet〈/th〉
〈tr〉〈td〉A〈/td〉〈td〉B〈/td〉〈td〉C〈/td〉
〈/table〉
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
〈table border width=# height=#〉
表格尺寸設定
〈table border width=170 height=100〉〈tr〉〈th〉Food〈/th〉〈th〉Drink〈/th〉〈th〉Sweet〈/th〉
〈tr〉〈td〉A〈/td〉〈td〉B〈/td〉〈td〉C〈/td〉
〈/table〉
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
〈table border cellspacing=#〉
表元間隙設定
〈table border cellspacing=10〉〈tr〉〈th〉Food〈/th〉〈th〉Drink〈/th〉〈th〉Sweet〈/th〉
〈tr〉〈td〉A〈/td〉〈td〉B〈/td〉〈td〉C〈/td〉
〈/table〉
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
〈table border cellpadding=#〉
表元內部空白設定
〈table border cellpadding=10〉〈tr〉〈th〉Food〈/th〉〈th〉Drink〈/th〉〈th〉Sweet〈/th〉
〈tr〉〈td〉A〈/td〉〈td〉B〈/td〉〈td〉C〈/td〉
〈/table〉
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
表格內文字的對齊
〈tr align=#〉〈th align=#〉 #=left, center, right
〈td align=#〉
〈table border width=160〉
〈tr〉
〈th〉Food〈/th〉〈th〉Drink〈/th〉〈th〉Sweet〈/th〉
〈tr〉
〈td align=left〉A〈/td〉
〈td align=center〉B〈/td〉
〈td align=right〉C〈/td〉
〈/table〉
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
〈tr valign=#〉
〈th valign=#〉 #=top, middle, bottom, baseline
〈td valign=#〉
〈table border height=100〉
〈tr〉
〈th〉Food〈/th〉〈th〉Drink〈/th〉
〈th〉Sweet〈/th〉〈th〉Other〈/th〉
〈tr〉
〈td valign=top〉A〈/td〉
〈td valign=middle〉B〈/td〉
〈td valign=bottom〉C〈/td〉
〈td valign=baseline〉D〈/td〉
〈/table〉
| Food | Drink | Sweet | Other |
|---|---|---|---|
| A | B | C | D |
javascript Table排序
基本步驟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 table
在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 ]
)
