How do I style a table like a notepad?

Question

I would like to create a CSS/HTML version of this notepad on my page:

I was thinking of using a simple table like this:

<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>

So what I was thinking was cutting up the graphic. Have the top part, be the bg img for the <thead>. Then just create one of the lines as the rows (there would be two graphics, one for col1 and col2 - so when a new row is created the bg of both columns would be populated), so that it can scale vertically as needed. Then, for the last set, I have two more graphics. One is for col1. One for col2 (which is the regular row but a little narrower in width) and the curl would be col3.

Is there a scalable way I can do this, using CSS & HTML only (no JS or jQuery) ?

Thanks.

P.S. Or is there another way to create this same thing without having to use bg images - and just using CSS?

Answer 1

Using tables to do this is probably not correct (I assume your "notepad" isn't filled with tabular data); instead, a simple HTML5 <section> could be enough:

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

With appropriate CSS, this is easily styled to become a "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. */
}

Untested; may require some tweaking. Just be sure to set line-height appropriately, so that text doesn't overlap row lines. If you're using HTML4 (or even XHTML, shrug), simply replace the HTML5-specific elements with <div>s.

Answer 2

I have created an HTML/CSS version of this notepad and released it free for anyone that might be interested:

http://marcgayle.com/2010/09/27/a-notepad-in-html-css/

Enjoy!