When you place WebParts on your public website, then these WebParts are rendered in a HTML TABLE. This is because WebParts are placed in a WebPartZone and these are rendered with tables.
This behavior can be fixed with a ControlAdapter. Our ControlAdapter render the WebPartZone in a HTML DIV, if the user (logged-in or anonymous) is viewing the page. If the author edits the page, then the WebPartZone is rendered the "traditional" way. With this trick, we have a clean and modern HTML structure and the author have still all the (drag&drop-) functionality while editing the page.
Copy the following C# code in a file called AKS_WebPartZone_Adapter.cs and place it in the AppCode directory under your server root directory (like C:\Inetpub\wwwroot or C:\Inetpub\wwwroot\wss\VirtualDirectories\80).
Now you have to edit the compat.browser file which in the AppBrowser directory located in your server directory and add the following piece of code after the opening
This is absolutely brilliant thanks mate. Am surprised this has not been splashed around all the SharePoint blogs as I have been wrestlijng with this for a while.
For other people wanting to try this, the only things I had to change is that AppCode and AppBrowser have hyphens (App_Code) and also I had to create the App_Code folder
Thanks for this!
One question: although this solves the problem of WebPartZones' tables, this adapter doesn't replace the tables rendered by the Webpart's. Do you know a solution to solve this?
Thanks in advance!
If you want a clean solution, you have to write a control adapter for every web part. You could start with the AKS_Webparts_Super_Adapter.cs of the Accessibility Kit for SharePoint (http://aks.hisoftware.com/index.html). This web part adapter replaces all TABLE, TR, TD, etc. elements. The sample code could optimized and written more sophisticated with regular expressions to replace for example all TABLE and TR elements and replace the TDs with DIVs.
Great article, many thanks!
In order to remove table from WebPart set for SuppressWebPartChrome property true. In that way only one div wrapper will be generated without ms-WPBody css class.
You can also use ControlAdapter for WebPart custom rendering.