+44 (791) 5698 086

Convert Table to Div in dreamweaver using Regex

Tables can’t do various things which can be done using divs.

In this tutorial I will explain to you how to convert your table based structure into div based structure while giving unique id or class to each of those divs.

This can be done via search and replace too right? well there are few plus points if we do it using regex on dreamweaver (or any other program which supports regular expressions) specially giving attributes to div (id or class etc) as in this example.

Use Regex to convert Table to Div in dreamweaver

Initial code

So as an example, we will suppose that this is the table based code that we want to be converted to div based valid code:

<table><tr>
  <td>first div content</td>
  <td>second div content</td>
  <td>third div content</td>
  <td>fourth div content</td>
  <td>fifth div content</td>
</tr></table>

Search code

Now fire up the find and replace tool in dreamweaver by pressing ‘ctrl + f’ . In the find box enter this regex statement (don’t forget to click “regex” check box in find and replace tool) :

<table><tr>
  <td>([^<]*)</td>
  <td>([^<]*)</td>
  <td>([^<]*)</td>
  <td>([^<]*)</td>
  <td>([^<]*)</td>
</tr></table>

Replace code

Add this code in the replace with option box:

<div class="table"><div class="tr">
  <div class="td_1">$1</div>
  <div class="td_1">$2</div>
  <div class="td_1">$3</div>
  <div class="td_1">$4</div>
  <div class="td_1">$5</div>
</div></div>

Resulting replaced code

Our resulting replaced code will look like this:

<div class="table"><div class="tr">
  <div class="td_1">first div content</div>
  <div class="td_1">second div content</div>
  <div class="td_1">third div content</div>
  <div class="td_1">fourth div content</div>
  <div class="td_1">fifth div content</div>
</div></div>

Let me know if you get any issues or difficultly while converting table into div based structure to use css styles with it more efficiently.

3 Responses to Convert Table to Div in dreamweaver using Regex

  1. bob bingenheimer

    Does this replacement technique then somehow generate the css behind the new divs?

    • Dr. Nabeel

      no it don’t add css automatically to it, you’ll have to code css yourself

Leave a Reply

Your email address will not be published. Required fields are marked *

Who are we?

Nabtron team includes web, desktop software and mobile apps developers along with SEO professionals.

We are available 24 hours, 7 days a week. Contact us now for anything you need!

Join our mailing list

Lets become friend :) What's your name & email?