1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Difficulty using Ordered Lists in HTML tables

Discussion in 'Web Design & Development' started by BarryLight, Feb 22, 2010.

Thread Status:
Not open for further replies.
Advertisement
  1. BarryLight

    BarryLight Thread Starter

    Joined:
    Feb 22, 2010
    Messages:
    1
    Difficulty using Ordered Lists in HTML tables
    I can't figure out how to use Ordred Lists inside HTML tables.
    1. Decimal type
    2. Tea
    3. Coca Cola
    The is an Ordered List, as it appears outside a table. (This 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. I need the numbering to continue from the Left cell in the first row (in the table below) to the Left cell in the second row (in the table below).

    [I managed to screw up this page, so that now the table doesn't appear on the page anymore.]



    1. Decimal type
    Right Column
    1. Tea
      <-- I wish that that the "1" could be replaced with a "2"
    Right Column
    1. Coca Cola
      <-- I wish that that the "1" could be replaced with a "3"
    Right Column


    1. First One
    · <-- I wish that that were a "2"
    · <-- I wish that that were a "3"
    · Whoops. One too many


    <html>
    <head>
    <title>My HTML application</title>
    <HTA:APPLICATION
    APPLICATIONNAME="My HTML application"
    ID="MyHTMLapplication"
    VERSION="1.0"/>
    </style>
    </head>

    <script language="VBScript">
    </script>

    <font size ="4"><b><u>My Outline-Numbering Wish List</b></u></font>
    <br>

    <ol>
    <font color="blue"><li>Decimal type</li></font>
    <font color="red"><li>Tea</li></font>
    <font color="green"><li>Coca Cola</li></font>
    </ol>
    <br><br>

    <table cellspacing=1 cellpadding=3 bgcolor="black">
    <tr>
    <td bgcolor="white">
    <font color="blue"><ol><li>Decimal type</li></font>
    </td>
    <td bgcolor="white">
    Right Column
    </td>
    </tr></ol>


    <td bgcolor="white">
    <font color="red"><ol><li>Tea<br><-- I wish that that the "1" could be replaced with a "2"</li></font>
    </td>
    <td bgcolor="white">
    Right Column
    </td>
    </tr></ol>


    <td bgcolor="white">
    <font color="green"><ol><li>Coca Cola<br><-- I wish that that the "1" could be replaced with a "3"</li></font>
    </td>
    <td bgcolor="white">
    Right Column
    </td>
    </tr></ol>
    </table>
    <br>


    <table cellspacing=1 cellpadding=3 bgcolor="black">
    <tr>
    <td bgcolor="white">
    <ol>
    <font color="blue"><li>First One</li></font>
    </td>
    <td bgcolor="white">
    <font color="red"><li><-- I wish that that were a "2"</li></font>
    </td>
    </tr>


    <tr>
    <td bgcolor="white">
    <font color="green"><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>
     

    Attached Files:

  2. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    You need specify the starting number for the first list item using the "value" attribute. You can read about the "value" attribute of the <li> element here.

    Here is an example:
    Code:
    <table style="text-align: left; width: 75%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="vertical-align: top;">
          <ol>
            [b][color=red]<li>[/color][/b]fe</li>
          </ol>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;">
          <ol>
            [b][color=red]<li value="2">[/color][/b]fi</li>
          </ol>
          </td>
    
        </tr>
        <tr>
          <td style="vertical-align: top;">
          <ol>
            [b][color=red]<li value="3">[/color][/b]fo</li>
            <li>fum</li>
          </ol>
          </td>
        </tr>
      </tbody>
    </table>
    
    Peace...
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/905139