Table2Clipboard and Expression Web

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. And 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.

Step 1: Click on the https://addons.mozilla.org/en-US/firefox/addon/1852/Table2Clipboard download link to download the addon. Choose 'Open with Firefox.'

Step 2: Click the 'Install Now' button and the add-on will be installed. You will need to Restart Firefox before you can use the add-on.

Step 3: Once installed, two menu items are added, one in 'Edit' menu and the other one on the 'context' menu. The item on Edit menu is always visible but grayed if no table cells are selected. The number indicates the number of tables on the page.

The item on context menu is visible only when table cells are selected. To select table cells you must hold down Control key and click on cells to copy. Shortcut key (Ctrl+Shift+C) is available and shown only on Edit menu,

Setting Table2Clipboard Options

NOTE: You may have to expand the size of the dialog box to see the Html attribute filters section.

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. 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 you 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