VideoHelp Forum
+ Reply to Thread
Results 1 to 9 of 9
Thread
  1. Member vhelp's Avatar
    Join Date
    Mar 2001
    Location
    New York
    Search Comp PM
    In one of my app projects, I am considering using HTML for providing a preview output. I browsed around the web to get some examples. I found this example below, but can't seem to reproduce it in my test project, delphi xe7 pro. I am not an experience HTML coder, and duplicating ideas from other websites has been difficult for me.

    The colors are not showing up and the alignment of the table seems to be set to Right-align. The table is about mid-way down in that website. I'd like to make the previews in my test app to be center-align'ed so that if on a mobile device, the window will always show the complete info perfectly.

    http://www.nutrition-and-you.com/pineapple.html

    This is the code snippet that I copy/pasted into the test app. The right-pane in that app is for pasting HTML code, the [Load HTML] button is to load the actual html and show a real-time preview in a the left side pane as a web page.

    Code:
    </div><!-- /.blog-sidebar -->
    		<br clear="all">
    		<span style="margin: 2px; text-align: left; float: right; width: 270px;">
    <table style="text-align: left; margin-left: auto; margin-right: 0px;" id="tab">
    
    <caption><p>See the table below for in depth analysis
    of nutrients:</p>
    <p>
    Pineapple (<span style="font-style: italic;">Ananas comosus)</span>,
    Fresh, <br>Nutritive Value per 100 g
    <br>
    (Source: USDA National Nutrient data base) </p></caption><tbody>
    <tr>
    <th style="width: 101px;">Principle</th>
    <th style="width: 68px;">Nutrient Value</th>
    <th style="width: 89px;">Percentage of
    RDA</th>
    </tr>
    <tr>
    <td style="width: 101px;">Energy</td>
    <td style="width: 68px;">50 Kcal</td>
    <td style="width: 89px;">2.5%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Carbohydrates</td>
    <td style="width: 68px;">13.52 g</td>
    <td style="width: 89px;">10%</td>
    </tr>
    <tr>
    <td style="width: 101px;">Protein</td>
    <td style="width: 68px;">0.54 g</td>
    <td style="width: 89px;">1%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Total Fat</td>
    <td style="width: 68px;">0.12 g</td>
    <td style="width: 89px;">&lt;1%</td>
    </tr>
    <tr>
    <td style="width: 101px;">Cholesterol</td>
    <td style="width: 68px;">0 mg</td>
    <td style="width: 89px;">0%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Dietary Fiber</td>
    <td style="width: 68px;">1.40 g</td>
    <td style="width: 89px;">4%</td>
    </tr>
    <tr>
    <th style="width: 101px;">Vitamins</th>
    <th style="width: 68px;"></th>
    <th style="width: 89px;"></th>
    </tr>
    <tr>
    <td style="width: 101px;">Folates</td>
    <td style="width: 68px;">18 µg</td>
    <td style="width: 89px;">4.5%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Niacin</td>
    <td style="width: 68px;">0.500 mg</td>
    <td style="width: 89px;">4%</td>
    </tr>
    <tr>
    <td style="width: 101px;">Pyridoxine</td>
    <td style="width: 68px;">0.112 mg</td>
    <td style="width: 89px;">9%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Riboflavin</td>
    <td style="width: 68px;">0.018 mg </td>
    <td style="width: 89px;">1.5%</td>
    </tr>
    <tr>
    <td style="width: 101px;">Thiamin</td>
    <td style="width: 68px;">0.079 mg </td>
    <td style="width: 89px;">6.5%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Vitamin A</td>
    <td style="width: 68px;">58 IU</td>
    <td style="width: 89px;">2%</td>
    </tr>
    <tr>
    <td style="width: 101px;">Vitamin C</td>
    <td style="width: 68px;">47.8 mg</td>
    <td style="width: 89px;">80%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Vitamin E</td>
    <td style="width: 68px;">0.02 mg</td>
    <td style="width: 89px;">&lt;1%</td>
    </tr>
    <tr>
    <td style="width: 101px;">Vitamin K</td>
    <td style="width: 68px;">0.07 µg</td>
    <td style="width: 89px;">0.5%</td>
    </tr>
    <tr>
    <th style="width: 101px;">Electrolytes</th>
    <th style="width: 68px;"></th>
    <th style="width: 89px;"></th>
    </tr>
    <tr>
    <td style="width: 101px;">Sodium</td>
    <td style="width: 68px;">1 mg</td>
    <td style="width: 89px;">0%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Potassium</td>
    <td style="width: 68px;">109 mg</td>
    <td style="width: 89px;">2.5%</td>
    </tr>
    <tr>
    <th style="width: 101px;">Minerals</th>
    <th style="width: 68px;"></th>
    <th style="width: 89px;"></th>
    </tr>
    <tr>
    <td style="width: 101px;">Calcium</td>
    <td style="width: 68px;">13 mg</td>
    <td style="width: 89px;">1.3%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Copper</td>
    <td style="width: 68px;">0.110 mg</td>
    <td style="width: 89px;">12%</td>
    </tr>
    <tr>
    <td style="width: 101px;">Iron</td>
    <td style="width: 68px;">0.29 mg</td>
    <td style="width: 89px;">3.5%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Magnesium</td>
    <td style="width: 68px;">12 mg</td>
    <td style="width: 89px;">3%</td>
    </tr>
    <tr>
    <td style="width: 101px;">Manganese</td>
    <td style="width: 68px;">0.927 mg</td>
    <td style="width: 89px;">40%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Phosphorus</td>
    <td style="width: 68px;">8 mg</td>
    <td style="width: 89px;">1%</td>
    </tr>
    <tr>
    <td style="width: 101px;">Selenium</td>
    <td style="width: 68px;">0.1 µg</td>
    <td style="width: 89px;">&lt;1%</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Zinc</td>
    <td style="width: 68px;">0.12 mg</td>
    <td style="width: 89px;">1%</td>
    </tr>
    <tr>
    <th style="width: 101px;">Phyto-nutrients</th>
    <th style="width: 68px;"></th>
    <th style="width: 89px;"></th>
    </tr>
    <tr>
    <td style="width: 101px;">Carotene-ß</td>
    <td style="width: 68px;">35 µg</td>
    <td style="width: 89px;">--</td>
    </tr>
    <tr class="alt">
    <td style="width: 101px;">Crypto-xanthin-ß</td>
    <td style="width: 68px;">0 mcg</td>
    <td style="width: 89px;">--</td>
    </tr>
    </tbody>
    </table>
    </span>
          </div><!-- /.row -->
    
        </div><!-- /.container -->
    </div>
    </div>
        <footer class="blog-footer">
    And below, is the result of my attempt, but unsuccessful.



    So that I can reproduce that table in my test app, where, in that websites html code is the color and alignment information ?
    Quote Quote  
  2. Member DB83's Avatar
    Join Date
    Jul 2007
    Location
    United Kingdom
    Search Comp PM
    The simple answer is that it is not in that code.

    Look at line 18 of the source and you will see reference to a css file. CSS does all the text formatting, colours etc.

    To align a table in the centre of the screen is quite simple. You just have code <table align = 'center'>
    Quote Quote  
  3. Member vhelp's Avatar
    Join Date
    Mar 2001
    Location
    New York
    Search Comp PM
    I just entered that .css file in a separate window and ran it. The results were messy un-formatted text, like one big blob of text. I will never understand why people write code that spills unformatted html code in this manner, and worse, not put it in the original html (the webpage) in the first place. I don't get the reason behind having a .css file running, to process data (database) and spit part of it in color coded code and then the rest of it in html.

    http://www.nutrition-and-you.com/support-files/A.newstyle.css.pagespeed.cf.mR23IbGxaj.css

    example snippet of the blob of text.

    body{padding-top:2px}.container,footer{border:1px solid #c7c7c7}footer{padding-top:20px;padding-bottom:10px;margin-top:0px;border-top:1px solid #eee;text-align:center;background-color:#eee}.Navigation{width:90%;font-family:Verdana,Georgia,sans-serif;background-color:#f5f5ff;border-style:dotted;border-color:#d3d3d3;border-width:1px}.Navigation ul{list-style-type:none;padding:0 0;margin:20px 0}.Navigation li{background-color:#fff;padding:0 0 0 10px;margin-bottom:1px;text-align:left}.Navigation a:link{display:block;padding:8px 0 8px 4px;color:#005c00;text-decoration:none}.
    Also, I was looking into the Align function, but I can't get the whole table (the frame part) to center in the window, unless that too was part of the .css produced results. Anyway. Thanks for the info.
    Quote Quote  
  4. Member DB83's Avatar
    Join Date
    Jul 2007
    Location
    United Kingdom
    Search Comp PM
    css files are written so that, often, the code is common to more than one page.

    Also whilst most settings could be entered directly in to the table Td's,Tr's etc you end up with quite a mess and will have to repeat the settings for every row

    I can assure you that the original file was not this 'messy blob' and will show all entries on separate line in the original file >> I have not tried this but what happens if you load the file in to a text editor rather than on a html page ?

    The align setting will normally work but there is other text etc. on the original page. A clean table will align centre. Done this myself so I know it works.
    Quote Quote  
  5. Member DB83's Avatar
    Join Date
    Jul 2007
    Location
    United Kingdom
    Search Comp PM
    ^^ Maybe I over-simplified the issue.

    It certainly works on the web pages that I am developing. However, these also rely on css. For html you really can not get away from it.
    Quote Quote  
  6. Member DB83's Avatar
    Join Date
    Jul 2007
    Location
    United Kingdom
    Search Comp PM
    It's official. I am an idiot.

    Try this code on a simply .html page

    <table align='center'>
    <tr><td>This text is centered</td></tr>
    </table>

    Why did it not work before?. Because on this side of the pond we write 'centre' not 'center'
    Quote Quote  
  7. Hey men use Bootstrap Framework !
    So simple to build tables etc..
    Quote Quote  
  8. Member
    Join Date
    Oct 2018
    Location
    Serbia
    Search Comp PM
    This is simple tragedy. if you need help with that pages, let me know.
    Quote Quote  
  9. Member carv's Avatar
    Join Date
    Feb 2019
    Location
    Denver
    Search PM
    Try to install FireBug; it will help identify errors in the code. There may also be errors in the browser or with the display of the page in a particular browser. When I did my web project with the help of EssayShark, I also had a problem with playing in a flash player, so there may be another problem with that.
    Quote Quote  



Similar Threads

Visit our sponsor! Try DVDFab and backup Blu-rays!