导言
有许多不同的方法来做到这一点，许多不同意见应该如何去做。我有一个表使用展示我如何做到这一点。它本来可以做一个除法，我相信有些人会感觉更舒服的做一个除法，但我选择了一个表，主要是因为我觉得表是方便初学者认识和理解。
使用的Photoshop我建立了一个圆角矩形如此：
请确保您的宽度你正在寻找在继续之前，无论脉宽，因为你使这个矩形是要的宽度你的桌子。我已经小了，为了本教程，但地方之间的740和780像素是800 * 600好观众。
现在确认您的历史菜单中的Photoshop打开。如果不是按一下窗口中的菜单，并选择历史。现在选择剪裁工具和作物您的图片，以便您已经离开的顶端部分就座。您要删除一些灰色太多。
现在的历史工具栏上单击回到一个步骤时矩形面前的是剪裁。现在做同样的表格底部，并呼吁它bottomimage.jpg
在这一点上你可能会认为，我们可以开始与CSS和HTML编码，但在我们这样做可能是最好的开放的底部和顶部JPEG文件，并检查他们是相同的宽度（显而易见的原因） 。一旦你的幸福是对的编码。
好吧，这就是我开始的：
<body bgcolor="#FFFFFF">
<table width=”391px” align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
<tr><td>Top Row</td></tr>
<tr><td>Content Row</td></tr>
<tr><td>Bottom Row</td></tr>
</table>
</body>
网页颜色必须相同，背景颜色的形象，使圆角不会失去其作用。并设置了cellpadding和cellspacing为零。顶部和底部的图片会坐在你的桌子，改变这些设置将破坏它们是如何将出现。
的宽度表应该是相同的宽度先前创建的图像。在我的情况下，它的391个像素，但是很明显的变化，这无论大小的图像。
现在的样式表。您可以添加到样式表，并将它附加的网页，而是因为我们只能工作在一个页面上我已经添加到头节的网页。
<style>
.topimage{background-image:url(topimage.jpg);
background-repeat:no-repeat;
background-color:#FF7200;}
.bottomimage{background-image:url(bottomimage.jpg);
background-repeat:no-repeat;
background-color:#FF7200;}
.backcolor{background-color:#FF7200;}
</style>
一流的topimage显示topimage的jpeg但不能重复。有一点非常重要，这是一套，因为如果因为任何原因，您的地方在此内容的一部分，然后表的形象将重复一遍又一遍，直到达到理想的高度。与此设置这里就不再重复了，但使用背景颜色设置，以填补空间。
一流的backcolour将用于行的内容只填写该表，并完成效果。
回到现在的html ：
<body bgcolor="#FFFFFF">
<table width=”391px” align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
<tr><td height="22px" class="topimage"></td></tr>
<tr><td class="backcolor">Content Row</td></tr>
<tr><td height="20px" class="bottomimage"></td></tr>
</table>
</body>
正如您可以看到我已经添加了班级的有关行和增加了一个高度限制的顶部和底部行。这个问题的原因是因为目前这些行是空的，并在一些浏览器列外观的影响，因为它是空的。如果我是新增的内容（取决于有多少） ，我将删除诱惑的高度尺寸。
由于这应该是你的输出：
