How To Convert HTML Table In To Div Tag

Using Jquery Convert HTML Table in to Div tag:

Jquery function converting table in to div, see below jquery function:

<script type="text/javascript">

        $('table').replaceWith(function () {

            var html = ''; 

            $('tr', this).each(function () {

                html += '<div>';

                $('td', this).each(function () {

                    html += '<div>' + $(this).html() + '</div>';

                });

                html += '</div>';

            }); 

            return '<div>' + html + '</div>';

        });

</script>

Table :

<table>

        <tr>

            <td width="180" valign="top" id="maintable-toc">

                <div id="toc">

                    <h2>

                        <a id="toc-title" href="index.htm">Table of Contents</a></h2>

                    <ol class="section">

                        <li>

                            <div class="currentpage">

                                Basics</div>

                            <ol>

                                <li><a href="page_02.htm">Pages </a></li>

                                <li><a href="page_03.htm">Sections </a></li>

                                <li><a href="page_04.htm">Headings </a></li>

                            </ol>

                        </li>

                        <li><a href="page_07.htm">Images </a></li>

                    </ol>

                </div>

            </td>

            <td width="*" valign="top" id="maintable-content">

                <div id="main-content-withtoc">

                    <a name="Main"></a>

                    <h2>

                        Basics</h2>

                    <p>This section looks at the basics of work.</p>

                </div>

            </td>

        </tr>

</table>