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