All geek questions in one place

How to create a table as a notepad?

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

notepad

I was thinking about using a simple table:

<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 I thought it was cutting graphics. Have a top bg img for <thead>. Then just create one of the rows as rows (there will be two graphs, one for col1 and col2 - so when a new row is created, bg of both columns will be filled) so that it can scale vertically as needed. Then, for the last set, I have two more charts. One for col1. One for col2 (which is a regular string, but a bit narrower in width), and the curl will be col3.

Is there a way to scale that I can do using only CSS and HTML (no JS or jQuery)?

Thank.

P.S. bg- - CSS?

+3
2

, , ( , "" ); HTML5 <section>:

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

CSS , " ":

.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. */
}

; . line-height , . HTML4 ( XHTML, ), , HTML5, <div> s.

+1

Source: https://habr.com/ru/post/1766669/

More articles:


All Articles