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)





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

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.