HTML Table

HTML

<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td>3</td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td>5</td>
        <td>first</td>
        <td>One</td>
        <td>Coloumn</td>
    </tr>
</table>

CSS

#codexpl th, #codexpl td {
    padding:0.8em;
    border: 1px solid;
}
#codexpl th {
    background-color:#6699FF;
    font-weight:bold;
}

JavaScript

setTimeout(function () {
    var conteudo = $('body').html(); // body ou o elemento que preferir
    // apanhar comentários
    conteudo = (conteudo.replace(/<!--/g, '&#60;&#33;&#45;&#45;')).replace(/-->/g, '&#45;&#45;&#62;');
    // apanhar elementos
    conteudo = (conteudo.replace(/</g, '&#60;')).replace(/>/g, '&#62;');
    $('body').html('<pre>' + conteudo + '</pre>'); // body ou o elemento que quiser
}, 1500);