dcsimg
www.webdeveloper.com
Results 1 to 10 of 10

Thread: How to use Numbered Lists inside HTML tables

  1. #1
    Join Date
    Feb 2010
    Posts
    3

    How to use Numbered Lists inside HTML tables

    Difficulty using Ordered Lists in HTML tables

    I can't figure out how to use Ordered Lists inside HTML tables.
    The following is an Ordered List Outside of any HTML table:
    1. Decimal type
    2. Tea
    3. Coca Cola
    The Ordered List above is perfect, i.e., exactly what I want, when the list is outside of a table.

    I can't figure out a way to keep the Ordered List numbering working (as shown above) when the Ordered List appears inside a table, as shown in the pdf file at this url:
    "http://www.theadhdsolution.net/publicmisc/Difficulty%20using%20Ordered%20Lists%20in%20HTML%20tables.docx.pdf[^]"

    I need the numbering to continue from the Left cell in the first row (in the table in the pdf) to the Left cell in the second row (in the pdf), to the left cell in the 3d row (in the pdf).

    Someone told me that there's a rule somewhere in the W3c specs saying that Ordered List nuimbering cannot work across cells (from one cell to another) in a table. If that's true:
    1. I'd love to know where to find that rule; I've been looking for it for a while; and
    2. I'm hoping that someone will know of some alternate method for making sequential numbers appear in tables.

    Thanks,

    BarryNu


    <html>
    <head>
    <title>My HTML application</title>
    <HTA:APPLICATION
    APPLICATIONNAME="My HTML application"
    ID="MyHTMLapplication"
    VERSION="1.0"/>
    </style>
    </head>
    <script language="VBScript">
    Sub Window_OnLoad 'This method will be called when the application loads 'Add your code hereEnd Sub
    </script>
    <font size ="4"><b><u>My Outline-Numbering Wish List</b></u>
    <br>
    <ol>
    <li>Decimal type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ol>
    <br>
    <br>
    <table cellspacing=1 cellpadding=3 bgcolor="black">
    <tr>
    <td bgcolor="white">
    <ol><li>Decimal type</li>
    </td>
    <td bgcolor="white">
    Right Column </td>
    </tr></ol>
    <td bgcolor="white">
    <ol><li>Tea<br><-- I wish that that the "1" could be replaced with a "2"</li>
    </td>
    <td bgcolor="white">
    Right Column </td>
    </tr></ol>
    <td bgcolor="white">
    <ol><li>Coca Cola<br><-- I wish that that the "1" could be replaced with a "3"</li>
    </td>
    <td bgcolor="white">
    Right Column </td>
    </tr></ol>
    </table>
    <br>
    <table cellspacing=1 cellpadding=3 bgcolor="black">
    <tr>
    <td bgcolor="white">
    <ol>
    <li>First One</li>
    </td>
    <td bgcolor="white">
    <li><-- I wish that that were a "2"</li>
    </td>
    </tr>
    <tr>
    <td bgcolor="white">
    <li><-- I wish that that were a "3"</li>
    </td>
    <td bgcolor="white">
    <li>Whoops. One too many</li>
    </td>
    </tr>
    </table></ol>
    </body>
    </html>
    Share on Google+

  2. #2
    Join Date
    Jan 2005
    Location
    USA
    Posts
    6,176
    I suggest using some javascript or server-side coding that simply counts and assigns numbers to the table rows, and then writes that number in the HTML.
    Share on Google+

  3. #3
    Join Date
    Feb 2010
    Posts
    3

    Smile Server-side scripting to write number into cells, Numbered Lists inside HTML tables

    Thank you. Very helpful suggestion. Much appreciated.


    BarryNu
    Share on Google+

  4. #4
    Join Date
    Jul 2009
    Posts
    184
    Here is a simple javascript function that will show the Row number and an element from an array in the cell beside it. It could be changed to suit your purposes.

    Code:
    <script type="text/javascript">
    function html_table(my_array)
           {
           // Generate table head
           document.write('<table border="1"><thead><th>Row and Array Value</th></thead>');
           for(var row = 0; row < my_array.length; row++)
           {
           // Generate table rows and information
           document.write('<tr>');
           document.write('<td>' + (row+1) + ". " + my_array[row] + '</td>');
           document.write('</tr>');
           }
           document.write('</table>');
           }
           
           var my_array = ["Decimal Type", "Tea", "Coca Cola"];
           
           html_table(my_array);
    </script>
    Share on Google+

  5. #5
    Join Date
    Feb 2010
    Posts
    3

    Smile Javascript

    thank you. Very very much appreciated.


    BarryNu
    Share on Google+

  6. #6
    Join Date
    Feb 2010
    Posts
    11
    Hi!
    I'm beginner in html-language, than I can't to give you correctly answer to your question.
    So I can give you advice to use this html tutorials resource to improve your knowledges by html language!
    Share on Google+

  7. #7
    Join Date
    Oct 2017
    Posts
    1

    Exclamation how to change that number

    i am beginner of html markup lang. actually u can change number just remove that ordered list and add number manually
    Share on Google+

  8. #8
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,888

    Lightbulb

    Alternative methods using CSS only ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Simple CSS Flexbox Demo </title>
    <!-- Idea for: http://www.webdeveloper.com/forum/showthread.php?225252-How-to-use-Numbered-Lists-inside-HTML-tables -->
    
    <style type="text/css">
     h5 { text-align: center; }
     ul, ol, li { margin-left: 0; padding: 0 2px;}
    
     ol.chapters {  padding-left: 0.5em; 
        list-style: none;
        margin-left: 0;
     }
     ol.chapters > li:before {
        content: counter(chapter) ". ";
        counter-increment: chapter;
        font-weight: bold;
        float: left;
        width: 1.75em;
     }
     ol.chapters li { clear: left; }
     ol.start { counter-reset: chapter; }
     ol.continue1 { counter-reset: chapter 11; }
     ol.continue2 { counter-reset: chapter 0; }  /* could continue # with 21; */
    </style>
    
    <style>
    table {
        border-collapse: collapse; 
        width: 100%;
        border: 1px solid #000;
    }
    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #000;
    }
    td { vertical-align: top; border-right: 1px solid black}
    td:hover{background-color:#bbb}
    </style>
    
    </head>
    <body>
    <table>
     <tr>
      <td>
       <h5>Book One</h5>
       <ol class="chapters start">
         <li>A Long-expected Party</li>
         <li>The Shadow of the Past</li>
         <li>Three is Company</li>
         <li>A Short Cut to Mushrooms</li>
         <li>A Conspiracy Unmasked</li>
         <li>The Old Forest</li>
         <li>In the House of Tom Bombadil</li>
         <li>Fog on the Barrow-downs</li>
         <li>At the Sign of The Prancing Pony</li>
         <li>Strider</li>
         <li>Flight to the Ford</li>
       </ol>
      </td>
    
      <td>
       <h5>Book Two</h5>
       <ol class="chapters continue1">
         <li>Many Meetings</li>
         <li>The Council of Elrond</li>
         <li>The Ring Goes South</li>
         <li>A Journey in the Dark</li>
         <li>The Bridge of Khazad-dum</li>
         <li>Lothlorien</li>
         <li>The Mirror of Galadriel</li>
         <li>Farewell to Lorien</li>
         <li>The Great River</li>
         <li>The Breaking of the Fellowship</li>
       </ol>
      </td>
    
      <td>
       <h5>Book Three</h5>
       <ol class="chapters continue2">
         <li>To Kill A Mockingbird</li>
         <li>Profiles In Courage</li>
         <li>Jonathan Livingston Seagull</li>
         <li>The Time Machine</li>
         <li>The Bridge Over the River Kwai</li>
         <li>Longmier</li>
         <li>The Old Man & The Sea</li>
         <li>Farewell to Arms</li>
       </ol>
      </td>
     </tr>
    </table>
    </body>
    </html>
    Remove :hover effect if not desired.
    Numbering can remain continuous with change commented in ol:continue2 command.
    Share on Google+

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,249
    @amit007996 -- Can you please not resurrect old posts, if you see something you want help with, it is best to start a thread and post a URL to the post you want to comment about in relation to your query, especially when your coment is neither useful or adding anything to the post.

    This thread is from 2010.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...
    Share on Google+

  10. #10
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,561
    Closing
    Share on Google+

Thread Information

Users Browsing this Thread

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

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