Results 1 to 10 of 10

Thread: How to use Numbered Lists inside HTML tables

  1. #1
    Join Date
    Feb 2010

    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:

    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.



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

  2. #2
    Join Date
    Jan 2005
    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

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

    Thank you. Very helpful suggestion. Much appreciated.

    Share on Google+

  4. #4
    Join Date
    Jul 2009
    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.

    <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('<td>' + (row+1) + ". " + my_array[row] + '</td>');
           var my_array = ["Decimal Type", "Tea", "Coca Cola"];
    Share on Google+

  5. #5
    Join Date
    Feb 2010

    Smile Javascript

    thank you. Very very much appreciated.

    Share on Google+

  6. #6
    Join Date
    Feb 2010
    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

    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


    Alternative methods using CSS only ...
    <!DOCTYPE html>
    <html lang="en">
    <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; */
    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}
       <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>Flight to the Ford</li>
       <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>The Mirror of Galadriel</li>
         <li>Farewell to Lorien</li>
         <li>The Great River</li>
         <li>The Breaking of the Fellowship</li>
       <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>The Old Man & The Sea</li>
         <li>Farewell to Arms</li>
    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
    @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
    Sheboygan, Wisconsin
    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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.12745 seconds
  • Memory Usage 2,942KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (10)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (10)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates