表的Web开发工具

Tables of all kinds have a degree of notoriety in web development: they can be fiddly to setup and manage, difficult to make accessible or responsive unless you know how, resistant to data wrangling, and tricky to get looking right. Thankfully, there are several tools that can make a web developer’s time with tables considerably easier:

各种各样的表在Web开发中都有一定程度的恶名：除非您知道如何设置和管理它们，否则很难进行访问或响应，除非您知道如何使用它们，否则将难以处理数据，并且很难正确查找 。 值得庆幸的是，有几种工具可以使Web开发人员使用表的时间变得更加轻松：

导入表格 (Importing Tables)

If you’re dealing with simple static tables, especially ones produced in Microsoft Excel or Word, you should be aware that IDEs like Adobe DreamWeaver have powerful techniques for converting that data into useful HTML: simply copy the original table and paste it into the web development tool’s Design mode. You’ll probably have to do a little cleanup of the code, but that’s usually an easy find-and-replace routine.

如果要处理简单的静态表，尤其是用Microsoft Excel或Word生成的静态表，则应注意，像Adobe DreamWeaver这样的IDE具有将数据转换为有用的HTML的强大技术：只需复制原始表并将其粘贴到Web中即可。开发工具的设计模式。 您可能需要对代码进行一些清理，但这通常是一个简单的查找和替换例程。

Don’t have DreamWeaver, but still need to deal with tables from Microsoft products? Word2CleanHTML is free on the web, and does the same job; Mr Data Converter can take Excel or CSV files and convert them into a multitude of formats.

没有DreamWeaver，但仍然需要处理Microsoft产品中的表？ Word2CleanHTML在网络上是免费的，并且执行相同的工作。 数据转换器先生可以将Excel或CSV文件转换为多种格式。

You can also use Google Spreadsheets to scrape and import tables or lists from a web page at any URL. To do so, start a new spreadsheet and enter the following expression in the cell in the top left corner:

您还可以使用Google Spreadsheets从任意网址的网页中抓取和导入表格或列表。 为此，请启动一个新的电子表格，并在左上角的单元格中输入以下表达式：

=ImportHtml("URL", "table", num)

Where:

哪里：

• URL is the URL of the page, placed between quotation marks

  URL是页面的URL，置于引号之间

• table is the element to look for: you could use "table", "ol" or "ul".

  table是要查找的元素：您可以使用"table" ， "ol"或"ul" 。

• num is the order of appearence of the table on the page: 0 for the first table, 1 for the second, and so on.

  num是表在页面上的出现顺序：第一个表为0 ，第二个表为1 ，依此类推。

建立表格 (Creating Tables)

IDEs often have generation tools for creating tables from scratch, but not always. Tablesgenerator.com has an array of free tools to generate tables of all kinds, including HTML markup. It also has options to style the result with CSS, although I’m not a particular fan of the way it does so: I find the code fairly verbose and redundant. Instead, I would humbly suggest using one of my CSS table patterns.

IDE通常具有用于从头开始创建表的生成工具，但并非总是如此。 Tablesgenerator.com提供了一系列免费工具，可以生成各种表，包括HTML标记 。 它也可以使用CSS设置结果样式，尽管我并不特别喜欢这样做：我发现代码相当冗长和多余。 相反，我会谦虚地建议使用我的CSS表格模式之一 。

用数据填充表 (Filling Tables With Data)

In some cases you’ll know you need a table, but don’t yet have the data to fill it, requiring the equivalent of Lorem ipsum for tables. generatedata.com can fulfill this role, as can the new Marvel API, through the wonderful Marvel Ipsum.

在某些情况下，您会知道需要一个表，但还没有足够的数据来填充它，因此需要等效于Lorem ipsum的表。 generateata.com可以通过出色的Marvel Ipsum像新的Marvel API一样履行这一职责。

Another option is the excellent mockaroo, which offers up to 100,000 generated rows of test data in CSV, TXT, SQL and JSON.

另一个选择是出色的模拟程序 ，它可以提供多达100,000条以CSV，TXT，SQL和JSON生成的测试数据行。

排序表 (Sorting Tables)

A table with anything more than a few rows of data will likely benefit from an interface that includes sorting and filtering functions. Traditionally this has been done with PHP and MySQL, and increasingly with AJAX techniques. But for many tables, this is overkill.

包含多于几行数据的表可能会受益于包含排序和过滤功能的接口。 传统上，这是使用PHP和MySQL完成的 ，并且越来越多地使用AJAX技术。 但是对于许多桌子来说，这太过分了。

My go-to plugin for sorting table data is Tablesorter, a JQuery plugin; the larger and far more ambitious datatables plugin is also a popular choice.

我的用于对表数据进行排序的插件是Tablesorter ，它是一个JQuery插件； 更大更宏大的datatables插件也是一个流行的选择。

控制台表 (console.table)

While it’s a slight departure from what I’ve discussed so far, it’s worthwhile to note that tables, in the form of JavaScript objects and arrays can also be dealt with in your browser’s console, via the console.table function.

尽管与到目前为止的讨论略有不同，但值得注意的是，还可以通过console.table函数在浏览器的控制台中处理JavaScript对象和数组形式的表。

Let’s say we have a JavaScript array of superheroes:

假设我们有一个JavaScript超级英雄数组：

var superheroes = [ { firstname: "Steve", lastname: "Rogers", alias: "Captain America" }, { firstname: "Daniel", lastname: "Rand-K'ai", alias: "Iron Fist"}, { firstname: "Matt", lastname: "Murdock", alias: "Daredevil"} ];

That’s difficult to read. But in the console, we can type:

那很难看。 但是在控制台中，我们可以输入：

console.table(superheroes)

The result:

结果：

You’ll find that the result can be sorted and ordered in whatever way you please. As any document object is also an array, you can do the same thing for any element:

您会发现可以按照您希望的任何方式对结果进行排序和排序。 由于任何文档对象也是数组，因此您可以对任何元素执行相同的操作：

console.table(document.body,["lastElement"])

翻译自: https://thenewcode.com/870/Web-Development-Tools-For-Tables