A blog for technology, SEO tips, website development and open source programming.

How to import CSV to HTML

21,946

CSV (comma-separated values) stores tabular data (numbers and text) in plain-text form. Plain text means that the file is a sequence of characters, with no data that has to be interpreted instead, as binary numbers. A CSV file consists of any number of records, separated by line breaks of some kind; each record consists of fields, separated by some other character or string, most commonly a literal TAB or comma. Usually, all records have an identical sequence of fields.How to import csv to HTML file? (You can download the example below)





[alert type=white ]
Don’t miss out ..
What is the difference between csv and xls formats?
Import csv data to table with PHP

[/alert]

Steps:

  1. Put the below lines into the <head> section of an html file   
    <link rel="stylesheet" type="text/css" href="csvtable.css" title="style" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.csvToTable.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.dev.js"></script>
    <script>
        $(function() {
            $.get('example.csv', function(data) {
                $('#CSVSource').html('<pre>' + data + '</pre>');
            });
            $('#CSVTable').CSVToTable('example.csv', { loadingImage: 'images/loading.gif', startLine: 0 });
            $.get('test.tsv', function(data) {
                $('#TSVSource').html('<pre>' + data + '</pre>');
            });
            $('#TSVTable').CSVToTable('test.tsv', { loadingText: 'Loading TSV Data...', loadingImage: 'images/loading.gif', startLine: 0, separator: "t" });
            $('#CSVTable2').CSVToTable('example.csv', { loadingImage: 'images/loading.gif', startLine: 1, headers: ['Album Title', 'Artist Name', 'Price ($USD)'] }).bind("loadComplete",function() { 
                $('#CSVTable2').find('TABLE').tablesorter();
            });;
        });
        </script>
  2. You now have to use the div attributes to display the cs file to html website

Show the original csv fileand then into html table

<div id="CSVSource">
</div>
<div id="CSVTable">
</div> 

You can download the zip for the example

Download Example

That’s it for now.

If you liked this article, then please subscribe to my YouTube Channel for video tutorials.

You can also find me on Twitter and Facebook.

2 Comments
  1. […] How to import CSV to HTML […]

  2. […] How to import CSV to HTML […]

Comments are closed, but trackbacks and pingbacks are open.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More