Common UI Elements

Abstract

This document standardizes the HTML output format of common elements like table listings, so designers can create one set of styles, and developers can create markup which will be automatically styled.

Status

This document is under review - in Deki WIki 8.05, we will first align all CSS styles to read these style guidelines. After 8.05, we will update all extensions/PHP output to match this table output.

Tables

All table generation in Deki Wiki utilizes this markup:

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="table">
	<colgroup>
		<col width="16"/>
		<col width="16"/>
		<col width=""/>
		<col width="80"/>
		<col width="145"/>
		<col width="115"/>
		<col width="75"/>
	</colgroup>
	<tr class="bg1">
		<th colspan="3" class="col1">File</th>
		<th class="col4">Size</th>
		<th class="col5">Date</th>
		<th class="col6">Attached by</th>
		<th class="col7">&nbsp;</th>
	</tr>
	<tr class="bg2">
		<td class="col1">filename.jpg</td>
		<td class="col2">&nbsp;</td>
		<td class="col3">&nbsp;</td>
		<td class="col4">106KB</td>
		<td class="col5">January 1st, 2008</td>
		<td class="col6">Admin</td>
		<td class="col7">&nbsp;</td>
	</tr>
</table>

Important notes:

• <table>:
  • The class attribute identifies this as a table which needs to be styled - by default, Deki Wiki leaves unclassed tables alone
  • The cellpadding, cellspacing, and border attributes must be explicitly set to 0
• <colgroup>: Colgroups should be used to define widths for the table cells
• <tr>: Each row has a class applied to it, as opposed to the individual cells
  
  • bg1 + bg2 are used instead of even + odd since the latter may  not be semantically correct when examining tables like files or recent changes, which "group" multiple items together. Furthermore, the former allow for the alternating against 3 colors as well as 2
• <td>:
  
  • Empty cells have forced space entries
  • Each column may have a class attribute which relates to the location in the table (although possible in CSS2, we do not yet make extensive use of CSS2 due to our support of IE6) - using a colspan attribute increments the table accordingly
• <thead>, <tbody>, <tfoot>: Although semantically correct, these aren't necessary for the styling of the document. Use at your own discretion.

<div class="pagination">
	<span class="prev">Prev</span>
	<span class="info">Page 1 of 1</span>
	<span class="next"><a href="#">Next</a></span>
</div>