How to import CSV to HTML

By Panayiotis Georgiou Last updated 08/12/2020

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:

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>

You now have to use the div attributes to display the cs file to html website

How to Fix GitHub Error – WARNING: REMOTE HOST…

Where is my PostgreSQL logs?

HTTP requests from developer tools to Postman

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.

How to import CSV to HTML

Share: