table标记用于保存表格数据。与列表或段落不同，表中的数据在行/列结构中的位置赋予了额外的含义。
永远不要使用表格来控制页面设计布局。如果要按行和列排列项目，请参阅行和列。
表需要有标题和正文，并且必须使用标签来指示列标题和行标题。
响应表
如果您的表可以简化为一系列行，则可以使用“responsive-table”类让内容在移动设备上重新排列。
| 第1列 | 第2列 | 第三列 | 列4 |
|---|---|---|---|
| 数据1 | 数据2,1 | 数据3,1 | 数据4日1 |
| 数据1、2 | 数据2,2 | 数据3、2 | 数据4,2 |
| 数据1、3 | 数据2、3 | 数据3,3 | 数据4,3 |
代码示例
& lt;表类=“responsive-table”比;& lt; thead>& lt; tr>< the scope="col">Column 1<；< the scope="col">Column 2<；< scope="col">Column 3<；< the scope="col">Column 4<；& lt; / tr>& lt; / thead>& lt; tbody>& lt; tr>& lt; td>数据1,1 & lt; / td>& lt; td>数据2,1 & lt; / td>& lt; td>数据3、1 & lt; / td>4 & lt; td>数据,1 & lt; / td>& lt; / tr>& lt; tr>& lt; td>数据1、2 & lt; / td>& lt; td>数据2,2 & lt; / td>& lt; td>数据3、2 & lt; / td>& lt; td>数据4,2 & lt; / td>& lt; / tr>& lt; tr>& lt; td>数据1、3 & lt; / td>& lt; td>数据2、3 & lt; / td>& lt; td>数据3、3 & lt; / td>& lt; td>数据4、3 & lt; / td>& lt; / tr>& lt; / tbody>& lt; / table>
可分类的表
使用类sortable可以创建一个表，访问者可以在其中按任何列排序。在列标题中，可以使用类名sort-default来选择在页面加载后对表进行排序的列。如果不设置默认值，则表将按第一列排序。
还可以添加类名desc来颠倒初始排序列的顺序。
如果将数据-列类型设置为日期，脚本将尝试将列的内容解析为日期。（如果列的内容不是有效日期，它将默认返回字符串。）
不能同时使用可分类的和responsive-table同时上课。
| 排名 | 销售额(百万) | 专辑 | 艺术家 | 一年 |
|---|---|---|---|---|
| 1 | 47 | 惊悚片 | 迈克尔•杰克逊 | 1982 |
| 2 | 41 | 1971-1975年他们的代表作 | 老鹰乐队 | 1976 |
| 3 | 32 | 加州旅馆 | 老鹰乐队 | 1976 |
| 4 | 29 | 过来吧 | 仙妮亚·唐恩 | 1997 |
| 5 | 29 | 齐柏林4号 | 齐柏林飞艇乐队 | 1971 |
还可以使用data-column-type= " weekday "按工作日排序。
| 工作日 | 火狐体育 |
|---|---|
| 周一 | 烘肉卷 |
| 周二 | 鸡肉馅饼 |
| 周三 | 通心粉和奶酪 |
| 周四 | 猪排 |
| 星期五 | 披萨 |
代码示例
& lt;表类=“合适的”比;& lt; thead>& lt; tr>& lt; th类= " sort-default "祝辞Rank< / th>& lt; th>销售(百万)& lt; / th>& lt; th> Album< / th>& lt; th> Artist< / th>& lt; th data-column-type = "日期"祝辞Year< / th>& lt; / tr>& lt; / thead>& lt; tbody>& lt; tr>& lt; td> 1 & lt; / td>& lt; td> 47 & lt; / td>& lt; td> Thriller< / td>& lt; td>迈克尔Jackson< / td>& lt; td> 1982 & lt; / td>& lt; / tr>& lt; tr>& lt; td> 2 & lt; / td>& lt; td> 41 & lt; / td>他们最伟大的作品1971-1975<；/td>；& lt; td> Eagles< / td>& lt; td> 1976 & lt; / td>& lt; / tr>& lt; tr>& lt; td> 3 & lt; / td>& lt; td> 32 & lt; / td>& lt; td>酒店California< / td>& lt; td> Eagles< / td>& lt; td> 1976 & lt; / td>& lt; / tr>& lt; tr>& lt; td> 4 & lt; / td>& lt; td> 29日& lt; / td>加油！加油！ </td>；& lt; td>莎妮娅Twain< / td>& lt; td> 1997 & lt; / td>& lt; / tr>& lt; tr>& lt; td> 5 & lt; / td>& lt; td> 29日& lt; / td><td>；齐柏林飞艇IV<；/td>；& lt; td>领导Zeppelin< / td>& lt; td> 1971 & lt; / td>& lt; / tr>& lt; / tbody>& lt; / table>
& lt;表类=“合适的”比;& lt; thead>& lt; tr>& lt; th data-column-type =“工作日”祝辞Weekday< / th>& lt; th> Menu< / th>& lt; / tr>& lt; / thead>& lt; tbody>& lt; tr>& lt; td> Monday< / td>& lt; td> Meatloaf< / td>& lt; / tr>& lt; tr>& lt; td> Tuesday< / td><td>；鸡肉锅馅饼<；/td>；& lt; / tr>& lt; tr>& lt; td> Wednesday< / td>& lt; td>通心粉,amp;Cheese< / td>& lt; / tr>& lt; tr>& lt; td> Thursday< / td>Chops< & lt; td>猪肉;/ td>& lt; / tr>& lt; tr>& lt; td> Friday< / td>& lt; td> Pizza< / td>& lt; / tr>& lt; / tbody>& lt; / table>