devxlogo

Using Images for Table Borders

Why Trust Us

This method consists of creating empty rows and columns where an image will show through around a central cell that will contain the table’s content.

To use an image as a table border:

  1. To begin, type:
     
  2. Making x the same thickness as the top border, type:
     
    3. Fill it with a non-breaking space. An empty table cell may not appear, which ensures that you will be able to see the cell.
  3. Type:
      
  4. Making x the same thickness as the left border, type:
      
  5. Making the content what you’d like to display in the table (anything
          Disclosure  
     devxblackblue
    About Our Editorial Process
    At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.
    See our full editorial policy.
    About Our Journalist
     
     Charlie Frank
     
     Charlie has over a decade of experience in website administration and technology management. As the site admin, he oversees all technical aspects of running a high-traffic online platform, ensuring optimal performance, security, and user experience.
      View Author 
     
       Show More  
     
                            




    6.  
  6. Making the image.gif the same image you want to use for the table border, type:
     BACKGROUND="image.gif" 
  7. To complete the cell and row, type:
      &;t; 
    8.  
  8. Using the same image as in step 3, type:
     
    		9.