Table2CSS logo Table2CSS is a tool that can convert your table-based websites to tableless layouts, replace deprecated HTML tags with modern CSS and reformat your HTML code. Click here for more information

1. A short description of Table2CSS and its functionality

Table2CSS is an HTML processing tool that can do the following:

  • Optimize the HTML code by replacing the HTML tables with tableless HTML code.

  • Perform a generic optimization of the HTML code by merging identical styles and moving inline styles into embedded CSS or external CSS files.

  • Reformat the HTML code and make it easier to read and edit.

2. The usual conversion process

The usual conversion process goes as follows:

See this demo video which shows how to convert a regular web page.

3. Selecting input files and/or URLs

Table2CSS can convert multiple files and/or URLs during each run. When you click on the "Files" tab you will see a list of currently selected local files and URLs.

  • To add a single file or URL to the selection click on the [ADD FILE/URL]. For local files you can either click on the [SELECT] button and select the desired file in the "Open dialog" (recommended) or just type its pathname in the input field. For remote URLs you cannot select the URL from the Open dialog so you will have to type the URL inside the input field labelled "File or URL".

  • To add a multiple local files at once click on the [ADD DIRECTORY] button, then select the local directory where these files are located and click the [ADD] button. By default only files with extension .htm and .html are added to the selection. You can also add files with other extensions. To do so click the [ADD DIRECTORY] button and then type the desired file extensions in the "Extensions" field. Separate multiple extensions with a semi-column, e.g. tpl;templ;php;dat

Please note that you can also delete files/URLs from the list of selected files/URLs. To do so, click on an already selected file/URL in the list and then click on the red [X] button.

4. Selecting the output directory

To select the output directory, click on the "Files" tab and then click on the [SELECT] button next to the field labelled "Output directory". A dialog titled "Browse for folder" will open and will allow you to select a destination folder for the resulting HTML page(s) and their accompanying CSS files if any. Please note that in cases when you convert local files, the destination directory cannot be the same as the directory containing your original HTML files. We recommend a brand new and empty directory each time when you convert any files. When you browse for an output directory using the "Browse for folder" dialog, you can create a brand new directory by clicking on the "Make new folder" button. So if you don't have a new empty directory to hold the results from the conversion, we recommend you to create one using the "Make new directory" button.

5. Using the DOM viewer

The DOM viewer allows the user to view the document tree and to adjust individual settings of different HTML elements. In order to activate the DOM viewer the Enable conversion box must be checked and the option Use DOM viewer must be set to Yes or Ask. The DOM viewer window is opened after the page is loaded in the browser window but before the actual conversion takes place. The window displays the HTML element tree. In case the document tree is too big and does not fit in the DOM viewer window you can resize the DOM viewer window. To resize the DOM viewer grab the lower-right corner of the window with the mouse pointer and drag it.

You can select different HTML elements from the displayed DOM tree. Once an HTML element has been selected in the DOM viewer, the content box of that element will be highlighted by a flashing red rectangle in the browser window. In this respect the DOM viewer behaves like the DOM Inspector plugin for Firefox or the IE Dev Toolbar for Internet Explorer. So while navigating the DOM tree, also keep an eye on the web page opened by Table2CSS - the flashing red frame will show you which element of the web page you are accessing at the moment.

It is also possible to change the individual settings of some HTML elements in the DOM tree. To edit the settings of some element double click on it in the DOM tree and a popup window will open prompting you for new settings. As of now Table2CSS allows you to edit the settings for the following HTML elements:

Please note that if you want to make some table cell have a non-fixed height, you should set both the table cell and its parent table element to use a non-fixed-height by unchecking Fix box height in their individual settings. Additionally it is strongly recommended to set the layout of such tables to Floating since tables that use Absolute layouts do not work well with non-fixed-height boxes.

Once you are finished with the DOM viewer, click the CONTINUE button at the bottom of the DOM viewer window and the conversion process will continue as usual.

6. Options affecting the conversion of tables to tableless HTML and CSS code

When you click on the "Table" tab, the program displays all options that affect the conversion of tables to tableless code.

  • Enable conversion. If you enable this option tables will be converted to tableless code. The conversion is done by replacing the table elements with DIVs and some additional CSS markup. If this option is disabled, then conversion of tables to tableless code is disabled and Table2CSS will just read the input files and then will re-format them according to the general options.

  • Use DOM viewer. The DOM viewer allows you to view the DOM tree after the page has been loaded. It also allows you to change the layout type for each table individually and to specify fixed/non-fixed height for TABLE, TD and TH elements.

  • Layout type. The layout type is probably the most important setting which has important implications for the resulting HTML and CSS code. The are two layout types to choose from:

    • Absolute layout. The absolute layout is the more precise layout type. It results an HTML page which resembles the original page closely. Absolute layouts position inner table elements using CSS absolute positioning. This provides quite precise positioning which looks the same on every browser. The negative side of this precise positioning is that every table cell requires its own left and top positions as well as explicitly specified width and height. This causes Absolute layouts to generate more CSS properties and therefore larger CSS code than Floating layouts.

    • Floating layout. Floating layouts position table cells by floating them to the left. Cells from same row are stacked together by left-floating and then rows are terminated by empty DIV elements which clear the floating. Floating layouts require width and height attributes, but they do not need their top and left attributes to be specified explicitly. That is why floating layouts generate less CSS properties. Additionally floating layouts can be much more resistant to dynamic content which could change the cell height. In this case you can either disable the <Fix box heights> option or if there are some cells for which you need fixed box heights, then you can just edit the resulting CSS code manually and remove the height CSS properties for the cell, its row and its table.

    Please note that the Layout type setting is just a recommendation to Table2CSS for the layout mode to use. Even if you convert some page using a Floating layout, Table2CSS can convert some of the tables in that page using an Absolute layout. This is the case with tables which have cells spanning multiple rows, that is cells which have rowspan=N where N is some number greater than 1. Such tables cannot be used with a Floating layout, so Table2CSS always uses an Absolute layout when converting these tables.

  • Fix box heights. If you are using a Floating layout then you can set this option which will instruct Table2CSS to fix heights of boxes generated for table cells (this is the default setting). Or you can unset this option which will tell Table2CSS not to set any specific value for the boxes of table cells, table rows and tables themselves. When a box does not have any specific height, then it will shrink and expand based on the height of its content. This means that boxes without any fixed height are useful when you have table cells with dynamic content which may shrink and expand and you want the cell to shrink and expand along with the content.

  • Table style prefix. This setting tells Table2CSS what prefix to use when generating styles for DIVs corresponding to table elements (TABLE, TR, TD, TH, etc.) Table2CSS will append the table and cell indexes to the prefix separating them with hyphens. The style for the first table will be called ts-1 and its cell styles will be called ts-1-1, ts-1-2, ts-1-3, etc. The style for the second table will be called ts-2 and its cell styles will be called ts-2-1, ts-2-2, ts-2-3, etc. This means that table styles are named ts-X where X is the number of the table and cell styles are named ts-X-Y where X is the number of the table and Y is the number of the cell within this table.

  • Images to CSS. Turning this option on tells Table2CSS to try to move image elements from table cells into the CSS definitions for the corresponding cells. This means that the size of the HTML code is decreased while the size of the CSS code is increased. Please note that an images is moved to CSS only when that image is the only element inside its parent table cell.

  • Horizontal size units and vertical size units. After conversion, in most cases the resulting boxes have their widths and heights fixed to some specific value. You can choose between PX and EM units for the element dimensions. PX units give a better precision for the box sizes, while EM units cause the box to scale correspondingly when users change the default text size in their browser settings.

  • Horizontal and vertical percentages. If you enable this setting then Table2CSS will use percentages as width and height units for tables and cells which originally used percentages. Otherwise heights will be converted to absolute units. These options do not have effect on tables and cells which use absolute units from the beginning.

7. General options affecting the functionality of Table2CSS

When you click the "General" tab, the program displays all general options that affect the processing of HTML code even if you are not converting HTML tables but just cleaning up HTML code instead.

  • Force standards mode. Different document types (doctypes) force the browser to render web pages in different modes. There are two main modes:

    • Quirks mode: This is a backwards compatibility mode used to display pages designed for old web browsers.

    • Standards mode: This is the mode in which most modern web pages are displayed.

    Some CSS properties do not work well in quirks mode. For example centering of block content via CSS does not work well in quirks mode in Internet Explorer. On the other hand some web pages are specifically designed to be displayed in quirks mode so using standards compliant mode would cause these pages to look distorted. Quirks/standards mode is selected based mainly on the page doctype. This setting instructs the converter what to do when it sees a doctype that would switch the browser into quirks mode. Following values are supported:

    • Yes: Change the doctype of the converted page to the nearest doctype that would put the browser into standards mode.

    • No: Do not alter the page doctype.

    • Ask: Ask the user if the doctype should be changed to standards mode.

  • Style type. This setting allows you to choose the type of CSS styles that will be used for the DIVs resulted from the converted tables. Following style types are supported:

    • Embedded: Converted tables, rows and cells use a <style> element placed inside the page <head> tag.

    • External: Converted tables, rows and cells use an external stylesheet created by the converter. The external stylesheet is placed in the same directory and has the same name as the output HTML file but its extension is set to .css

    • Inline: Converted tables, rows and cells use inline style elements placed inside the corresponding <div> tags.

  • CSS file location. The URL path of your CSS file(s). This value is only used if you are converting with external CSS styles. It should be a URL path, either relative or absolute but without a URL scheme or authority. If you are converting without merging external CSS files, then relative URLs are treated as starting from the URL of the currently converted HTML file and absolute URLs start from the root of the website. When merging of external CSS files is enabled, then both relative and absolute URLs are treated as starting from the root of the HTML tree. The special tag {FILE} is recognized and replaced as follows: if merging of CSS files is not enabled, then it is replaced by the name of the currently converted HTML file without the filename extension. If CSS merging is enabled, the tag is replaced by ""combined"". Examples of valid CSS locations are ../images/{FILE}.css and /subdir/combined_file.

  • Merge external CSS files. Check this box if you want to merge the auto-generated external CSS content into a single file. Leave the box unchecked if you want to use a separate external CSS file for each input HTML file.

  • Collect inline styles. This option is only used if you have set your style type to External or Embedded. You can set this option to one of the following values:

    • All: All inline styles will be moved to Embedded or External CSS styles

    • Table and misc: Only CSS styles generated during conversion of tables to DIVs will be moved to embedded/external styles. This includes the CSS for table, row, cell tags as well as styles generated for any other elements during the conversion.

    • Table: Only CSS generated for table, row and cell tags will be moved into CSS rules.

  • Identical styles. Select what to do when two CSS styles have the same properties. Choosing . Choosing Group will leave the two styles separate but will group them together in the CSS definition.

    • Merge: Using this setting will result merging of all styles with equal properties into one style.

    • Group: Styles with identical properties will be left as separate names but they will share the same CSS definition, e.g.

      .gen-5, .gen-6 {
          width: 10px;
          margin-top: 20px;
      }

  • Generic style prefix. Enter the prefix that will be used to name generic CSS selectors. One place where generic CSS selectors are used is the for alignment of HTML elements during table-to-css conversion. Another place where generic CSS selector names are used is the collection of inline styles to embedded or external ones.

  • Allow duplicate styles. An existing CSS selector name may conflict with an automatically generated table or generic selector. This option specifies how such conflicts will be resolved. Following values are supported:

    • Yes: Ignore the conflict and create an HTML file with conflicting selectors.

    • No: Do not process files that have such conflicts.

    • Ask: For each file that has conflicts ask the user if that file should be processed.

    Please note that files with CSS selector conflicts most likely will not display correctly.

  • Preferred link type. This option allows you to choose the preferred HTTP link type that will be used in the HTML document. Following link types are supported:

    • Absolute: Converted documents will use absolute HREF and SRC links. Choosing this setting will generate larger HTML files.

    • Relative: Converted documents will use relative HREF and SRC links wherever possible. The links will be relative to the location of the source document. Choosing this option will generate smaller files, but you must make sure that the external files referenced in the resulting document are reachable via the generated relative paths. Also please note that even if you specify Relative links, if some link cannot be converted to relative it will remain absolute.

  • Copy page requisites: If you enable this setting then after an HTML file is converted, Table2CSS will also copy to the destination directory all images, sounds, CSS files, etc. that are necessary to display the page correctly.

  • Hint page width and height: Hint the resulting page width and height to the converter. These values are used by Table2CSS when it generates fixed layouts Please note that the specified values are advisory only and the resulting page may have a different width and/or height.

  • Initial delay. This field sets the number of seconds to wait after the page has loaded and before the start of the actual conversion. This time is given to the browser to re-flow the page in case it is required. If the converted page is distorted you may try increasing this value. Also this value can be useful if the page elements contain JavaScript code and you want to interact with it before the start of the conversion. Generally the useful range of delay values is from 0 to 10.

  • Allow scripting. If this option is enabled, the converter will allow execution of JavaScript and other scripting languages during the conversion process. It is recommended to leave this option disabled since JavaScript can alter the HTML code in unpredictable ways. However there may be cases when you will want to enable execution of scripts in order to get correct results. Please note that Table2CSS will preserve the contents of <script> tags inside your code even when scripting is disabled.

  • Code page. This setting allows you to select the code page (character encoding) used by the converted document. The default value of Autodetect instructs Table2CSS to autodetect the page encoding, but in cases when it autodetects the value incorrectly, you can force the correct character encoding using this setting.

  • Entitize symbols. If you enable this option, then characters that have corresponding ISO 8859-1 symbol entities will be converted to these symbol entities. Please note that only characters that have corresponding symbol entities are affected, ASCII entities and ISO 8859-1 character entities are not used. See http://www.w3schools.com/tags/ref_entities.asp for a complete list of ISO 8859-1 symbol entities.

  • Preserve script tags. If you enable this setting then Table2CSS will try to keep the ASP, JSP, PHP and Smarty scripting tags unchanged in the converted file. Please note that Table2CSS is best suited for conversion of pure HTML files without embedded server-side scripting. Even though Table2CSS tries as much as possible to keep such scripting tags unchanged, in some cases such tags can still be altered or just lost.

  • Format output. If this option is enabled, the converter will format the resulting HTML code so that it will be easier to maintain. Enabling this option results larger HTML files.

  • Line termination. This setting allows you to choose line termination type of the converted file. Following line termination types are supported:

    • DOS/Windows: This is the CRLF line termination used in DOS and Windows text files.

    • MAC: This is the CR line termination used in Macintosh text files.

    • UNIX: This is the LF line termination used in UNIX text files.

    Please note that choosing the incorrect line termination may cause the converted HTML source to look distorted in your text editor. This setting is enabled only if you have also enabled output formatting or use an external stylesheet.

8. Running Table2CSS from the command line

Table2CSS can be run from the command-line and do batch processing of one or more HTML files. To get a full description of the command-line syntax, open a command-line prompt and run:

table2css /?

Table2CSS will show a warning message complaining about the missing output directory and then will open a pop-up dialog showing the generic command-line syntax along with a description of each command-line option. Please note that most likely when running Table2CSS in batch mode from the command-line you will want to add --standards-mode yes or --standards-mode no to the command line options. This will instruct Table2CSS not to ask you whether you want the currently converted page to be switched to full standards mode. Also when running in command-line mode, there is one required option which should always be specified: --output-dir which tells Table2CSS the location of the directory where resulting files will be located.

9. Frequently asked questions

  • Can Table2CSS convert pages that use fluid (a.k.a liquid) layouts?

    Table2CSS has partial support for fluid (liquid) web page layouts. If you want to convert a web page that has non-fixed tables, you should enable the horizontal and vertical percentage options, which are disabled by default.

  • How can I configure Table2CSS to create external/embedded/inline styles?

    You can choose between external, embedded and inline styles by setting the style type option.

  • What are quirks, almost standard and full standards modes?

    These are web page rendering modes supported by most major browsers. The actual rendering mode is selected independently for each displayed page and it is determined by the value of the <DOCTYPE> tag at the beginning of HTML code. The quirks mode is a backwards compatibility mode used to display pages which were designed long time ago when there was no common standard for displaying web pages. Almost standard and fully standard modes are used to display pages that support modern standards. Pages converted by Table2CSS display best in Fully standards mode and that is why when Table2CSS always tries to change HTML code to display in Full standards mode. When Table2CSS comes upon a HTML page without a DOCTYPE tag or with a DOCTYPE which implies quirks or almost standards mode, it will ask you if you want to change the DOCTYPE to full standards mode. This behavior of Table2CSS can be changed by altering the force standards mode option.

  • How to convert templates (as opposed to plain HTML pages)?

    Table2CSS is a HTML conversion utility which means that it can only fluently handle plain HTML pages. Any pages which have non-standard HTML tags or tags which are not real HTML (for instance embedded PHP code), will have problems after the conversion. Nonetheless Table2CSS has some limited support for conversion of non-HTML tags and non-standard HTML tags. If you want to convert a page that contains such tags, you will need to enable the preserve script tags option. This option is disabled by default, so you will need to enable it explicitly.

  • After conversion all table cells have their heights fixed to some static value. How can I make some converted table cell to expand and shrink based on its inner content which is dynamic?

    In order to make some table cell resize vertically based on its content you will need to use the DOM viewer. Follow these steps when converting the HTML file:

    1. Enter the conversion URL as usual from the Add URL/file setting in the Files panel.

    2. Setup the output directory in the Files panel.

    3. Go to the Table panel and make sure that Fix box heights is checked (it should be checked by default, so unless you have changed it explicitly it should be already checked).

    4. Make sure that the Use DOM Viewer drop-down is set to Ask or Yes. It should be set to Ask by default so unless you have changed that option before, there is no need to modify it.

    5. Run the conversion process by hitting the CONVERT button.

    6. The converted page will load in the browser window and after that either the DOM viewer will open automatically or a popup will appear asking if you want to run the DOM Viewer. In the latter case answer Yes and the DOM viewer will open a new popup displaying the document tree with different HTML tags as nodes in that tree.

      To make some table cell have a non-fixed height, edit both the TD (or TH) element and the TABLE element which holds the TD (or TH) element. Uncheck the Fix height setting for the TABLE and TD (or TH) tags and also set the layout type for that table to Floating.

    7. After you have modified these settings, just click on the CONTINUE button and the conversion process will continue, using your updated settings that you have configured from the DOM viewer window.

    See this demo video which shows how to convert a page with non-fixed-height table cells.