HTML Structure
The following HTML markup represents a highly simplified version of the HTML output by pages when viewed with Theme Builder 3.x - if you're looking to go the extra mile with CSS customisation, this should help a lot:
<!DOCTYPE HTML PUBLIC "- "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
</head>
<body class="atb-body context-$context mode-$mode" id="document">
<table class="atb-shell">
<tr>
<td style="vertical-align:top;">
<div class="atb-p1"><div class="atb-p2"><div class="atb-p3">
<table class="layout atb-page">
<tbody>
<!-- headings region -->
<tr>
<td class="layout atb-upper">
<div class="atb-u1"><div class="atb-u2">
<table>
<tr>
<td id="header" class="layout atb-header">### header ###</td>
</tr>
<tr>
<td id="menu" class="layout atb-menu">### menu ###</td>
</tr>
<tr>
<td id="navigation" class="layout atb-navigation">### navigation ###</td>
</tr>
</table>
</div></div>
</td>
</tr>
<!-- end of headings region -->
<!-- central region -->
<tr>
<td class="layout atb-lower">
<div class="atb-l1"><div class="atb-l2">
<table>
<tr class="layout">
<!-- left sidebar -->
<td id="leftSidebar" class="layout atb-sidebar atb-leftSidebar">
<div>### lsb ###</div>
</td>
<td id="leftSidebar-slider" class="layout atb-slider atb-leftslider noselect">
<img class="layout atb-slider-img atb-leftslider-img">
</td>
<!-- end of left sidebar -->
<!-- page title -->
<td valign="top" id="title" class="atb-title">
### title ###
</td>
<!-- end of page title -->
<!-- right sidebar -->
<td id="rightSidebar-slider" class="layout atb-slider atb-rightslider noselect">
<img class="layout atb-slider-img atb-rightslider-img">
</td>
<td id="rightSidebar" class="layout atb-sidebar atb-rightSidebar">
<div>### rsb ###</div>
</td>
<!-- end of right sidebar -->
</tr>
<tr class="layout content-row">
<td id="content" class="layout atb-content">
<!-- Confluence output -->
<div id="actionerrors" class="actionerrors"></div>
<table>
<tr>
<td valign="top" class="pagebody">
<table style="clear: both">
<tr>
<td class="pagecontent" valign="top">
<div class="wiki-content">### content ###</div>
### trackback rdf ###
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end of Confluence output -->
</td>
</tr>
<!-- footnotes section -->
<tr>
<td id="footnote" class="layout atb-footnote">
<div>### footnotes ###</div>
</td>
</tr>
<!-- end of footnotes section -->
</table>
</div></div>
</td>
</tr>
<tr>
<td id="footer" class="layout atb-footer">
<div>### footer ###</div>
</td>
</tr>
<!-- end of central region -->
</tbody>
</table>
</div></div></div>
</td>
</tr>
<tr>
<td id="poweredby" align="center" class="poweredby smalltext">### powered by ###</td>
</tr>
</table>
<div id="breadcrumb.data" style="display:none">### breaadcrumb html ###</div>
</body>
</html>
FAQs
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!
Added by