Customize table with jquery <p>I want to design a customize table layout. For example after adding data my table is created. Now I am showing column name in one column and column data in another column, I want to add functionality if I drag one row to third column, Then column structure will be modified and that row will be added to new column.</p> <p>For example: This is my table: <a href="http://jsfiddle.net/x8L57md2/" rel="nofollow">jsfiddle.net/x8L57md2/</a></p> <p>code:- </p> <pre><code> &lt;tr&gt; &lt;td&gt;Name&lt;/td&gt; &lt;td&gt; Ankur &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Address&lt;/td&gt; &lt;td&gt;jaipur&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;State&lt;/td&gt; &lt;td&gt; Rajasthan&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Country&lt;/td&gt; &lt;td&gt;India&lt;/td&gt; &lt;/tr&gt; &lt;table&gt; </code></pre> <p>If I move state column to right side of ankur(name) then another table column will be created and append it to table with data.</p> <p>Like this: <a href="http://jsfiddle.net/ttzr2ezh/" rel="nofollow">jsfiddle.net/ttzr2ezh/</a></p> <p>code:-</p> <pre><code> &lt;table border="1"&gt; &lt;tr&gt; &lt;td&gt;Name&lt;/td&gt; &lt;td&gt; Ankur &lt;/td&gt; &lt;td&gt;State&lt;/td&gt; &lt;td&gt; Rajasthan&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Address&lt;/td&gt; &lt;td&gt;jaipur&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Country&lt;/td&gt; &lt;td&gt;India&lt;/td&gt; &lt;/tr&gt; &lt;table&gt; </code></pre>