Table2Clipboard and Expression Web

https://addons.mozilla.org/en-US/firefox/addon/table2clipboard-mod/

Expression Web creates standards compliant code and use Cascading Style Sheets (CSS) to separate the content from the presentation. If you have used tables in designing your website, especially data tables, they may be full of extra code that is not up to current web standards. Cleaning up that code can be a time consuming process.

There is an excellent tool available for Firefox users that can help you make the process less time consuming and less frustrating. Meet Table2Clipboard and the newest version has just been published and is ready for prime time. Also a special thank you to the developer who was willing to add the features I requested so it was again possible to paste clean tables into both FrontPage and Expression Web.

If you do NOT already have  installed on your system, you will need to download and install it BEFORE you can use this addon. 

Downloading and Installing Table2Clipboard

You must have Firefox open to download and install this program. (The screens you see may be slightly different depending on the version of Firefox you are using.)

Step 1: Click on  https://addons.mozilla.org/en-US/firefox/addon/table2clipboard-mod/    > Click  'Add to Firefox.'

Step 2: Click the 'Add' button in the permissions boxand the add-on will be installed. You MAY need to Restart Firefox before you can use the add-on.

Step 3: Once installed Table2Clipboard will appear on your right click menu.

The items on context menu are visible only when table cells are selected or your cursor is within a table. To select table cells you must hold down Control key and click on cells to copy. Shortcut key (Ctrl+C) is available to copy selected cells.

Setting Table2Clipboard Options

Select Add-ons (Ctrl+Shift+A) from the Tools menu to bring up the Add-ons page. Select Table2Clipboad Mod and left click of the three dots > Select Options.

Table2Clipboard allows the user to filter the HTML tags output, users can choose which attributes to include:

• Hyperlinks
• Images
• Styles
• HTML form tags (like <input />s, <button />s and so on)

Filter Attributes

The filters mentioned above work on tags not on attributes. It is possible to filter attributes, too.

Suppose you want to output only the attributes 'id' or a more fine grained filter that emits only the attribute 'src' but only for <img>s.

Filter can be specified in the HTML Settings Dialog using a special syntax.

<tag name>.[-]<attribute name>

Where

<tag name> can be '*' to indicate 'all tags' or use a valid tag name like 'img', 'td', 'body' and so on.

<attribute name> can be '*' to indicate 'all attributes' or use a valid attribute name like 'src', 'class', 'id'

To exclude an attribute is necessary to specify - (dash) before its name

Both tag and attribute names are case insensitive

Filter examples

Description	Filter Pattern
Exclude all attributes	*.-*
Exclude all attributes but leave image src and hyperlinks	*.-* img.src a.href
Exclude all attributes but leave image src, alt tags and hyperlinks	*.-* img.src img.alt a.href
Exclude align for <td/>, exclude bgcolor for all tags except for <td/>	td.-align td.bgcolor *.-bgcolor*.-*

NOTE: Relative hyperlinks are converted to absolute links when using Table2Clipboard. This could cause a problem for web editors like Expression Web or Dreamweaver when renaming files and folders within the program as absolute links are NOT updated. The image src attributes are converted to absolute url (when necessary).

Using Table2Clipboard

Step 1: Open the site that needs cleaning up in Firefox. Use any of these as an example if you do not have a table to use.

• example of a table that does NOT include hyperlinks.
• example of a table that has hyperlinks
• Page with Photos and Hyperlinks

Step 2: Set your Table2Clipboard Options and any filter attributes

Step 3: Do one of the following:

• Right click anywhere within the table and choose 'Copy whole table.'
• Hold down the CTRL key and select the cells in the table > Right click > 'Copy selected cells' OR 'Copy whole table.'

Step 4: Open  Expression Web with a new blank page > Right click > 'Paste'

• Example of a table that does NOT include hyperlinks CLEANED
• Example of a table that has hyperlinks  CLEANED
• Example of table with Photos and Hyperlinks CLEANED

Step 5 : Highlight the first row of cells > Right click > Cell Properties > Check Header Cell
This will change the <td> </td> to <th></th>

Step 6: To add a caption to the table, place the cursor within the table -  Table > Insert > Caption

Step 7: In Design View, highlight the text just before the table. Click on Code View and look for your selected text. After that, you should see the code for your table <table> After the word table, hit the space bar and type the word summary="....." 

Step 8: Add some styling to your table preferably by using an embedded or external style sheet. Validate your page.

Finished styled pages - View source to see the final html code and styling added.

• Example of a table that does NOT include hyperlinks CLEANED and STYLED
• Example of a table that has hyperlinks  CLEANED and STYLED
• Example of table with Photos and Hyperlinks CLEANED and STYLED

Table2Clipboard Attribute Filters wiki

Copyright © 2010 Pat Geary of Expression Web Tutorials and Templates, All Rights Reserved
Revised and Tested June 2010
Revised: July 2011
Revised: June 2020