dcsimg
www.webdeveloper.com
Page 1 of 8 123 ... LastLast
Results 1 to 15 of 108

Thread: Flow a list into a table

  1. #1
    Join Date
    Dec 2015
    Posts
    53

    Question Flow a list into a table

    I admit to being an amateur. I have written several web sites but am only into HTML and pre-formatted scripts. Please bear with me as I believe a thorough explanation of my problem is the best way to go from the beginning. This MUST be a problem shared by other sites but I have searched and searched and cannot find a solution without getting horribly technical.

    The largest site I have written, and the one that takes up most of my 'spare' time is www.minibottlelibrary.com This site has been hand coded over a number of years. There are three large index files (2300, 3700 & 9400 lines) which get bigger on a weeky basis. These each contain clickable company names aranged in tables 6 columns accross and divided up into sections (these can be 100's of lines themselves). An example (from index-a.html) is:
    <tr>
    <td><a href ="larsen/index.html"><center><font size="2"><b>Larsen</b></font></center></a></td>
    <td><a href ="larson-bros/index.html"><center><font size="2"><b>Larson Bros.</b></font></center></a></td>
    <td><a href ="l-artigiana/index.html"><center><font size="2"><b>L'Artigiana</b></font></center></a></td>
    <td><a href ="artistica-artigiana/index.html"><center><font size="2"><b>L'Artistica - see Artistica Artigiana</b></font></center></a></td>
    <td><a href ="lactyma/index.html"><center><font size="2"><b>Lactyma</b></font></center></a></td>
    <td><a href ="campeny/index.html"><center><font size="2"><b>Las Palmas FC - see Campeny</b></font></center></a></td>
    </tr>
    <tr>
    <td><a href ="pointers/index.html"><center><font size="2"><b>Las Palmas FC - see also Pointers</b></font></center></a></td>
    <td><a href ="las-trancas/index.html"><center><font size="2"><b>Las Trancas</b></font></center></a></td>
    <td><a href ="las-varitas/index.html"><center><font size="2"><b>Las Varitas</b></font></center></a></td>
    <td><a href ="las-ventanas/index.html"><center><font size="2"><b>Las Ventanas</b></font></center></a></td>
    <td><a href ="lassauvajeu/index.html"><center><font size="2"><b>Lassauvajeu</b></font></center></a></td>
    <td><a href ="lasska/index.html"><center><font size="2"><b>Lasska</b></font></center></a></td>
    </tr>

    As you can see, if I add a line, I have to move everything else down a line. I help myself a bit by leaving a blank space at the end of every second row but these get filled and then it is a massive job to re-set the indexes. These tables are not dynamic, ie. the data in them is always the same data in the same order.

    Is there any way I can make the data (from a text/html/excel etc. file) flow into tables 6 columns wide by a variable number of rows?

    I have no problem starting these files from scratch as, if this can be done, it would save me a massive amount of time in the long term.

    Any help GREATLY appreciated.

    David (minizv)

  2. #2
    Join Date
    Dec 2012
    Posts
    498
    Is there any way I can make the data (from a text/html/excel etc. file) flow into tables 6 columns wide by a variable number of rows?
    I didn't analyze your HTML completely but I think this would be quite easy when you evaluate a txt file by PHP. The syntax of this txt file might be:
    • plain text or
    • CSV format or
    • the definition of an array in PHP syntax

    Make yourself familiar with PHP and it should be quite easy. It would be also possible to create an initional version of this text from your HTML by using PHP or Javascript.
    PS: If you do not want to dive into PHP I would be willing to write the code for you, as it's an interesting task. Preconditioned this is a non-profit site.
    Last edited by Sempervivum; 12-31-2015 at 12:08 PM.

  3. #3
    Join Date
    Dec 2015
    Posts
    53
    Thanks Sempervivum your reply is appreciated but please read my first sentence. I have never done any scripting (other than use pre-formed scripts) and struggle even with CSS (although I get there eventually)

  4. #4
    Join Date
    Dec 2012
    Posts
    498
    Read my PS, I edited my posting.

  5. #5
    Join Date
    Dec 2015
    Posts
    53
    Hi again Sempervivum. Your offer is VERY much appreciated. Yes the site is non-commercial (although someone did once send me $5!). I instigated and act as coordinator for this site - which means I do most of the work, totally unpaid, and pay for hosting etc. Other collectors send photos or links to photos for us to use and occasionally another collector helps out in other ways (an Australian collector is currently sorting 60,000+ Scotch photos).
    David

  6. #6
    Join Date
    Dec 2012
    Posts
    498
    I've converted your tables into a txt file, it looks like this:
    Code:
    1a.gif
    1a.gif
    1-africa-industries/index.html;1 Africa Industries
    3-amigos/index.html;3 Amigos
    3m/index.html;3/M Whiskey
    3r-international/index.html;3R International
    siete-leguas/index.html;7 Leguas - see Siete Leguas
    frexias/index.html;8 Hermanos - see Frexias
    radico-khaitan/index.html;8pm - see Radico Khaitan
    10cane/index.html;10 Cane
    47-south/index.html;47 South
    100-anos/index.html;100 AƱos
    200-cup/index.html;200 Cup
    360/index.html;360
    edvag-group/index.html;365 - see Edvag Group
    schuetz-renziehausen/index.html;427 Whiskey - see Schuetz Renziehausen
    destilerias-castilla/index.html;808 - see Destilerias Castilla
    jose-cuervo/index.html;1800 - see Jose Cuervo
    1921/index.html;1921
    a.gif
    a.gif
    a-and-g/index.html;A & G
    aalborg/index.html;Aalborg
    macintyre/index.html;A Wee Deoch an Doruis - see A. Macintyre & Sons
    pickford/index.html;A Wee Deoch an Doruis - see also W.D. Pickford
    b.gif
    b.gif
    mega-foods-and-beverages-international/index.html;B-52 - see Mega Foods & Beverages International
    b-and-b-dean-de-luigne/index.html;B and B Dean de Luigne
    b-and-b-high-grade-liquors/index.html;B & B High Grade Liquors
    b-and-h/index.html;B & H
    b-and-t/index.html;B & T
    You can download the complete file from here, it was too large for posting:
    http://ulrichbangert.de/div/webdesign/php/data.txt
    Don't change the file name, the PHP script relies on it.
    On the left of the ";" is the url and on the right the link text.
    There should be no ";" in the link text. If this is not possible we should change the separator.

    This is the PHP:
    PHP Code:
    <?php
        $data 
    file("data.txt");
        
    $alfabeticalheader file_get_contents("alfabeticalheader.html");
        
    $countertd 0;
        
    $countergif 0;
        foreach (
    $data as $line) {
            
    $line2 explode(";"$line);
            if (
    count($line2) == 1) {
                if (
    $countergif == 0) {
                    echo 
    '</table>'"\n";
                    echo 
    $alfabeticalheader;
                    echo 
    '<table width="1120" border="2" bordercolor="#663366" cellspacing="2" cellpadding="2">' "\n";
                }
                echo 
    '<tr><td><img src="' $line2[0] . '"</tr></td>' "\n";
                
    $countergif++;
                if (
    $countergif == 2) {
                    echo 
    "</table>\n";
                    echo 
    '<table width="1120" border="2" bordercolor="#663366" cellspacing="2" cellpadding="2">' "\n";
                }
                
    $countertd 0
                
            } else {
                if (
    $countertd == 0) {
                    echo 
    '<tr>';
                    
    $countertd++;            
                }
                echo 
    '    <td><a href="' $line2[0] . '"><center><font size="2">' $line2[1] . '</font></center></a></td>' "\n";
                if (
    $countertd == 6) {
                    echo 
    '</tr>' "\n";
                    
    $countertd 0;
                } else {
                    
    $countertd++;
                }
                
    $countergif 0;
                
            }
        }
        if (
    $countertd 0) echo '</tr>';
        echo 
    '</table>';
    ?>
    Replace the code of your tables by this code and change the extension of your HTML file to "php".

    I've put the HTML of the alfabetical links into a separate file. Put this code:
    HTML Code:
    <table width="1120" border="2" bordercolor="#663366" cellspacing="2" cellpadding="2">
    <tr>
    <td><center><a href="##"><b>#</b></a></center></td>
    <td><center><a href="#A"><b>A</b></a></center></td>
    <td><center><a href="#B"><b>B</b></a></center></td>
    <td><center><a href="#C"><b>C</b></a></center></td>
    <td><center><a href="#D"><b>D</b></a></center></td>
    <td><center><a href="#E"><b>E</b></a></center></td>
    <td><center><a href="#F"><b>F</b></a></center></td>
    <td><center><a href="#G"><b>G</b></a></center></td>
    <td><center><a href="#H"><b>H</b></a></center></td>
    <td><center><a href="#I"><b>I</b></a></center></td>
    <td><center><a href="#J"><b>J</b></a></center></td>
    <td><center><a href="#K"><b>K</b></a></center></td>
    <td><center><a href="#L"><b>L</b></a></center></td>
    <td><center><a href="#M"><b>M</b></a></center></td>
    <td><center><a href="#N"><b>N</b></a></center></td>
    <td><center><a href="#O"><b>O</b></a></center></td>
    <td><center><a href="#P"><b>P</b></a></center></td>
    <td><center><a href="#Q"><b>Q</b></a></center></td>
    <td><center><a href="#R"><b>R</b></a></center></td>
    <td><center><a href="#S"><b>S</b></a></center></td>
    <td><center><a href="#T"><b>T</b></a></center></td>
    <td><center><a href="#U"><b>U</b></a></center></td>
    <td><center><a href="#V"><b>V</b></a></center></td>
    <td><center><a href="#W"><b>W</b></a></center></td>
    <td><center><a href="#X"><b>X</b></a></center></td>
    <td><center><a href="#Y"><b>Y</b></a></center></td>
    <td><center><a href="#Z"><b>Z</b></a></center></td>
    </tr>
    </table>
    into a file named named alfabeticalheader.html.

    I've tested this and it worked for me but I didn't check the results completely as the data is too much. If you encounter any problems please revert and report them.

    BTW: Your HTML is outdated. If you like I would update it in the php- and the header file.
    Last edited by Sempervivum; 12-31-2015 at 04:47 PM.

  7. #7
    Join Date
    Dec 2015
    Posts
    53
    Hi Sempervivum,

    That was ultra quick. Many, Many thanks. I was just packing in when you sent this so, although I have downloaded it, I have not yet tested it.

    I have 4 large indexes and assume I can create files and modify the file names imbedded in the script to the file names of extra files for the other three indexes. No need to reply if I am right.

    Thanks again, I will let you know how I get on.

    Don't know what time zone you are in but Happy New Year or Happy New Year for tomorrow.

    David (minizv)

  8. #8
    Join Date
    Dec 2015
    Posts
    53
    Hi Sempervivum,

    I am in process of updating the site so your offer under BTW: is gratefully accepted. (I am setting a fixed heading and side navigation bar. As this will entail editing almost every file on the site, including deleting the graphic from the headers your offer is very timely).

    There are a few minor glitches on the data file but all are cused by special characters, so easy for me to edit.

    Have a look at yours: http://www.minibottlelibrary.com/mbl/alpha/index-a.php
    and my original: www.minibottlelibrary.com/mbl/alpha/index-a.html

    Not having the letter graphics on the same line (in 2 cells) is a nuisance but I can live with it if it is much trouble to alter. The only real problem is that the internal links #c, #d, #W etc. do not work.

    What country are you from? I will acknowledge your contribution in the Contributors file and the next newsletter.

    Regards

    David (minizv)

  9. #9
    Join Date
    Dec 2012
    Posts
    498
    Hallo David,
    assume I can create files and modify the file names imbedded in the script to the file names of extra files for the other three indexes.
    Unfortunately it isn't that easy. I noticed that there are more HTML files only when I had finished this code. The script will have to be modified for each and I will have a look whether one can use one data file for all or a specific one for each. I will continue when the first script is working for you.

    Wish you a very happy New Year too. I'm living in Germany near Hannover, the city of the Expo 2000. This is a new year's video I've prepared for my friends at Facebook showing fireworks above the palace of Braunschweig:
    https://www.youtube.com/watch?v=KBUu-8mtE6E

    Best regards - Ulrich

  10. #10
    Join Date
    Dec 2012
    Posts
    498
    PS: Read this now:
    I am setting a fixed heading and side navigation bar.
    Do you already know about PHP include? This makes it easy to put the header and the navigation into an extra file each, which you can include in all of your pages. Thus you need to edit only one file when you want to change your navigation or header.

  11. #11
    Join Date
    Dec 2012
    Posts
    498
    I tried to make the HTML valid.
    This is the new PHP:
    PHP Code:
            <?php
                $start 
    TRUE;
                
    $data file("data.txt"FILE_IGNORE_NEW_LINES);
                
    $alfabeticalheader file_get_contents("alfabeticalheader.html");
                
    $countertd 0;
                
    $countergif 0;
                foreach (
    $data as $line) {
                    
    $line2 explode(";"$line);
                    if (
    count($line2) == 1) {
                        if (
    $countergif == 0) {
                            if (
    $start$start FALSE; else {
                                if (
    $countertd 0) echo '</tr>';
                                echo 
    '</table>'"\n";
                            }
                            echo 
    $alfabeticalheader;
                            echo 
    '<table class="table-letter">' "\n<tr>";
                        }
                        echo 
    '<td class="td-letter"><img src="' $line2[0] . '"</td>' "\n";
                        
    $countergif++;
                        if (
    $countergif == 2) {
                            echo 
    "</tr>\n</table>\n";
                            echo 
    '<table class="table-alfacontent">' "\n";
                        }
                        
    $countertd 0
                
                    } else {
                        if (
    $countertd == 0) {
                            echo 
    '<tr>';
                            
    $countertd++;            
                        }
                        echo 
    '    <td class="td-alfacontent"><a href="' $line2[0] . '">' $line2[1] . '</a></td>' "\n";
                        if (
    $countertd == 6) {
                            echo 
    '</tr>' "\n";
                            
    $countertd 0;
                        } else {
                            
    $countertd++;
                        }
                        
    $countergif 0;
                
                    }
                }
                if (
    $countertd 0) echo '</tr>';
                echo 
    '</table>';
            
    ?>
    I used classes instead of inline styles, so that you can modify the styling easily by changing the CSS:
    HTML Code:
                .table-alfahead {
                    width: 1120px;
                    border: 2px solid #663366;
                }
                .td-alfahead {
                    text-align: center;
                    font-size: medium;
                    font-weight: bold;
                    padding: 2px;
                    border: 1px solid #663366;
                }
                .table-letter {
                    width: 1120px;
                    border: 2px solid #663366;
                }
                .td-letter {
                    text-align: center;
                    border: 1px solid #663366;
                }
                .table-alfacontent {
                    width: 1120px;
                    border: 2px solid #663366;
                }
                .td-alfacontent {
                    text-align: center;
                    font-size: medium;
                    border: 1px solid #663366;
                }
    Using these and the doctype <!DOCTYPE html> my editor Webmatrix doesn't show any validation errors for the HTML created.
    Last edited by Sempervivum; 01-01-2016 at 08:03 AM.

  12. #12
    Join Date
    Dec 2015
    Posts
    53
    Hi Ulrich,
    Thanks for the video link. I am from Wellington, NZ although originally from England. One of my great-grandfathers was German (from Leipzig) and MBL is hosted by Awardspace in Germany.

    Unfortunately the PHP code above makes things worse. Again, have a look at: http://www.minibottlelibrary.com/mbl/alpha/index-a.php. I have also set up index-t.php Index-t uses the same basic structure as index-a but with some random internal links. You will see that the internal links do not work in either file. I have to say I am amazed at what PHP will do, it apears to be magic! I was expecting to get, if at all, some sort of in-line scripting that handled/flowed each section. I believe that this will be the only type of solution that can be applied to the other two indexes, index-c and index-s, as these use country name (etc.) headings, not a regular heading as for the index-a file sections. But then, I'm not a magician!

    I have added the HTML above to the CSS but, at this stage, left the rest of the CSS file as was. I had caught up with the <!DOCTYPE html> and had already changed this for the files in my test area for the change to a 3 pane style. See: http://www.minibottlelibrary.com/mbl-test/index.html (the side bar files all work but only the Bols image files as I did not want to upload the whole site. Bols was chosen as it goes down an extra layer from most of the site files and I wanted to test this). I know you are going to hate this as it uses frames. I spent 2 full days trying to do this using CSS. I could not even manage to render the 3 basic elements (banner/side/home), in fact, the harder I tried, the worse it got! I admit to being defeated!

    Would there be an advantage to using PHP to set the header and side bar as suggested in your PS above? Surely using CSS or tables the same thing is achieved by ignoring the header and side bar and loading files into the third pane? From your comment I feel I must be missing something.

    Kind Regards

    David (minizv)

  13. #13
    Join Date
    Dec 2012
    Posts
    498
    Unfortunately the PHP code above makes things worse. Again, have a look at: http://www.minibottlelibrary.com/mbl/alpha/index-a.php.
    I'm quite shure that this can be fixed easily. Obviously the reason is that the CSS is not in this page. Insert it into the file you have already or create another one. The alphabetical list looks fine, but this is only because I forgot about posting the corresponding HTML:
    HTML Code:
    <table class="table-alfahead">
        <tbody>
        <tr>
            <td class="td-alfahead"><a href="##">#</a></td>
            <td class="td-alfahead"><a href="#A">A</a></td>
            <td class="td-alfahead"><a href="#B">B</a></td>
            <td class="td-alfahead"><a href="#C">C</a></td>
            <td class="td-alfahead"><a href="#D">D</a></td>
            <td class="td-alfahead"><a href="#E">E</a></td>
            <td class="td-alfahead"><a href="#F">F</a></td>
            <td class="td-alfahead"><a href="#G">G</a></td>
            <td class="td-alfahead"><a href="#H">H</a></td>
            <td class="td-alfahead"><a href="#I">I</a></td>
            <td class="td-alfahead"><a href="#J">J</a></td>
            <td class="td-alfahead"><a href="#K">K</a></td>
            <td class="td-alfahead"><a href="#L">L</a></td>
            <td class="td-alfahead"><a href="#M">M</a></td>
            <td class="td-alfahead"><a href="#N">N</a></td>
            <td class="td-alfahead"><a href="#O">O</a></td>
            <td class="td-alfahead"><a href="#P">P</a></td>
            <td class="td-alfahead"><a href="#Q">Q</a></td>
            <td class="td-alfahead"><a href="#R">R</a></td>
            <td class="td-alfahead"><a href="#S">S</a></td>
            <td class="td-alfahead"><a href="#T">T</a></td>
            <td class="td-alfahead"><a href="#U">U</a></td>
            <td class="td-alfahead"><a href="#V">V</a></td>
            <td class="td-alfahead"><a href="#W">W</a></td>
            <td class="td-alfahead"><a href="#X">X</a></td>
            <td class="td-alfahead"><a href="#Y">Y</a></td>
            <td class="td-alfahead"><a href="#Z">Z</a></td>
        </tr>
        </tbody>
    </table>
    I know you are going to hate this as it uses frames.
    That's true. A common procedure is, to have one HTML file for each content (as you have already) and incluce the code that is the same for all pages by PHP include. Try it, it will work without problems.

  14. #14
    Join Date
    Dec 2015
    Posts
    53
    Hi Ulrich,

    I have tidied the text file, doing away with special characters. That will probably upset a German collector who insisted I put them in! Moving within the file, using ABCD etc. is still not working. Sorry about not updating the CSS. I had done but I uploaded the mbl.css file to the wrong directory. I have had a play with the CSS code and tweeked things a bit. For reasons unknown your bolding within the .td did not work and the text was not bolded then jumping upon roll-over when bolding came into play. I have tweeked the other td entry from my old CSS file and, combining the two, it works fine now.

    Index-t.php is also working almost as well as index-a but this has in it some irregular referals with the file, eg. House - see Building refers to #building which is within the #B section. I could live with these going to the correct letter but it is not ideal. Note the majority of referals are to data files, so no problem, and referals within the file are mainly to a single data file. Unfortunately we have so many of some themes that they are split up into a number of files and, using the example above, #building refers back to the listing for the first Building file (1st of 6). The final problem for index-t are the groupings: Animals, Birds, Jugs, Music. These are in a larger and differently coloured font. If you look at the original index-t.html you will understand why I have done this.

    That's true. A common procedure is, to have one HTML file for each content (as you have already) and incluce the code that is the same for all pages by PHP include. Try it, it will work without problems. - I am not sure what you mean by this. Are you saying I should be adding a PHP code to all 9,593 index files (1 for each data directory)?

    Again, many thanks for the help.

    David (minizv)

  15. #15
    Join Date
    Dec 2012
    Posts
    498
    I have tidied the text file, doing away with special characters. That will probably upset a German collector
    Too bad! I'd liked to assist you fixing this but special characters and character coding are still a mystery to me.

    Does the A page fit your needs now?

    Index-t.php is also working almost as well as index-a
    Did you adjust the PHP for this file yourself? Is it working with PHP?

    Are you saying I should be adding a PHP code to all 9,593 index files (1 for each data directory)?
    OMG! I wasn't aware that the files are so many. But in Germany people say "Geht nicht gibt's nicht!" (There is no "not possible").There are two ways this task can be done:
    • Edit the files automatically offline, e. g. by using AWK. I did this some time with files on my homepage and it works fine.
    • Use Ajax to load the content pages into a main page using Ajax. I practice this too and have a small description in a german forum. I consider translating this and posting it in the tips-and-tricks section of the forum.
    However it might be advisable for you not to be dogmatic and keep the frames.
    Last edited by Sempervivum; 01-02-2016 at 10:19 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles