How to Create an Email Signature

Note: Before adding any new text, you will need to add a new row and/or column to the existing HTML table. Please check the Layout section for instructions.

1. In Sublime, locate the new <td> element you have created.
2. Place this code inside your <td> element:

   <span style="font-family:Arial, Helvetica, sans-serif;font-size:12.0px;font-style:normal;line-height:16px;font-weight:400;color:#000000;display:inline;">New Text</span>

3. Your updated code should look like this:

   <td>
     <span style="font-family:Arial, Helvetica, sans-serif;font-size:12.0px;font-style:normal;line-height:16px;font-weight:400;color:#000000;display:inline;">New Text</span>
   </td>

4. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
5. Head over to our Change Text section to make changes to your new text.

Changing Text

1. In Chrome, locate the text you wish to change and note it down.
2. In Sublime, press CTRL + F and type that text into the search bar that pops up, then click Find.
3. Once you have found the text you want to change, simply highlight it and type in the new text that will replace it.
4. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Changing Text Color

1. In Chrome, locate the text you wish to change, note it down, right-click on it and click Inspect.
2. In the Styles section, under element.style, you will see a CSS property called ‘color’ and there will be a color value assigned to it shown in a hexadecimal format (eg. #354052). Click on the colored box next to it to open the color picker and select the color you wish to change the text to. You will notice the color change on the text in your email signature as you change it in the color picker – this is helpful for selecting the right color.
3. Once you’ve selected the color, confirm it by pressing Enter on your keyboard. Note down the new hexadecimal color value.
4. In Sublime, press CTRL + F and type the text that you noted down earlier into the search bar that pops up, then click Find.
5. Once you have found the text, it should be inside an <span> or <a> (if hyperlinked) element which has a style attribute and some CSS properties inside it. Find the ‘color’ property and change the hexadecimal value for it to the one you noted down earlier.
6. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Changing Font

1. In Chrome, locate the text you wish to change, note it down, right-click on it and click Inspect.
2. Take a look through the list of web-safe fonts you could use and select one of them.
3. In the Styles section, under element.style, you will see a CSS property called ‘font-family’ and there will be a comma-separated value assigned to it (eg. Arial, Helvetica, sans-serif). Click on the value to edit it. Change the first part of the value for the primary font, the second part for the fallback font, and the third part for the generic family fallback font. So, if the value was “Arial, Helvetica, sans-serif” before, and you wanted to change the font to Tahoma, the new value would be “Tahoma, Helvetica, sans-serif”. You will notice the font change on the text in your email signature as you change it – this is helpful for selecting the right font.
4. Once you’ve selected the font, confirm it by pressing Enter on your keyboard. Note down the new font value.
5. In Sublime, press CTRL + F and type the text that you noted down earlier into the search bar that pops up, then click Find.
6. Once you have found the text, it should be inside an <span> or <a> (if hyperlinked) element which has a style attribute and some CSS properties inside it. Find the ‘font-family’ property and change the value for it to the one you noted down earlier.
7. To increase email client compatibility for your email signature, you should also change the same ‘font-family’ property for the parent <td> element, only if the <span> is the only element inside it and there aren’t others.
8. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Changing Font Size

1. In Chrome, locate the text you wish to change, note it down, right-click on it and click Inspect.
2. In the Styles section, under element.style, you will see a CSS property called ‘font-size’ and there will be a pixel value assigned to it (eg. 14.0px). Click on the value to manually type a new value into it, or press the up/down keys on your keyboard to increase/decrease font size. You will notice the font size change on the text in your email signature as you change it – this is helpful for selecting the right size font.
3. Once you’ve selected the font size, confirm it by pressing Enter on your keyboard. Note down the new font size value.
4. In Sublime, press CTRL + F and type the text that you noted down earlier into the search bar that pops up, then click Find.
5. Once you have found the text, it should be inside an <span> or <a> (if hyperlinked) element which has a style attribute and some CSS properties inside it. Find the ‘font-size’ property and change the value for it to the one you noted down earlier.
6. To increase email client compatibility for your email signature, you should also change the same ‘font-size’ property for the parent <td> element, only if the <span> is the only element inside it and there aren’t others.
7. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Changing Font Weight (Bold on/off)

1. In Chrome, locate the text you wish to change, note it down, right-click on it and click Inspect.
2. In the Styles section, under element.style, you will see a CSS property called ‘font-weight’ and there will be a number value assigned to it (eg. 400). Click on the value to manually type a new value into it.
   For normal weight, type ‘400’.
   For bold weight, type ‘700’.
   You will notice the font weight change on the text in your email signature as you change it – this is helpful for selecting the right font weight.
3. Once you’ve selected the font weight, confirm it by pressing Enter on your keyboard. Note down the new font weight value.
4. In Sublime, press CTRL + F and type the text that you noted down earlier into the search bar that pops up, then click Find.
5. Once you have found the text, it should be inside an <span> or <a> (if hyperlinked) element which has a style attribute and some CSS properties inside it. Find the ‘font-weight’ property and change the value for it to the one you noted down earlier.
6. To increase email client compatibility for your email signature, you should also change the same ‘font-weight’ property for the parent <td> element, only if the <span> is the only element inside it and there aren’t others.
7. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Changing Font Style (Italic on/off)

1. In Chrome, locate the text you wish to change, note it down, right-click on it and click Inspect.
2. In the Styles section, under element.style, you will see a CSS property called ‘font-style’ and there will be a value assigned to it (eg. normal). Click on the value to manually type a new value into it.
   For normal style, type ‘normal’.
   For italic style, type ‘italic’.
   You will notice the font style change on the text in your email signature as you change it – this is helpful for selecting the right font style.
3. Once you’ve selected the font style, confirm it by pressing Enter on your keyboard. Note down the new font style value.
4. In Sublime, press CTRL + F and type the text that you noted down earlier into the search bar that pops up, then click Find.
5. Once you have found the text, it should be inside an <span> or <a> (if hyperlinked) element which has a style attribute and some CSS properties inside it. Find the ‘font-style’ property and change the value for it to the one you noted down earlier.
6. To increase email client compatibility for your email signature, you should also change the same ‘font-style’ property for the parent <td> element, only if the <span> is the only element inside it and there aren’t others.
7. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

1. In Chrome, locate the text you wish to remove and note it down.
2. In Sublime, press CTRL + F and type that text into the search bar that pops up, then click Find.
3. Once you have found the text you want to remove, you will want to delete the entire <span> element together with the text you want to remove inside it, and if the text is hyperlinked, the <a> element too.
   For example:

   <span style="some-property:some-value">Text to Remove</span>

   Note: Removing the <span> and/or <a> element(s) won’t remove other table-related code such as the surrounding <td>, <tr>, <tbody>, and <table> elements that may no longer be needed. If you want to remove these, please follow the instructions in the Layout section.

4. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Note 1: Before adding a new image, you will need to add a new row and/or column to the existing HTML table. Please check the Layout section for instructions.

Note 2: You will first need to find a service to host your image on the internet. You can use your own web hosting company or a service like Google Drive for this. You will need a URL for your image in order to use it in your email signature.

1. Take note of the size of your new image in pixels (width x height).
2. In Sublime, locate the new <td> element you have created.
3. Place this code inside your <td> element:

   <img width="(1/3 of the noted new image width)" height="(1/3 of the noted new image height)" alt="image" border="0" src="(your image URL)">

4. Your updated code should look like this:

   <td>
     <img width="(1/3 of the noted new image width)" height="(1/3 of the noted new image height)" alt="image" border="0" src="(your image URL)">
   </td>

5. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
6. Head over to our Change an Image section if you need to make changes to your new image.

Changing an Image

Note: You will first need to find a service to host your image on the internet. You can use your own web hosting company or a service like Google Drive for this. You will need a URL for your image in order to use it in your email signature.

1. Take note of the size of your new image in pixels (width x height).
2. In Chrome, locate the image you wish to change, right-click on it and click Inspect.
3. In the Elements section, you will see the <img> element highlighted. Note down the URL value in the src attribute.
4. In Sublime, press CTRL + F and type that noted URL value into the search bar that pops up, then click Find.
5. Once you have found the <img> element you want to change, simply update the value in the src attribute to your new image URL.
6. If your new image is a different size from the old image, you will need to update the following attributes in the <img> element:

   width="(1/3 of the noted new image width)"
   height="(1/3 of the noted new image height)"

7. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Changing Image Size

1. In Chrome, locate the image you wish to change, right-click on it and click Inspect.
2. In the Elements section, you will see the <img> element highlighted. Note down the URL value in the src attribute.
3. The <img> element has height and width attributes. To change the image size, simply double-click on either value, type the new value in, and press Enter on your keyboard. However, you will want to update the height and width while maintaining the aspect ratio of the image. You can use an aspect ratio tool to calculate your new image dimensions based on the old image’s height and width.
4. Once you have worked out the new dimensions, change the height and width attribute values in the <img> element in Chrome to make sure it looks correct.
5. In Sublime, press CTRL + F and type the noted URL value into the search bar that pops up, then click Find.
6. Once you have found the <img> element you want to change, simply update the height and width attribute values to your newly calculated dimensions.
7. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

1. In Chrome, locate the image you wish to remove, right-click on it and click Inspect.
2. In the Elements section, you will see the <img> element highlighted. Note down the URL value in the src attribute.
3. In Sublime, press CTRL + F and type that URL into the search bar that pops up, then click Find.
4. Once you have found the image you want to remove, you will want to delete the whole <img> element.
   Note: Removing the <img> element won’t remove other table-related code such as the surrounding <td>, <tr>, <tbody>, and <table> elements which may no longer be needed. If you want to remove these, please follow the instructions in the Layout section.
5. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Note: Before adding a new separator, you will need to add a new row and/or column to the existing HTML table. Please check the Layout section for instructions.

1. In Sublime, locate the new <td> element you have created.
2. Add the following style attribute to your <td> element:
   For vertical separators:

   style="border-collapse:collapse;background-color:#e87021;width:2px;vertical-align:super;padding:0px!important;"

   For horizontal separators:

   style="border-collapse:collapse;background-color:#e87021;height:2px;padding:0px!important;"

3. Your updated code should look like this (for a vertical separator):

   <td style="border-collapse:collapse;background-color:#e87021;width:2px;vertical-align:super;padding:0px!important;"></td>

4. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
5. Head over to our Change a Separator section if you need to make changes to your new separator.

Changing Separator Color

1. In Chrome, locate the separator you wish to change, right-click on it and click Inspect.
2. In the Styles section, under element.style, you will see a CSS property called ‘background-color’ and there will be a color value assigned to it shown in a hexadecimal format (eg. #e87021). Note down the current hexadecimal color value and any other CSS properties or attributes around it to make it easier to find later.
   Click on the colored box next to it to open the color picker and select the color you wish to change the separator to. You will notice the color change on the separator in your email signature as you change it in the color picker – this is helpful for selecting the right color.
3. Once you’ve selected the color, confirm it by pressing Enter on your keyboard. Note down the new hexadecimal color value.
4. In Sublime, press CTRL + F and type in the old hexadecimal color value that you noted down earlier into the search bar that pops up, then click Find.
5. Once you have found the separator, it should be an <td> element with no child elements inside it, and it should have a style attribute and some CSS Properties inside it. Find the ‘background-color’ property and change the hexadecimal value for it to the new one you noted down earlier.
6. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Changing Separator Width/Height

1. In Chrome, locate the separator you wish to change, right-click on it and click Inspect.
2. In the Styles section, under element.style, you will see a CSS property called ‘background-color’ and there will be a color value assigned to it shown in a hexadecimal format (eg. #e87021). Note down that hexadecimal color value and any other CSS properties or attributes around it to make it easier to find later.
   You will also see a CSS Property called ‘width’ or ‘height’ and there will be a pixel value assigned to it (eg. 2px). Click on the value to manually type a new value into it, or press the up/down keys on your keyboard to increase/decrease the width or height. You will notice the width/height change on the separator in your email signature as you change it – this is helpful for selecting the right width/height.
3. Once you’ve selected the width/height, confirm it by pressing Enter on your keyboard. Note down the new height/width.
4. In Sublime, press CTRL + F and type in the hexadecimal color value that you noted down earlier into the search bar that pops up, then click Find.
5. Once you have found the separator, it should be an <td> element with no child elements inside it, and it should have a style attribute and some CSS properties inside it. Find the ‘width’ or ‘height’ property (whichever one you changed) and change the pixel value for it to the new one you noted down earlier.
6. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

1. In Chrome, locate the separator you wish to remove, right-click on it and click Inspect.
2. In the Styles section, under element.style, you will see a CSS property called ‘background-color’ and there will be a color value assigned to it shown in a hexadecimal format (eg. #e87021). Note down that hexadecimal color value.
3. In Sublime, press CTRL + F and type that hexadecimal color value into the search bar that pops up, then click Find.
4. Once you have found the separator you want to remove, you will want to delete the whole <td> element.
   Note: Removing the <td> element won’t remove other table-related code such as the surrounding <tr>, <tbody>, and <table> elements which may no longer be needed. If you want to remove these, please follow the instructions in the Layout section.
5. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Note: Before adding a new space, you will need to add a new row and/or column to the existing HTML table. Please check the Layout section for instructions.

1. In Sublime, locate the new <td> element you have created.
2. Add the following style attribute to your <td> element:
   For vertical space:

   style="border-collapse:collapse;padding-right:10px;"

   For horizontal space:

   style="border-collapse:collapse;padding-bottom:10px;"

3. Your updated code should look like this (for a vertical space):

   <td style="border-collapse:collapse;padding-right:10px;"></td>

4. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
5. Head over to our Change a Space section if you need to make changes to your new separator.

Changing Space Width/Height

1. In Chrome, locate the space you wish to change, right-click on it and click Inspect.
2. In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later.
   Click on the value to manually type a new value into it, or press the up/down keys on your keyboard to increase/decrease the width or height. You will notice the width/height of the space change in your email signature as you change it – this is helpful for selecting the right width/height.
3. Once you’ve selected the width/height, confirm it by pressing Enter on your keyboard. Note down the new height/width.
4. In Sublime, press CTRL + F and type in the old pixel value that you noted down earlier into the search bar that pops up, then click Find.
5. Once you have found the space, it should be an <td> element and it should have a style attribute and some CSS properties inside it. Find the ‘padding-right’ or ‘padding-bottom’ property (whichever one you changed) and change the pixel value for it to the new one you noted down earlier.
6. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

1. In Chrome, locate the space you wish to remove, right-click on it and click Inspect.
2. In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later.
3. In Sublime, press CTRL + F and type that pixel value into the search bar that pops up, then click Find.
4. Once you have found the space you want to remove, it should be an <td> element and it should have a style attribute and some CSS properties inside it.
   If the <td> element has a child element: Find the ‘padding-right’ or ‘padding-bottom’ CSS property (whichever one you want to remove) and remove the CSS property and the pixel value for it from the style attribute.
   If the <td> element has no child elements: You will want to delete the whole <td> element.
   Note: Removing the <td> element won’t remove other table-related code such as the surrounding <tr>, <tbody>, and <table> elements which may no longer be needed. If you want to remove these, please follow the instructions in the Layout section.
5. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Add a Text Hyperlink

1. In Chrome, locate the text you wish to add a hyperlink to and note it down.
2. In Sublime, press CTRL + F and type that text into the search bar that pops up, then click Find.
3. Once you have found the text, it should be inside an <span> element which has a style attribute and some CSS properties inside it.
4. Add the following <a> element surrounding the text, but inside the <span> element, and change the href attribute to your chosen hyperlink URL:

   <a target="_blank" rel="nofollow" href="https://www.example.com">YOUR TEXT</a>

5. Cut the style attribute and all the CSS properties from the <span> element and paste it into the <a> element.
6. Add the following CSS property and value to the style attribute of the <a> element:

   text-decoration:none;

7. Your updated code should look like this:

   <span>
     <a target="_blank" rel="nofollow" href="https://www.example.com" style="font-family:Arial, Helvetica, sans-serif;font-size:12.0px;font-style:normal;line-height:16px;font-weight:400;color:#000000;display:inline;text-decoration:none;">YOUR TEXT</a>
   </span>

8. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
9. Head over to our Change a Hyperlink section if you need to make changes to your new hyperlink.

Add an Image Hyperlink

1. In Chrome, locate the image you wish to add a hyperlink to, right-click on it and click Inspect.
2. In the Elements section, you will see the <img> element highlighted. Note down the URL value in the src attribute.
3. In Sublime, press CTRL + F and type that noted URL into the search bar that pops up, then click Find.
4. Add the following <a> element surrounding the <img> element, and change the href attribute to your chosen hyperlink URL:

   <a target="_blank" rel="nofollow" style="font-size:0px;line-height:0px;" href="https://www.example.com">YOUR IMG ELEMENT</a>

5. Your updated code should look like this:

   <a target="_blank" rel="nofollow" style="font-size:0px;line-height:0px;" href="https://www.example.com">
     <img width="<image width>" height="<image height>" alt="image" border="0" src="<your image URL>">
   </a>

6. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
7. Head over to our Change a Hyperlink section if you need to make changes to your new hyperlink.

Change a Text Hyperlink

Note: To change the visible text of a hyperlink, take a look at our Change Text section.

1. In Chrome, locate the text you wish to change the hyperlink for, right-click on it and click Inspect.
2. In the Elements section, you will see the <a> element highlighted. Note down the URL value in the href attribute.
3. In Sublime, press CTRL + F and type that URL value into the search bar that pops up, then click Find.
4. Once you have found the <a> element you want to change, simply update the value in the href attribute to your new URL.
5. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Change an Image Hyperlink

Note: To change the visible image of a hyperlink, take a look at our Change an Image section.

1. In Chrome, locate the image you wish to change the hyperlink for, right-click on it and click Inspect.
2. In the Elements section, you will see the <img> element highlighted. Look at the parent <a> element, and note down the URL value in the href attribute.
3. In Sublime, press CTRL + F and type that URL value into the search bar that pops up, then click Find.
4. Once you have found the <a> element you want to change, simply update the value in the href attribute to your new URL.
5. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Remove a Text Hyperlink

1. In Chrome, locate the text you wish to remove the hyperlink for, right-click on it and click Inspect.
2. In the Elements section, you will see the <a> element highlighted. Note down the URL value in the href attribute.
3. In Sublime, press CTRL + F and type that URL value into the search bar that pops up, then click Find.
4. Once you have found the <a> element you want to remove, add the following <span> element surrounding the text, but inside the <a> element:

   <span>YOUR TEXT</span>

5. Cut the style attribute and all the CSS properties from the <a> element and paste it into the <span> element.
6. Remove the following CSS property and value from the style attribute of the <span> element:

   text-decoration:none;

7. Your updated code should look like this:

   <a target="_blank" rel="nofollow" href="https://www.example.com">
     <span style="font-family:Arial, Helvetica, sans-serif;font-size:12.0px;font-style:normal;line-height:16px;font-weight:400;color:#000000;display:inline;">YOUR TEXT</span>
   </a>

8. Remove the <a> element’s opening and closing tags.
9. The code you should be left with is this:

   <span style="font-family:Arial, Helvetica, sans-serif;font-size:12.0px;font-style:normal;line-height:16px;font-weight:400;color:#000000;display:inline;">YOUR TEXT</span>

10. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Remove an Image Hyperlink

1. In Chrome, locate the image you wish to remove the hyperlink for, right-click on it and click Inspect.
2. In the Elements section, you will see the <img> element highlighted. Look at the parent <a> element, and note down the URL value in the href attribute.
3. In Sublime, press CTRL + F and type that noted URL into the search bar that pops up, then click Find.
4. Once you have found the <a> element you want to remove, simply remove the <a> element entirely (don’t forget to remove the closing tag). However, be sure not to remove the child <img> element, otherwise your image will not be visible anymore.
5. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

1. In Chrome, locate an empty area where you wish to add a new row, right-click on it and click Inspect.
2. In the Elements section, you should see a <td> element highlighted. If you don’t, you will need to locate the parent <td> element and click on it to highlight it.
3. You will need to note down any relevant information you can use to find that <td> element later in Sublime. If the highlighted <td> has:
   A <span> child element: Note down the text value inside the <span> element.
   A <img> child element: Note down the URL value in the href attribute in the <img> element.
   No child element: In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later.
4. In Sublime, press CTRL + F and type the noted value from the above step into the search bar that pops up, then click Find.
5. Once you have found the right <td> element, you will need to work your way down the document and locate the closing tag of the first parent <table> element.
   For example:

   <table>
     <tbody>
       <tr>
         <td>  <-- <td> element
         </td>  <-- <td> element
       </tr>
     </tbody>
   </table>  <-- closing tag of the first parent <table> element

   You want to insert your new row code (below) directly after the closing </table> tag.

6. To add a new row, add the following <table> element:

   <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
     <tbody>
       <tr>
       </tr>
     </tbody>
   </table>

7. Press CTRL + S to save in Sublime.
8. You will need to Add a Column inside your new row before you can add any images or text to it.

1. In Chrome, locate the row you wish to remove, right-click on it and click Inspect.
2. In the Elements section, you should see a <td> element highlighted. If you don’t, you will need to locate the parent <td> element and click on it to highlight it.
3. You will need to note down any relevant information you can use to find that <td> element later in Sublime. If the highlighted <td> has:
   A <span> child element: Note down the text value inside the <span> element.
   A <img> child element: Note down the URL value in the href attribute in the <img> element.
   No child element: In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later.
4. In Sublime, press CTRL + F and type the noted value from the above step into the search bar that pops up, then click Find.
5. Once you have found the right <td> element, you will need to work your way outwards and locate the opening and closing tags of the first parent <table> element.
   For example:

   <table>  <-- opening tag of the first parent <table> element
     <tbody>
       <tr>
         <td>  <-- <td> element
         </td>  <-- <td> element
       </tr>
     </tbody>
   </table>  <-- closing tag of the first parent <table> element

6. To remove a row, you will want to delete the whole <table> element from the opening tag to the closing tag, including everything inside it.
7. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.

Note: If you’ve just created a new row, you can skip to step 6.

1. In Chrome, locate an empty area where you wish to add a new column, right-click on it and click Inspect.
2. In the Elements section, you should see a <td> element highlighted. If you don’t, you will need to locate the parent <td> element and click on it to highlight it.
3. You will need to note down any relevant information you can use to find that <td> element later in Sublime. If the highlighted <td> has:
   A <span> child element: Note down the text value inside the <span> element.
   A <img> child element: Note down the URL value in the href attribute in the <img> element.
   No child element: In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later.
4. In Sublime, press CTRL + F and type the noted value from the above step into the search bar that pops up, then click Find.
5. Once you have found the right <td> element, you will need to locate the closing tag of that <td> element.
   For example:

   <td>  <-- opening tag of your highlighted <td> element
   </td>  <-- closing tag of your highlighted <td> element

   You want to insert your new column code (below) directly after the closing </td> tag.

6. To add a new column, add the following <td> element:

   <td style="border-collapse:collapse;line-height:0px;padding-right:10px;">
   </td>

7. Press CTRL + S to save in Sublime.
8. You can now Add Text, Add an Image, or Add a Separator inside your new column.

Note: If this is the last column in a row, you may want to Remove a Row instead.

1. In Chrome, locate the column you wish to remove, right-click on it and click Inspect.
2. In the Elements section, you should see a <td> element highlighted. If you don’t, you will need to locate the parent <td> element and click on it to highlight it.
3. You will need to note down any relevant information you can use to find that <td> element later in Sublime. If the highlighted <td> has:
   A <span> child element: Note down the text value inside the <span> element.
   A <img> child element: Note down the URL value in the href attribute in the <img> element.
   No child element: In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later.
4. In Sublime, press CTRL + F and type the noted value from the above step into the search bar that pops up, then click Find.
5. To remove a column, you will want to delete the whole <td> element from the opening tag to the closing tag, including everything inside it.
6. Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.