Site icon Nabtron

Convert Table to Div in dreamweaver using Regex

Nabtron

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.

Exit mobile version