Page History

The following HTML markup represents a highly simplified version of the HTML output by pages when viewed with Theme Builder 4.x - if you're looking to go the extra mile with CSS customisation, this should help a lot:

Code Block

<body class="atb-body context-$context mode-$mode" id="document">

    <table class="atb-shell" width="100%">
        <tr>
            <td style="vertical-align:top;">
                <div class="atb-p1">
                    <div class="atb-p2">
                        <div class="atb-p3">

                            <table class="layout atb-page" width="100%">
                                <tr>
                                    <td class="layout atb-leftAdbar">
                                        <div>
                                            Left Ad-Bar
                                        </div>
                                    </td>

                                    <td class="layout atb-upper">
                                        <div class="atb-u1">
                                            <div class="atb-u2">
                                                <table>
                                                    <tr>
                                                        <td id="header" class="layout atb-header" width="100%">
                                                           <div>
                                                              Header
                                                           </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="menu" class="layout atb-menu" width="100%">
                                                           <div>
                                                              Menu
                                                           </div>

                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="navigation" class="layout atb-navigation" width="100%">
                                                           <div>
                                                              Navigation
                                                           </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="layout atb-rightAdbar">
                                        <div>
                                            Right Ad-Bar
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="layout atb-lower">
                                        <div class="atb-l1">
                                            <div class="atb-l2">
                                                <table width="100%">
                                                    <tr class="layout">
                                                        <td id="leftSidebar" class="layout atb-sidebar atb-leftSidebar" rowspan="2">
                                                            <div>
                                                                Left Sidebar
                                                            </div>
                                                        </td>
                                                        <td id="leftSidebar-slider" class="layout atb-slider atb-leftslider noselect" rowspan="2">
                                                            <img class="layout atb-slider-img atb-leftslider-img">
                                                        </td>
                                                        <td class="atb-titlecontent">
                                                            <div id="title" class="atb-title">
                                                                 Title
                                                            </div>
                                                            <div id="content" class="layout atb-content"><div class="layout atb-contentdiv">
                                                                Confluence output
                                                            </div></div>
                                                        </td>
                                                        <td id="rightSidebar-slider" class="layout atb-slider atb-rightslider noselect" rowspan="2">
                                                            <img class="layout atb-slider-img atb-rightslider-img">
                                                        </td>
                                                        <td id="rightSidebar" class="layout atb-sidebar atb-rightSidebar" rowspan="2">
                                                            <div>
                                                                Right Sidebar
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="footnote" class="layout atb-footnote">
                                                            <div>
                                                                Footnotes
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <td id="footer" class="layout atb-footer">
                                        <div> Footer </div>
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td id="attribution" align="center" class="attribution"> powered by </td>
        </tr>
    </table>
</body>

FAQs

Expand

	Yarg! What's with all the table markup?
	Yarg! What's with all the table markup?

We had hoped to remove as many tables as possible in Theme Builder 3.0, however a number of factors prevented us from doing so:
Browser inconsistencies prevented us from making more extensive use of <div> elements
Vertical alignment is far easier in table cells - it's possible but deeply painful with <div> elements
We had to retain a high degree of backwards compatibility
There's not a lot we can do about the TWO tables output by Confluence in the content area without causing problems when Confluence is upgraded
Current <div> box models didn't provide the layout flexibility that we wanted and we also wanted to avoid using JavaScript to overcome height and positioning problems
We're going to keep looking for ways to simplify the markup, however with 2000+ customers in 55+ countries using a wide range of browsers and operating systems, it's somewhat tricky and will take a while before we find a reliable alternative to using nasty tables. If you have any suggestions, we'd love to hear them!

Page tree

Versions Compared

Old Version 1

New Version 2

Key

FAQs