Html 如何将桌子设计成记事本？

我想在我的页面上创建此记事本的CSS/HTML版本：

我想用这样一个简单的表格：

<div id="notepad">
        <table> 
            <thead id="tbl_header">Comments</thead>     
            <tr></tr>
            <tr>
                <td class="col1">Dot</td>
                <td class="col2">Text for column 2</td>
            </tr>
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
            </tr> 
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
            </tr>
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
            </tr>
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
                     <td class="col3"></td>
            </tr>
        </table>    
    </div>

评论
圆点
第2栏的文本

所以我想的是把图片切碎。拥有顶部，成为

的bg img。 然后只需创建一行作为行（将有两个图形，一个用于col1和col2-因此当创建新行时，将填充两列的bg），以便可以根据需要垂直缩放。然后，对于最后一组，我还有两个图形。一个是col1。一个用于col2（这是规则行，但宽度稍窄），卷曲为col3

有没有一种可伸缩的方法可以做到这一点，只使用CSS和HTML（没有JS或jQuery）

谢谢

---

或者有没有其他方法来创建相同的东西，而不必使用bg图像-并且只使用CSS？

使用表格来完成这一点可能是不正确的（我假设您的“记事本”中没有填写表格数据）；相反，一个简单的HTML5就足够了：

<section class="notepad">
    <header><h1>Comments</h1></header>
    <!-- Your text here -->
    <footer>&nbsp;</footer>
</section>

---

未经测试；可能需要一些调整。只需确保适当设置

行高

，这样文本就不会与行重叠。如果您使用的是HTML4（甚至是XHTML，耸耸肩），只需用

s替换HTML5特定的元素。

似乎您希望内容具有垂直节奏。要做到这一点是非常辛苦的，但这样做是值得的。基本上，你选择一条线的高度，然后让所有的东西都有一个垂直高度，这个高度是你选择的线高度的几倍。下面是一个可能更好地解释它的链接以及我使用的一些工具：

---

很有趣。你是对的。没有特别需要表格数据，只是我需要文本看起来像是写在记事本上（即整齐地写在行上）。将研究这样的实现。谢谢。视觉表现并不能使它成为表格。一般的想法是，HTML应该是语义和非表示性的，即HTML只是“什么”，而不是“如何”。使用

行高属性可以使文本整齐地排列在行上。顺便说一句@You…快速提问。注释
.notepad>*
基本上是指一个元素的所有子元素以及类“notepad”，对吗？从CSS的第一行开始。谢谢。@marcamillion:是的，所有直接的孩子。请注意，这与选择所有子项（不考虑级别）的
.notepad*
不同。在此处阅读有关选择器的更多信息：
.notepad, .notepad>* {
    margin: 0;
    padding: 0;
    overflow: auto;
}
.notepad {
    background: url('middle-part.png');
}
.notepad header {
    background: url('top-part.png');
}
.notepad footer {
    background: url('curl-part.png');
    float: right;
    /* Set a correct size as well. */
}