CSV Into HTML Table
CSV files can be annoying to read. It's doable. Just not the easiest thing to do.
The PHP script that comes with this article puts the CSV file into an HTML table. Specify the location of the CSV file and click the button.
Pleasant. Doable. Easy.
The script itself is just copy and paste. No customization required.
Ready?
Here's the script.
<?php
/*
Quick CSV Display
Version 1.2
December 7, 2015
June 29, 2015 (Version 1.0)
July 27, 2015 (Version 1.1) Easier to provide CSV file location.
December 7, 2015 (Version 1.2) Check for file existence before determining size.
Will Bontrager Software LLC
https://www.willmaster.com/
Copyright 2015 Will Bontrager Software LLC
This software is provided "AS IS," without any warranty of any kind,
without even any implied warranty such as merchantability or fitness
for a particular purpose. Use of this software is subject to the
Website's Secret Software License Agreement.
https://www.willmaster.com/software/WebSitesSecret/WS_LicenseAgreement.html
*/
/* No customization required. */
$DisplayTable = isset($_POST['csv']) and strlen(trim($_POST['csv'])) ? true : false;
if( $DisplayTable )
{
$LocationOfCSVfile = trim($_POST['csv']);
if( preg_match('!^/!',$LocationOfCSVfile) ) { $LocationOfCSVfile = "{$_SERVER['DOCUMENT_ROOT']}$LocationOfCSVfile"; }
$FileSize = file_exists($LocationOfCSVfile) ? filesize($LocationOfCSVfile) : false;
$FirstLineIsHeader = isset($_POST['line1header']) ? true : false;
}
?><!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick CSV Display</title>
<style type="text/css">
html {
font-size:100%;
font-family: verdana,arial,sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
body {
font-size:1em;
color:#000000;
background-color:white;
margin-left:5px;
margin-right:5px;
-webkit-font-smoothing: antialiased;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
input[type="checkbox"] {
height:20px;
width:20px;
border:1px solid black;
margin:0 5px 0 0;
vertical-align:middle;
}
input[type="text"], input[type="submit"] {
width: 100%;
font-size:1em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
input[type="text"] {
border:1px solid black;
border-radius:3px;
padding:5px;
}
p, li, td { font-size:1em; line-height:120%; }
td { vertical-align:top;}
th { vertical-align:bottom; font-size:.8em; font-weight:bold; text-align:center; }
h1 { font-size:1.8em; line-height:100%; }
h2 { font-size:1.6em; }
h3 { font-size:1.4em; }
h4 { font-size:1.2em; }
h5 { font-size:1em; }
a { text-decoration:none; color:#1c5292; font-weight:bold; }
a, a img { border:none; outline:none; }
#content { display:table; margin:0 auto; }
.nowrap { white-space:nowrap; }
</style>
</head>
<body><div id="content">
<table style="margin:0 auto;"><tr><td style="vertical-align:middle;">
<a href="//www.willmaster.com/">
<img src="//www.willmaster.com/images/wmlogo_icon.gif" style="border:none; outline:none;">
</a>
</td><td style="vertical-align:middle;">
<h1 style="margin:0;">Quick CSV Display</h1>
</td></tr></table>
<div style="height:45px;"></div>
<?php if($DisplayTable): ?>
<?php if( ! $FileSize): ?>
<p><b>Sorry, but I'm unable to fine file <?php echo($_POST['csv']); ?>.</b></p>
<?php else: ?>
<table border="1" cellpadding="7" cellspacing="0" style="border-collapse:collapse;">
<?php
if( ($CSV = fopen($LocationOfCSVfile,'rb')) )
{
while( ($line=fgetcsv($CSV)) !== false )
{
if( $FirstLineIsHeader )
{
echo "\n<tr><th>", implode('</th><th>',$line), '</th></tr>';
$FirstLineIsHeader = false;
continue;
}
echo "\n<tr><td>", implode('</td><td>',$line), '</td></tr>';
}
}
else { echo "<tr><td><b>Unable to open file {$_POST['csv']} ($FileSize)($LocationOfCSVfile)</td></tr>"; }
?>
</table>
<p style="margin-top:45px;">
Display another?
</p>
<?php endif; ?>
<?php endif; ?>
<form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="<?php echo(htmlspecialchars($_SERVER['PHP_SELF'])); ?>">
<p>
Server location of CSV file to display.<br>
<input type="text" name="csv">
</p>
<p style="margin-left:25px; text-indent:-25px;">
<input type="checkbox" name="line1header" value="1">First line of CSV file contains the header.
</p>
<p>
<input type="submit" value="CSV to HTML Table">
</p>
</form>
</div>
<p style="margin-top:45px;">
Copyright 2015 <a href="//www.willmaster.com/"><span class="nowrap">Will Bontrager</span> <span class="nowrap">Software LLC</span></a>
</p>
</body>
</html>
Installing Quick CSV Display
-
Copy the code above and save it as a plain text file to your hard drive.
-
Name the script quickCSVdisplay.php or whatever name you prefer (needs .php file name extension).
-
Upload the script to your server.
Using Quick CSV Display
Type the URL of quickCSVdisplay.php into your browser's address bar.
Specify the location of the CSV file. Optionally, check the "First line of CSV file contains the header" checkbox.
Click the "CSV to HTML Table" button.
That's all :)
The CSV data is converted into an HTML table and displayed in your browser.
To read the file and convert it into an HTML table, the CSV file must be available on your server.
Adding Functionality
Custom functionality can be added to the Quick CSV Display software. Ideas include:
-
Have the option to grab the CSV from the internet with a regular http://... URL instead of specifying a file location on the server.
-
Have a multi-line text box in the control panel where the CSV file can be pasted in.
-
Have the option to upload the CSV file from computer or device for display in the HTML table.
-
Put the CSV file into an HTML table with a direct URL something like http://example.com/?testing.csv (instead of going through the control panel). The direct URL can be in PDFs, email, or in web page links.
-
Insert the CSV data HTML table into a web page, live, when the web page loads, always the latest CSV file.
-
Specify CSV file field separators other than comma (tab or vertical bar characters, as examples) and/or text delimiters other than quotation marks (apostrophe or tilde characters, as examples).
Use the contact page to inquire about developing the custom functionality you want.
(This article first appeared in Possibilities ezine.)
Will Bontrager
