Как мне оформить таблицу как блокнот?

Question

Я хотел бы создать 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>

Итак, я думал обрезать графику. Имейте верхнюю часть, будьте bg img для <thead>. Затем просто создайте одну из строк в виде строк (будет две графики, одна для col1 и col2 - чтобы при создании новой строки была заполнена bg обоих столбцов), чтобы она могла масштабироваться вертикально при необходимости. Затем, для последнего сета, у меня есть еще две графики. Один для col1. Один для col2 (который является обычной строкой, но немного уже по ширине) и завиток будет col3.

Есть ли масштабируемый способ сделать это, используя только CSS и HTML (без JS или jQuery)?

Спасибо.

P.S. Или есть другой способ создать то же самое, не используя изображения bg - и просто используя CSS?

Answer 1

Использование таблиц для этого, вероятно, не правильно (я предполагаю, что ваш «блокнот» не заполнен табличными данными); вместо этого может быть достаточно простого 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, shrug ), просто замените элементы HTML5 на <div> s.

Answer 2

Похоже, вы хотите, чтобы контент имел вертикальный ритм .Это очень кропотливо для достижения, но это полезно.По сути, вы выбираете высоту строки, а затем задаете для вертикальной высоты все, что кратно выбранной вами высоте строки.Вот ссылка, которая может лучше объяснить это, а также некоторые инструменты, которые я использую:

• http://coding.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
• http://drewish.com/tools/vertical-rhythm
• http://pxtoem.com/