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 all of its tables and obsolete HTML tags like FONT, CENTER, etc. with optional DIV elements and modern CSS code.

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 you don't want to replace them. Additionally you can use the interactive DOM Viewer to specify which tables should be replaced and which ones should be left unchanged.

In order to replace the tables and 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 tables and obsolete HTML tags".
  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. At one point Table2CSS will ask us whether we want to run the DOM Viewer. It allows us to adjust the conversion options of individual tables and table cells. We choose not to, because we rely on the default conversion settings as configured by the wizard.
  8. 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