1guywebdesign rambles on about open source technologies like joomla and wordpress.

just because you can, don’t.

As a sort of an ongoing “addendum” to one of my favorite articles on common web design mistakes I’ve compiled a few notes on things we joomla! developers should do, but commonly don’t…

code for keeps

DON’T style html Tables. While there are certainly valid instances where tabular data needs to be structured in html tables, there’s little (if any) need to hard code inline html declarations such as table widths, borders, cell padding or alignment within our joomla component or module code. INSTEAD use extensible html css hooks.

Use semantic table html declarations as well as w3c and 508 compliant code to allow users to “style” our components or modules to suite their needs.

• Use a unique id name to set global attributes for your component tables instead of hard coded html styles.
• Use unique classes to change or modify your table attributes on a table by table instance.
• Add a table summary for screen readers (and improved 508 compliance).

Example:
<table cellpadding="2" width="100%" border="1" bgcolor="red">
<tr>
<td></td>
</tr>
</table>

could be coded the same way with html and css to produce a semantic, user tweakable table element.

<table summary="dog food comparisons" class="report" id="myTable">
<tr>
<td></td>
</tr>
</table>

with an accompanying css stylesheet like;

table#myTable {border:0; margin:0 auto; width:100%;}
table#myTable td {display: table-cell; padding: 2px;}
table#myTable.report {background-color:#fafafa;}


would display your table output defined by your css stylesheet instead of buried, hard coded in your component code.

SUMMARY:

1. You only have to code the basic table id structure once, reusing the code for each instance of a table in your code and,
2. By adding a unique class, you can override, modify or change the look and layout of different tables throughout your code.
3. You give your users the ability to tweak, change -just the css- to reflect their website design, without getting their hands dirty digging around in your code.