table saved from indesign as an html doc . . .

Forum|Forum|11 months ago
February 7, 2025
2 replies
244 views

I am creating a multi-page table (in indesign) that has a lot of information in some of it's cells. If I expanded the rows to show everything the table would be very long. Not what I want. I would like a way to save it in a virtual format that when you clicked or hovered on the cell, the hidden text would show up in a popup. #1) Is that possible, and how? #2) If not, are there any applications I can export the indesign table to that I can do this?

I managed to save the table from indesign as an html file, but when I opened it in dreamweaver it didn't look like anything. When I uploaded the files as is I was able to see the table on my web page, but the hidden text was not visible, and it did not show up when hovered or clicked.

https://www.rahwayriver.org/seed_library_table/

BenPleysier

Community Expert

I took the liberty to show you a dynamic solution, in this case using an XML dataset.

The XML data file called "plant-library.xml"

<?xml version="1.0" encoding="UTF-8" ?>
<CATALOG>
  <PLANT>
    <CNAME>Big Bluestem, Turkyfoot</CNAME>
    <SNAME>Andropogon gerardii</SNAME>
    <DESCRIPTION>
      Big Bluestem is a warm season perennial bunchgrass. Its
    </DESCRIPTION>
    <LIGHT_WATER>Full sun, partial shade. Dry, moist</LIGHT_WATER>
    <SOIL>Loam, Organic, Clay/Slightly Acidic, Neutral</SOIL>
    <HEIGHT_WIDTH>4 - 8 ft tall. 2 - 3 ft wide</HEIGHT_WIDTH>
    <COLOR>Purple</COLOR>
    <BLOOM_TIME>Late Summer to Fall</BLOOM_TIME>
    <PLANT_TYPE>Grass</PLANT_TYPE>
    <WILDLIFE_VALUE>
      Seeds provide food for birds including Grasshopper
    </WILDLIFE_VALUE>
    <DEER_RESISTANCE>Some</DEER_RESISTANCE>
    <COLD_STRATIFICAITON>Not needed</COLD_STRATIFICAITON>
    <LIFESPAN>&gt;2 years</LIFESPAN>
    <AGGRESSIVE>Yes</AGGRESSIVE>
    <NATIVE_RANGE>AL, AR, AZ, CO, CT, DC, DE, FL, GA, IA, IL, IN</NATIVE_RANGE>
    <TIPS_RESORATION>NA</TIPS_RESORATION>
  </PLANT>
  <PLANT>
    <CNAME>Black Cohosh,Snakeroot, Bugbane</CNAME>
    <SNAME>Actaea racemosa,Cimicifuga racemosa</SNAME>
    <DESCRIPTION>The showy, fragrant, bottlebrush-shaped, white</DESCRIPTION>
    <LIGHT_WATER>Partial Shade, Shade Moist</LIGHT_WATER>
    <SOIL>Loam, Organic/Acidic, Slightly Acidic</SOIL>
    <HEIGHT_WIDTH>4 - 6 ft tall, 2 - 4 ft wide</HEIGHT_WIDTH>
    <COLOR>White</COLOR>
    <BLOOM_TIME>Late Spring to Early Summer, Summer</BLOOM_TIME>
    <PLANT_TYPE>Flower, Perennialherbaceous</PLANT_TYPE>
    <WILDLIFE_VALUE>
      Host plant for the Spring Azure, Holly Blue, and Appalachian
    </WILDLIFE_VALUE>
    <DEER_RESISTANCE>Some</DEER_RESISTANCE>
    <COLD_STRATIFICAITON>2 months</COLD_STRATIFICAITON>
    <LIFESPAN>&gt;10 years</LIFESPAN>
    <AGGRESSIVE>No</AGGRESSIVE>
    <NATIVE_RANGE>
      AL, AR, CT, DC, DE, GA, IA, IL, IN, KY, MA, MD, ME, MI
    </NATIVE_RANGE>
    <TIPS_RESORATION>NA</TIPS_RESORATION>
  </PLANT>
</CATALOG>

The HTML file

<!DOCTYPE html>
<html lang="en">

<head>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
</head>

<body>
    <div class="container mt-5">
        <h1 class="h5 text-center bg-primary text-light mb-0 pt-2 pb-2">Rahway River Watershed Association Native Seed Library2025</h1>
        <p>Click on a PLANT to display album information.</p>
        <div class="row">
            <div class="col">
                <div class="table-responsive">
                    <table id="demo" class="table  table-striped table-sm"></table>
                </div>
            </div>
            <div class="col">
                <p id="showPLANT"></p>
            </div>
        </div>
    </div>

    <script>
        const xhttp = new XMLHttpRequest();
        let plant;
        xhttp.onload = function() {
        const xmlDoc = xhttp.responseXML; 
        plant = xmlDoc.getElementsByTagName("PLANT");
        loadPLANT();
        }
        xhttp.open("GET", "plant-library.xml");
        xhttp.send();

        function loadPLANT() {
        let table="<tr><th>Common Name</th><th>Scientific Name</th></tr>";
        for (let i = 0; i < plant.length; i++) { 
            table += "<tr onclick='displayPLANT(" + i + ")'><td>";
            table += plant[i].getElementsByTagName("CNAME")[0].childNodes[0].nodeValue;
            table += "</td><td>";
            table += plant[i].getElementsByTagName("SNAME")[0].childNodes[0].nodeValue;
            table += "</td></tr>";
        }
        document.getElementById("demo").innerHTML = table;
        }

        function displayPLANT(i) {
        document.getElementById("showPLANT").innerHTML =
        "COMMON NAME: " +
        plant[i].getElementsByTagName("CNAME")[0].childNodes[0].nodeValue +
        "<br>SCIENTIFIC NAME: " +
        plant[i].getElementsByTagName("SNAME")[0].childNodes[0].nodeValue +
        "<br>DESCRIPTION: " + 
        plant[i].getElementsByTagName("DESCRIPTION")[0].childNodes[0].nodeValue +
        "<br>LIGHT & WATER REQUIREMENT: " + 
        plant[i].getElementsByTagName("LIGHT_WATER")[0].childNodes[0].nodeValue +
        "<br>SOIL REQUIREMENT: " + 
        plant[i].getElementsByTagName("SOIL")[0].childNodes[0].nodeValue +
        "<br>HEIGHT & WIDTH: " + 
        plant[i].getElementsByTagName("HEIGHT_WIDTH")[0].childNodes[0].nodeValue +
        "<br>COLOR: " + 
        plant[i].getElementsByTagName("COLOR")[0].childNodes[0].nodeValue +
        "<br>BLOOM TIME: " + 
        plant[i].getElementsByTagName("BLOOM_TIME")[0].childNodes[0].nodeValue +
        "<br>PLANT TYPE: " + 
        plant[i].getElementsByTagName("PLANT_TYPE")[0].childNodes[0].nodeValue +
        "<br>WILDLIFE VALUE: " + 
        plant[i].getElementsByTagName("WILDLIFE_VALUE")[0].childNodes[0].nodeValue +
        "<br>DEER RESISTANCE: " + 
        plant[i].getElementsByTagName("DEER_RESISTANCE")[0].childNodes[0].nodeValue +
        "<br>COLD STRATIFICAITON: " + 
        plant[i].getElementsByTagName("COLD_STRATIFICAITON")[0].childNodes[0].nodeValue +
        "<br>LIFESPAN: " + 
        plant[i].getElementsByTagName("LIFESPAN")[0].childNodes[0].nodeValue +
        "<br>AGGRESSIVE: " + 
        plant[i].getElementsByTagName("AGGRESSIVE")[0].childNodes[0].nodeValue +
        "<br>NATIVE RANGE: " + 
        plant[i].getElementsByTagName("NATIVE_RANGE")[0].childNodes[0].nodeValue +
        "<br>MAINTENANCE / GARDENING TIPS / HABITAT RESORATION: " + 
        plant[i].getElementsByTagName("TIPS_RESORATION")[0].childNodes[0].nodeValue;
        }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

</html>

All that is required from here on, is adding to the XML file, no further coding of the HTML page is required.

See this video for the result

This is a quick mockup, will need more styling. Using DMXZone extensions for Dreamweaver or, better still, using Wappler, the process of styling and maintenance will be made a lot easier. Please let me know if Wappler is of interest to you and I will guide you through it.

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

S

SnakePitAuthor

Known Participant

Thank you! Let me play aroud with this and see what I can do.

Nancy OShea

Community Expert

but the hidden text was not visible, and it did not show up when hovered or clicked.
By @SnakePit

============

Not surprising given that you used InDesign which is print publishing software; not dedicated web authoring or spreadsheet software.

What you have here is a pig-in-a-poke -- all style but no structure or substance. While it may look like a data table, it's not. This is just a boat load of <div> tags containing absolutely positioned paragraphs. 😝

Also, not sure where the "hidden text" is. I see no signs of any.

What's your end goal with this? What will your data be used for and how will it be presented & utilized?

My first instinct would be to put the data into an Excel spreadsheet or dedicated database that can be searched, sorted & filtered as needed.

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded