Generating static HTML code with csv as source

Report · Apr 09, 2025

Hello, I regularly receive information via Excel, which I then copy into a static html page. Table cell by table cell. I wonder if this can be automated. Unfortunately, the standard csv import does not help me because the information is not displayed as a table in the HTML. The csv contains information for image names (i.e. embedding an img in the scr), a link and a line of text.

I would therefore have to generate the following code for each line. Do any of you have an idea how I can do this?

The CSV:

TXT;IMG;URL

The HTML:

<div>

</div>

</a>

Report · Apr 10, 2025

Hopefully, this will help:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSV to HTML Table</title>
</head>
<body>
    <input type="file" id="csvFile" accept=".csv">
    <button onclick="convertCSVToHTML()">Convert</button>
    <div id="output"></div>

    <script>
        function convertCSVToHTML() {
            const fileInput = document.getElementById('csvFile');
            const output = document.getElementById('output');

            if (fileInput.files.length === 0) {
                alert('Please select a CSV file first.');
                return;
            }

            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                const text = e.target.result;
                const rows = text.split('\n');
                let html = '<table border="1">';

                rows.forEach(row => {
                    const cells = row.split(',');
                    html += '<tr>';
                    cells.forEach(cell => {
                        html += `<td>${cell.trim()}</td>`;
                    });
                    html += '</tr>';
                });

                html += '</table>';
                output.innerHTML = html;
            };

            reader.readAsText(file);
        }
    </script>
</body>
</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Apr 10, 2025

This example uses the PHP server function fgetcsv to open a data_file.csv and parse its contents into HTML <div> and <p> tags.

To get more precision, you'd need an actual database with named fields $text, $image, $URL to target. Databases are much more flexible to work with than plain text files. Do a Google search for CSV to SQL.

CSV2PHP.php

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSV to PHP</title>
</head>

<body>
<?php
$filename = 'data_file.csv';
$data = [];

// open the file
$f = fopen( $filename, 'r' );

if ( $f === false ) {
  die( 'Cannot open the file ' . $filename );
}

// read each line in CSV file at a time
while ( ( $row = fgetcsv( $f ) ) !== false ) {
  $data[] = $row;
}

// close the file
fclose( $f );
echo "<div style='padding:2%'>";
foreach ( $data as $row ) {
  echo "<p style='border-bottom:1px dotted'>";
  foreach ( $row as $val ) {
    echo "$val<br>";
  }
  echo "</p>";
}
echo "</div>";
?>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Generating static HTML code with csv as source

Photos