table
表格的基本语法
〈table〉...〈/table〉 - 定义表格
〈tr〉 - 定义表行
〈th〉 - 定义表头
〈td〉 - 定义表元(表格的具体数据)
带边框的表格：
〈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〉〈td〉A〈/td〉〈td〉B〈/td〉〈td〉C〈/td〉
〈/table〉
<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</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>
[1]
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);