How to Shim Text Around a Table in HTML

Step-by-Step Guide

1. 1

   Step 1: Strip any formatting styles

   For example: <table border="5" style="background-color: red;"> <tr> <td>table content</td> </tr> </table> Would Become: <table> <tr> <td>table content</td> </tr> </table>
2. 2

   Step 2: borders and colors from your table and record them.

   This is easy to do using any simple paint program.
   
   Using MS Paint:
   Open MS Paint and create a new image from the File->New menu.
   
   Paint the image with the background color of the page you will put the table in.
   
   Go to Image->Attributes menu item.
   
   Fill in the width and height of your shim image (usually, 1px by 1px will do).
   
   Usually you will make width and height equal.
   
   Save the image. ,, For example, if you want to create a spacing on the right side of the table, you will put the table in another table with one row containing two cells.
   
   The table will be added in the left cell and the image will be added to the right cell as follows: <table> <tr> <td> <table> <tr> <td>table content</td> </tr> </table> </td> <td> <img src="put_path_to_your_image" width="x" height="x" /> </td> </tr> </table> Where the the second table is:
   This is the original table and x inside the img tag is the number of pixels you want to leave as spacing. , The above example would become: <table> <tr> <td style="background-color: red; border-width: 5px;"> <table> <tr> <td>table content</td> </tr> </table> </td> <td> <img src="put_path_to_your_image" width="x" height="x" /> </td> </tr> </table> Sometimes the border will not work properly so you'll have to try to set some other styles as well. ,, Note how the most important properties to set for the images are width for horizontal spacing and height for vertical spacing.
3. 3

   Step 3: Create the pixel shim image.

4. 4

   Step 4: Upload the image to your web-server using the method you normally would use to upload files and record the path to the uploaded image.

5. 5

   Step 5: Put your table into another table's cell surrounding it with cells from all sides you want to create spacing on.

6. 6

   Step 6: Add the styling and border you striped in step 1 to the cell containing the original table.

7. 7

   Step 7: Adjust the outer table's properties to allow floating texts and objects on the side you desire using the style attribute.

8. 8

   Step 8: Use the following table as a guide for placing spacing in the four directions: <table> <tr> <td colspan="3"> <img src="shim_image_path.jpg" height="TOP_SPACING"/> </td> </tr> <tr>] <td> <img src="shim_image_path.jpg" width="LEFT_SPACING"/> </td> <td> ORIGINAL_TABLE_CODE </td> <td> <img src="shim_image_path.jpg" width="RIGHT_SPACING"/> </td> </tr> <tr> <td colspan="3"> <img src="shim_image_path.jpg" height="BOTTOM_SPACING"/> </td> </tr> </table> Where: TOP_SPACING

9. 9

   Step 9: LEFT_SPACING

10. 10

    Step 10: RIGHT_SPACING and BOTTOM_SPACING are all integers denoting the different spacings you want to place

11. 11

    Step 11: and ORIGINAL_TABLE_CODE the original code of your table after stripping any styling and

12. 12

    Step 12: especially

13. 13

    Step 13: borders.

Detailed Guide

About the Author