How to Create Bulma Tables

bulma table border

Creating HTML tables with style by using Bulma CSS framework is pretty simple. Not only you may use the built-in table classes for a table with basic style, stripped table, hovering effect, etc. but you may also use the Sass variables for allowing easy customization like table coloring, table background color, header background color, and … Read more

AngularJS / AngularJS 2 Data Table solutions with Demos

angular data tables

The Angular data table solutions In this post, I am going to share a few data table solutions for AngularJS or AngularJS 2+ versions. The data table features include pagination, searching, sorting, etc. The Angular-PagingTable directive The Angular-PagingTable is a simple and easy-to-use solution for AjngularJS projects that enables creating the data tables with pagination. … Read more

How to Style Table Rows Differently by CSS nth-child Selector?

css nth child

Styling alternate HTML table rows differently You may use the CSS nth-child selector for styling alternate table rows differently. Not only you may style alternative rows but also specify a different style for rows with the given number. For example, styling every 3rd or 4th row is different from the other rows. See the examples below … Read more

Create Bootstrap responsive tables by jQuery plug-in

Bootstrap responsive table custom

The jQuery plug-in for responsive tables As using the HTML tables in your web pages, this becomes important to make it responsive so it adjusts to the smaller screens of mobiles so users may go through it easily. In this tutorial, a jQuery plug-in is used for creating Bootstrap-based tables that are responsive. In the … Read more

jQuery Plug-in for Calculation of CSV Data by AJAX: in Table and XML

jQuery table CSS

Performing calculations in HTML table by jQuery plug-in In this tutorial, a jQuery plug-in is used that loads a CSV file by using the AJAX call. The data is loaded in an HTML table where id, name, price, amount, and sum columns are displayed. The amount field can be changed by the user while the … Read more

6 Demos of Bootstrap [3,4,5] Data Tables with Paging, Rows per view and more

Bootstrap data table odd even

The data tables and Bootstrap In the table tutorial of Bootstrap, I showed how you can create simple tables by using Bootstrap built-in classes. In this tutorial, a plug-in is used for creating data tables that have useful features like pagination, sorting, search, etc. Features A user may select how many rows to display at … Read more

An HTML Table Plug-in for Bootstrap: with Sorting, Pagination, Checkbox etc.

Bootstrap table radio

The table in Bootstrap In Bootstrap table tutorial, I showed how you may create simple tables by using built-in classes in Bootstrap framework’s CSS. The demos included using the striped rows, hover state, coloring the rows by using classes like .success and others, and using the custom colors while using Bootstrap classes as well. However, … Read more

AJAX post method of jQuery to Load Data in HTML div and table example

jQuery post HTML table

Purpose of jQuery $.post method The $.post method is a shorthand of $.ajax method which is used to load data by an HTTP request. The $.post method is simpler to use where the data source is specified as follows: $.post( url [, data_to_send ] [, success ] [, dataType ] ) In the url parameter, … Read more