Displaying Data: HTML Tables
The language of the web, HTML, was originally conceived in 1980 (although not fully developed until 1990) as a document markup language, as its name states. One of the critical elements that need to be displayed in documents, of course, is tabular data. A core element of HTML is the table. Tables allow the user to easily specify rows and columns and makes sure that all the data lines up and is easy to view and understand. Tables allow basic control like alignment, cell color, padding, borders, etc. — enough to create a basic table. If you just want to display a simple, small table, then HTML tables are probably enough for you.
Figure 1: Basic HTML table
Making the Tables Pretty: Bootstrap Tables
Tables are useful, but not particularly interesting. One way to make an HTML table more useful and visually appealing is to use Bootstrap table additions. These allow the user to add a variety of graphical items to the table by specifying alternate striping, hover behavior, enhanced colors, more complex borders, etc. This makes the tables easier to view and more attractive, but they are still just basically dressed-up tables. Still, if you are using simple tables, then the Bootstrap table features are an easy way to enhance the look and feel of your data that is displayed in a table.
Figure 2: Bootstrap-styled table
Tables vs. Grids
One point of terminology that should be mentioned is that the terms grid and table are sometimes used interchangeably but are also often used to describe similar yet different things. A Bootstrap grid, for example, is used mostly for page element layouts. A Bootstrap grid can be used to display tabular data but has many limitations. These include its limitation of 12 columns, as well as its responsive handling of columns which is great for graphic elements and text blocks but not so helpful for table data. The Bootstrap table support is geared more at the display of tabular data than the Bootstrap grid. However, the most recent components aimed at displaying tabular data are generally called grids and not tables.
Turbocharging the Web-jQuery
With the rise of online apps implemented as single web pages, the need for more advanced data functionality grew. Grids (or Tables) made a quantum leap and now became available with features that compared to stand-alone spreadsheet tools like Excel. Users were familiar with the features available on Excel and other tools for the grouping, sorting, and organizing of data tables and they expected them to be available in the new web-based apps as well. UI components like the Grid component from the Kendo UI library delivered on these features and gave users a rich assortment of data manipulation features. These include functions like grouping, sorting, advanced data binding, exporting to popular formats like PDF and Excel, editing, and many many more.
Figure 3: Kendo UI Grid, sorting
In the example above (Figure 3) we see that the column Quantity has been sorted ascending, which we can tell from the data itself and also by the up arrow next to the Quantity header. In the example below (Figure 4), we see a filter form that has been opened by clicking on the funnel icon in the Item column. This dialog lets us define one or two filters of different types (equal, not equal, begins with, ends with, etc.) and then define a Boolean relationship (and, or) between the two. Once applied, this will filter the data that is displayed. There are many other advanced features available, and this is just an example of two of them.
Figure 4: Kendo UI Grid, filtering
As the use of the web proliferated, the options for data display evolved from basic document markup to interactive tools. The most popular format for data display is in tabular format. Basic table features are included in HTML, with enhancements added by libraries such as Bootstrap. But as new tools took advantage of libraries like jQuery, a whole new class of Table, or Grid, became available with UI components like the Grid from the Kendo UI library.
Not everyone is developing complex web-based apps, and for people who are really just displaying static information with small tables, basic HTML tables are fine, especially when dressed up by Bootstrap or other table features. For users that do need to provide users with a way of viewing and manipulating tabular data, modern grids are an easy way to drop in advanced functionality and eliminate the distinction between native apps and web-based apps.