表格的基本语法

带边框的表格

不带边框的表格

详解(跨多行、多列的表元 跨多列的表元 跨多行的表元 表格尺寸设置 边框尺寸设置 表格尺寸设置 表元间隙设置 表元内部空白设置 表格内文字的对齐)

javascript Table排序

Sql table

表格的基本语法

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〉

<table border>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

不带边框的表格

〈table〉

〈tr〉〈th〉Food〈/th〉〈th〉Drink〈/th〉〈th〉Sweet〈/th〉〈/tr〉

〈tr〉〈td〉A〈/td〉〈td〉B〈/td〉〈td〉C〈/td〉 〈/tr〉

〈/table〉

<table>

<tr><th>Food</th><th>Drink</th><th>Sweet</th></tr>

<tr><td>A</td><td>B</td><td>C</td> </tr>

</table>

详解

跨多行、多列的表元

(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〉

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

跨多行的表元

〈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〉

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

表格尺寸设置

〈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〉

<table border=10>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

〈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〉

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

〈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〉

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

〈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〉

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

表格内文字的对齐

〈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〉

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

〈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〉

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

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 ]

)