Put ordered list in a table row <tr>. Is it possible?

Question

I have here a sample code of putting an ordered list (1,2,3 ...):

This is my JScipt:

<script type="text/javascript">
    $(document).ready(function() {
    $("ul").each(function() {
     $(this).find("li").each(function(count) {
        $(this)
          .css("list-style-type", "none")
          .prepend("<div class='listnumber'>" + (count + 1) + ".</div>");
     });
  });
  })    
</script>

For the HTML, simple as this:

<ul>
  <li>CSS</li>
  <li>CSS3</li>
  <li>PHP</li>
  <li>CakePHP</li>
 </ul>

For CSS:

<style type="text/css">
 .listnumber
 {
    display: inline-block;
    padding-right: 3px;
 }
</style>

Using: 1.9.1.js and this perfectly works. What I want is how to number all the data inside a table. Or how to put the tags <ul><li></li></ul> inside <tr><td></td></tr>

I have tried:

<ul> 
    <li>
      <tr>
        <td>
          CSS
        </td>
      </tr>
   </li>

   <li>
      <tr>
        <td>
          CSS3
        </td>
      </tr>
   </li>

   <li>
      <tr>
        <td>
          PHP
        </td>
      </tr>
   </li>

   <li>
      <tr>
        <td>
          CakePHP
        </td>
      </tr>
   </li>

  </ul>

But the numbering did not work. Why is that? Letting me understand is another learning for me. Thanks in advance.

Answer 1

<table>
    <tr><td class="nr"></td><td>This</td></tr>
    <tr><td class="nr"></td><td>should</td></tr>
    <tr><td class="nr"></td><td>work...</td></tr>   
</table>

<script type="text/javascript">
    var a = document.getElementsByClassName("nr");
    for (var i = 0; i < a.length; i++) {
        a[i].innerHTML = (i+1)+".";
    }
</script>

Answer 2

Here's my belated solution:

    <ol style="list-style: decimal inside;">
        <table>
            <tr>
                <td style="text-align: right; display: list-item;"></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </ol>

The list can be modified with the CSS "list-style", "text-align" and "display" attributes. The beauty of this method is that it is pure HTML and CSS, no javascript or jQuery required, and for ordered lists the list numbers are automatically updated when a row is removed from the table. And it works in Chrome and its variants and Firefox. Don't know about IE.