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

In this video tutorial we explain how to update a website by replacing obsolete HTML tags like FONT, CENTER, etc. with modern CSS styles. In order to achieve that we will be using Table2CSS in its HTML optimization mode. In this mode it processes HTML files by detecting deprecated HTML tags and replacing them with CSS rules. The following HTML tags are treated as deprecated and therefore replaced with CSS rules:

<b> <basefont> <big> <center> <cite> <code> <del> <dfn> <dir> <em> <font> <i> <ins> <kbd> <label> <menu> <s> <samp> <small> <strike> <strong> <tt> <u> <var> <xmp>

Please note that even though Table2CSS will replace all of these tags by default, it can be configured to leave some of these tags intact in case the user doesn't want to replace them.

Also in some cases Table2CSS may decide to leave some of the obsolete tags intact. This happens when Table2CSS decides that replacing the old tag would increase the size of the HTML file too much. Still it is possible to force the replacement of such tags from "Replace old tags" setting in the [Optimize] settings tab.

In order to replace the obsolete tags we follow these steps:

  1. First we start Table2CSS and activate the conversion wizard by clicking on the magic wand icon at the top.
  2. Then we tell the wizard that the processed page is a "URL of a web page located on a web server. Please note that if you want to process multiple pages at once, you should download the website to a local folder on your computer and then tell the wizard that you are processing a local folder on your computer.
  3. After clicking the "Next" button we will tell the wizard where is the output folder that will hold the optimized web page. The output folder should be empty initially. If you don't have an empty folder that you could use as an output folder, then you should click on the [Make new folder] button in order to create a new empty folder.
  4. After pressing "Next" again, the wizard will ask you about the mode in which you are going to use Table2CSS. We choose "Replace obsolete HTML tags only".
  5. After pressing "Next" once again, the wizard is almost finished. We are going to use the default optimization settings and that is why we leave the [Run conversion] box checked.
  6. After we click "Finish" the conversion process starts. Usually it takes about 1 minute to process a single page, but this number may vary based on the size and complexity of your HTML code.
  7. After the conversion process is over, Table2CSS shows some conversion statistics, as well as the source URLs that have been processed. Click on the web page URL in order to view the converted (resulting) page.

The sample web page used in this demo video has been designed for Prague In Winter.
We are using this HTML page with the kind permission of the aforementioned parties.
Copyright 2012 All rights reserved.

Click here to go back to the main page