2014-05-18 56 views
0

我必须在我的网页上显示一些html的东西,我的目标之一是“解释如何制作表格”。所以我有这样一个divdiv内的HTML代码

<div class="maind"> 
contetn 
</div> 

maind具有我需要的所有CSS属性。顺便说一下,我必须在div内显示表格的HTML代码。我怎么能这样做?

enter image description here

正如你可以在这里看到,左边有结果我有。右边是我想要做的。你有什么主意吗?

回答

2

您必须转义HTML字符,以便它们不会被浏览器渲染。

&lt;table border="1" &gt; 
    &lt;tr%gt; 
    etc... 
    &lt;/tr&gt; 
&lt;/table&gt; 

&lt;将呈现为<&gt;将呈现为>

实际上,您只能使用&lt;而仍然在末尾使用>字符,例如, &lt;table>

1

如果您还希望代码被着色,则可以使用语法高亮显示库。我可以推荐你两个库:

  • Highlight.js:是一个JavaScript库非常容易使用。你几乎只需要将这个库包含在你的HTML中。 Here你可以看到基本的用法。

  • Pygments:一个Python库(由Github使用)。它更受欢迎,但是在将代码插入HTML代码之前,您必须先编译代码。

0

如果您想将样式应用于HTML元素,你必须做这第一个给它的样式属性:

<table style="......"> 
    ....... 
</table> 

内部的样式属性你可以给你的高度和宽度以及您可能需要的任何其他财产。

Demo here

所以,如果你想创建一个表这种情况下,这是结构:

<table border="1" style="width:300px"> 
<tr> 
    <td>Jill</td> 
    <td>Smith</td>   
    <td>50</td> 
</tr> 
<tr> 
    <td>Eve</td> 
    <td>Jackson</td>  
    <td>94</td> 
</tr> 
<tr> 
    <td>John</td> 
    <td>Doe</td>  
    <td>80</td> 
</tr> 
</table> 

正如你所看到的,你必须给风格第一个属性。

Demo for table