How to Use Images for Table Borders
You don't have to stick with a traditional table for your website. By implementing cascading style sheets, or CSS, you can customize your table's size, padding and background automatically or use an image for the table's border. You should use the same width size for the border and table in your CSS code. So if your table is 800 pixels, your border should be too. Increasing the border's padding also increases the thickness of the table's border. Decreasing it creates a thinner border.
Other People Are Reading
Instructions
-
-
1
Open your favorite text editor, such as Notepad. Select "File" and "Open" from the menu. The Open dialog box appears. Double-click the HTML file you want to modify.
-
2
Add the CSS code between the <HEAD> tags of your HTML file:
<style>
#custom_outline {
width:800px;
padding:5px;
background:url("your-image-file.jpg");
}
.custom_tab {
width:800px;
background:#FFF;
}
</style>
-
-
3
Replace the 800px width under the border and table with the actual width of the table you're creating. Change the filename of the image from your-image-file.jpg to the actual image you want to use. To change where the border displays on your table, go to the "custom_outline" style and replace padding:5px; with a different code. The following code displays the image border above and below the table:
padding-top:5px;
padding-bottom:5px;
-
4
Place your cursor between the opening and closing <BODY> tags where you want the customized table to go and insert the following code:
<div id="custom_outline">
<table class="custom_tab">
<tr>
<td>Your table's contents</td>
</tr>
</table>
</div>
-
5
Replace "Your table's contents" with the actual information you want displayed within your table.
-
6
Click "File" and "Save" from the menu to update your HTML file.
-
1
References
- Photo Credit border - rainbow image by Andrew Brown from Fotolia.com
