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.
Does this replacement technique then somehow generate the css behind the new divs?
no it don’t add css automatically to it, you’ll have to code css yourself