Думаю всем знаком, приём, когда у блока текста создаются границы из графических элементов. Это может быть простая окантовка, имитация старого свитка и тому подобное.

С помощью табличного дизайна это реализуется достаточно очевидно. Создаётся таблица 3×3. Центральная ячейка отдаётся собственно под контент, а остальные восемь служат посадочными местами для окантовки.

Немного поломав голову, я придумал, как реализовать такой эффект без применения таблиц. Получилось достаточно элегантно.

Суть в том, что мы охватываем блок с текстом в восемь блоков, у которых в качестве фона заданы элементы окантовки. Угловые элементы позиционируем по углам без повторения. А верхний, нижний и боковые позиционируем по стороном с повторением в соответствующем направлении.

Теперь код.

Таблица стилей:

.box {
	background: #C4BB8A url("background.gif") repeat;
	margin: 0; padding: 10px;
	width: 300px;
}
.box div {
    background: url("top.gif") repeat-x center top; }
.box div div {
    background: url("bottom.gif") repeat-x center bottom; }
.box div div div {
    background: url("left.gif") repeat-y left center; }
.box div div div div {
    background: url("right.gif") repeat-y right center; }
.box div div div div div {
    background: url("left-top.gif") no-repeat left top; }
.box div div div div div div {
    background: url("right-top.gif") no-repeat right top; }
.box div div div div div div div {
    background: url("left-bottom.gif") no-repeat left bottom; }
.box div div div div div div div div {
    background: url("right-bottom.gif") no-repeat right bottom; }
.box .content { padding: 15px; }

И пример HTML:

<div class="box">
<div><div><div><div><div><div><div><div>
<div class="content">
Здесь размещается текст который будет обёрнут графическими границами.
</div>
</div></div></div></div></div></div></div></div>
</div>