TML 表格实例:

在线实例

表格

这个例子演示如何在 HTML 文档中创建表格。

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在浏览器显示如下：:

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在浏览器显示如下：

更多实例

没有边框的表格

本例演示一个没有边框的表格。

表格中的表头(Heading)

本例演示如何显示表格表头。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何显示在不同的元素内显示元素。

单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用 Cell spacing 增加单元格之间的距离。

HTML 表格标签

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

绍

我们都知道普通的HTML自带的功能相对有限，很多复杂的交互式场景，如果手动去写功能的话会非常的复杂，而且可扩展性差，就拿HTML表格来说，对于初学者或者对于复杂的拖拽式交互编程不熟悉的话会很浪费时间，因此今天就介绍一个第三方的插件——Table-draagger，来轻松实现类似的功能。Table-draagger是用于构建可重排序的拖放表的极简主义纯Javascript库！

Github

https://github.com/sindu12jun/table-dragger

特征

Table-draagger因为其以下几个特征而让拖拽和排序的实现变得如此简单：

• 非常容易配置
• 能够同时对列或行进行排序
• 排序时动画流畅
• 没有臃肿的依赖
• 提供触摸事件（意味着在触摸设备可以实现一些你想要的功能）

安装使用

• 安装

可以在npm上获得它：

npm install table-dragger --save

或者引用压缩的js文件

<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>

或者尝试开发中的不稳定版本

npm install table-dragger@next --save

• 快速入门

请看以下代码：

import tableDragger from 'table-dragger'
tableDragger(el, options?)

<table id="table">
<thead>
<tr>
<th class='handle'>header1</th>
<th class='handle'>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>conten1</td>
<td>conten2</td>
</tr>
</tbody>
</table>

var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});

你可以在不设置任何参数的情况下使用默认的拖拽和排序方式，当然以下是你可以配置的选项：

• options.mode

1、将mode设置为column，用户拖动和排序表的列

2、将mode设置为row，用户拖动并排序表的行

3、设置mode为free，用户根据点击后鼠标移动的方向拖动行或列。注意，必须在自由模式下指定dragHandler。

• options.dragHandler

dragHandler是表中的拖动句柄选择器默认情况下，在列模式下，dragHandler是表的第一行；在行模式下，则是第一列。

• options.onlyBody

在行模式下将onlyBody设置为true时，用户只能在tbody中提升行。

• API

下面是返回对象的API

tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
.on('drag', () => {
console.log('drag');
})
.on('drop', (from, to, el, mode) => {
console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('shadowMove', (from, to, el, mode) => {
console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('out', (el, mode) => {
console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
});

总结

Table-draagger为我们节省了很多手动封装表格排序和拖拽功能的时间，当然目前很多第三方框架已经实现了类似的功能，这更适用于原生的html表格，你还可以通过一些手段记忆用户拖拽，这只是其中一种思路，Enjoy it！~

篇文章介绍了div标签的作用，我们这篇文章主要来看下过气表格标签table的语法与使用。

1）table的曾经

在div没有出现之前，table曾是做网页的中坚力量。记得在开始学网页的时候，div是神马，我不造呀！做网页还用div吗，就只用table就可以了，各种表格嵌套加嵌套，一个网页就拼凑出来了。但table写的布局页面做维护就比较令人头痛欲裂了。因为table是一层一层嵌套，标签量冗余过多。所以修改起来就是动一发而牵全身。维护起来格外麻烦，往往是拆东墙补西墙。所以它后来就慢慢被div所替代。但是在数据列表上还是用table形式来写比较的合理，所以现在table多用于网站后台的表格数据处理中。

2）表格标签table使用

简单的表格由table元素以及一个或多个tr（行标签）、th（表头单元格标签）、td（普通单元格标签）等标签所组成，当然复杂的表格还包括caption（表格标题）、col(定义列)、colgroup(对表格中的列进行组合)、thead（组合表头的内容）tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)等这里我们先简单了解下即可。

定义表格：<table></table>

创建表行：<tr></tr>

创建列(单元格):<th></th>（表头）、<td></td>（表格单元）

注意：默认情况下，每行中的列数是统一的。

比如我们想创建一个姓名、年龄、分数和日期的数据表格，并设置border为1，我们可以使用table来制作。具体的表格代码如下图所示：

在网页中呈现的效果就如下图所示：

3）为表格添加简单样式

这时候有的人就会说了，为什么这个表格看起来这么奇怪，边框都是有空隙的呢？我们只需要给表格添加一些特殊的样式，即可制作一个比较漂亮好看的表格了。添加的样式代码：

在网页中呈现的效果就如下图所示：

现在我们的表格是不是看着比较的清新了，上面的css代码中为表格添加了背景、边框以及去掉了粗的边线。具体的css代码我们会在以后的课程中为大家介绍，大家在这里只需要知道并了解table标签的作用以及使用就可以了。没事可以多用table写一写表格，熟能生巧。

附赠一句经典语录：每天早上，你有两个简单的选择：是睡回笼觉，还是起身追逐 梦想 。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。