Monday, 11 June, 2018 UTC
Summary
Data visualization is the key to better understand bulky or complicated information. There are many ways to visualize your data i.e. you can design cool infographics or create interactive charts ‐ it all depends on your data and how you want to present it.
However, my today’s post is solely on the subject of tables and some really useful resources to create different types of tables. Here are 35 tips, tools, scripts and plugins that can help you create a variety of tables to present your data. So, let’s get on to discussing each resource in detail.
Read Also: Embed CanIUse Tables Into Your Website with This Tool
Table jQuery Snippets
These handy snippets along with easy explanations help you develop interactive tables. For example, these snippets let you add rows dynamically, retrieve cells’ values, etc.
Styling Tables
A set of tips and tricks that help efficiently style your tables by improving their layout, typography, text alignment, and a lot more. Moreover, it also tells about adding colors and graphics and customizing captions along with other aspects of the table.
No More Tables
A snippet that helps you create mobile responsive tables that show each row separately on small screens. Also, you can change color, font and font size, etc. using CSS.
Scroll-able Table Body
This trick can make your table body scrollable – a feature found in most spreadsheet tools like Google Sheets. That means, you can fix the table header and the table body or content will scroll, as usual, making the table more visible than before.
Fixed Table Header
Another trick like above one, Fixed Table Header helps make a table with a fixed header and scrollable content. You can customize the table including colors and fonts, but this trick is not as detailed and explained as Scroll-able Table Body.
Pure CSS Table Highlight
A simple trick that lets you highlight a particular cell on hover – vertically as well as horizontally. Also, the final table is personalizable with custom colors and fonts. I find this trick is most helpful when you need to show numbers on the table.
TABLEIZER!
TABLEIZER! is an online tool that allows you to create plain tables in HTML using data from Excel, Google Sheets, or any other spreadsheet tool. You can also customize the final table using CSS, just like any other table in HTML.
HTML Table Generator
HTML Table Generator is a simple table generator that helps you create and customize almost every aspect of the table using on-screen options. What I like is you can create a table manually, upload a CSV file, or import data from a spreadsheet tool like Excel. You can also style the table by choosing a theme from its set of templates.
Quackit HTML Table Generator
Another online table generator that helps you create tables with a set of customizability options. The styling options include size, color, border, etc. However, the option to import data is missing, unlike the above table generator.
Rapid Tables HTML Table Generator
HTML Table Generator by Rapid Tables is yet another tool like the above two tool. It provides more customization options than the above tool, like size, border, color, alignment, and some more. However, like the above tool, it only supports creating the table manually and does not allow to import files or take data from a spreadsheet tool like Google Docs.
HTML Table Styler
A table customization tool, HTML Table Styler, lets you style your tables using on-screen options that generate CSS for your table in HTML. This tool, surprisingly, shows a live preview of the table, allowing you to test and try the styling options. Also, it offers themes for quick-styling a table, which you can customize as well.
Conversion Tools
Conversion Tools is a useful website for anyone dealing with tables and spreadsheets on a daily basis. It assists you to convert an HTML table to a CSV file, an Excel file to an HTML table, an Excel file to a CSV file, and do a lot more conversions.
HTML Table to Div Converter
An online converter tool, HTML Table to Div Converter lets you convert traditional tables to div tables, i.e., tables created using ‘div’ elements. All you need to do is to copy and paste a table on its page and press the convert button to generate a div table.
Handsontable
Handsontable is an innovative spreadsheet component for web apps that lets you quickly develop and offer spreadsheets in your apps. It offers a wide range of features like support for multiple frameworks, high performance with massive amount of data, necessary capabilities like searching, filtering, etc., allowing developers to build quickly.
Dynatable.js
An interactive table plugin, Dynatable.js uses HTML, jQuery, and JSON to create tables and other table-like structures. You can create tables directly from JSON and incorporate all essential functions like search, filter, record count, and pagination.
Bootstrap Table
Bootstrap Table is an extended version of the table offered with Bootstrap. It minimizes your time and effort in creating tables and provides a responsive design. It brings features like scrollable and fixed headers and functions like sort, pagination, etc.
List.js
List.js is a simple and powerful JavaScript plugin that lets you create lists and tables with flexibility and functional features like filter, search and sort, etc. I liked that it is built using vanilla JavaScript, so you do not require any third-party library.
jExcel
jExcel is a lightweight jQuery plugin that allows you to embed any spreadsheet compatible with Excel in your web page. The plugin assists in creating an Excel-like table, letting you move, resize, copy, paste, and do a lot more with sheet data.
DataTables
A super flexible plugin for jQuery, Data Tables lets you add advanced interaction controls to any HTML table. It helps you to add pagination, search feature, themes, etc. Also, it provides a large number of extensions to add more functionalities.
jQuery Bootgrid
jQuery Bootgrid is a sleek and intuitive plugin to create and manage grids like tables. It provides features like search, pagination, etc. along with customizable templates.
jQuery-Tabledit
jQuery-Tabledit is an online editor for Bootstrap compatible HTML tables that lets users edit data within the tables. You can provide buttons to switch between view and edit mode, include delete and restore buttons, and customize the tables using CSS.
jsGrid
jsGrid is a lightweight jQuery plugin that helps create and manage data grids. It supports various operations on grids such as filtering, paging, sorting, etc. It also lets you customize the table’s appearance and supports internationalization as well.
Smart Table
A robust library, Smart Table helps you transform any HTML table to a smarter one with options like filter, search, sort, etc. It is coupled with more features to help build a useful and professional-looking table or data grid with its plugins.
HighchartTable
HighchartTable auto-converts HTML tables into charts and graphs. It is ideal to represent project analytics and statistics in graphs along with numerical data in tables.
TableExport
TableExport is a simple library to export an HTML table to CSV, TXT, or Excel files. Using this library, you can build tables easily with the export-to-file feature.
Tabulator
Tabulator is a jQuery plugin for creating interactive tables from HTML table, JavaScript array, JSON, etc. It supports almost all standard table functions like search, sort, filter, etc. and offers many features such as themes, callbacks, and localization.
FancyGrid
A grid library, FancyGrid allows you to create beautiful tables along with charts and graphs. It supports lots of data sources including JSON, includes various functions like sort, search, etc., allows theming and modularization, and brings many more features.
KingTable
KingTable lets you build administrative tables with minimum coding. It comes with an remarkable amount of features including client- or server-side search, sort, filter, and more common functions. You can customize the look and feel of the table, add custom filters, and export the data to various formats like CSV, JSON, and Excel.
stacktable.js
A jQuery plugin for tables, stacktable.js lets you convert any wide-looking table to a 2-column key/value table. It is an ideal solution for displaying large tables on small screens like that of mobile devices. Also, you can stack rows or columns as needed.
Tabella.js
Tabella.js helps you build responsive tables with fixed headers and scrollable data – even horizontally to include lot many columns than usually possible. Moreover, you can include multiple tables on the same page and also create multi-purpose tables.
TablePress
TablePress is a fantastic plugin for WordPress that lets you create and embed tables into posts, pages, and text widgets using a shortcode. The tables are editable in a spreadsheet-like interface and can contain all types of data including formulas as well. You can also add features like search and sort and export data to various formats.
Data Tables Generator by Supsystic
Data Tables Generator helps in creating and managing tables directly from the admin panel using a frontend table editor. Surprisingly, you can also include charts and graphs in your tables along with captions, header, and footer. What I find more interesting is the tables are fully editable as well as exportable to CSV, Excel, or PDF formats.
Pricing Table by Supsystic
Another plugin by Supsystic, Pricing Table lets you create pricing tables without any hurdles. You can choose a template, edit the pricing content, and publish it on your WordPress. Also, the tables created using this plugin are responsive as well as elegant on all devices.
Read Also: 25 Creative Pricing Table Designs for Inspiration
Magic Liquidizer Responsive Table
A table plugin for WordPress, Magic Liquidizer Responsive Table transforms any ordinary table into a mobile responsive table. You can insert images, texts, etc. in your tables and show them as is on all devices – even those with small screens.
Copytables
Copytables is an extension for Google Chrome that allows copying tables from web pages. You can select table cells, rows, or columns on any web page, and copy them directly as rich text, tab-delimited CSV, or HTML to use them as required.
The post 35 Tools, Scripts and Plugins to Build Beautiful HTML Tables appeared first on Hongkiat.