The HTML code you see on this page is actually used when the examples are displayed.
A script takes the relevent text and changes all the < and > back to < and >, it is placed inside a display div where the browser then renders it as normal HTML.
<table border="1"> <tbody> <tr> <td>Cell 1 content</td> <td>Cell 2 content</td> <td>Cell 3 content</td> </tr> </tbody> </table>
<table border="0"> <tbody> <tr> <td style="border:1px solid blue">Cell 1 content</td> <td style="border:1px solid blue">Cell 2 content</td> <td style="border:1px solid blue">Cell 3 content</td> </tr> </tbody> </table>
<div style="border:1px dotted #FF0000"> This is another example using a div<br> Everything is rendered exactly as you see it here. </div>
<div id="div1" style="background-color:#e0e0f0;border:1px solid blue"> There are some limitations regarding what can be rendered this way.<br> You can include links, inline css attributes and inline statements but not scripts or style rules.<br> You can call functions and reference style rules already rendered in the head section<br> <br> <center> <a href="#null" onclick="alert('I am an inline alert!');testLink()" onmouseover="document.getElementById('div1').style.color='#ff0000'" onmouseout="document.getElementById('div1').style.color=''" title="I work!">Test Link</a><br> </center> <br> </div>
Text that is used in inline statements is not seen by the user but will still be affected by any word wrapping that the browser applies to the display div so the length of the statements must not be longer than the width of the div, otherwise word wrapping may split up the line prevent it from working.