Difference between revisions of "Website/Going Tableless"

From Apache OpenOffice Wiki
Jump to: navigation, search
(New page: The OpenOffice.org website currently uses a table (#main) to encapsulate its main content and separate the left hand navigation (#navcol) from the body (#bodycol). [http://sitening.com/blo...)
 
Line 1: Line 1:
The OpenOffice.org website currently uses a table (#main) to encapsulate its main content and separate the left hand navigation (#navcol) from the body (#bodycol). [http://sitening.com/blog/going-tableless-why-css-should-be-used-for-layouts/ This is not good web design practice]. We want to make all OOo pages tableless by default (i.e., any tables should be within #bodycol)
+
The OpenOffice.org website currently uses a table-based layout: the table #main, which contains the columns #navcol (left hand navigation area), #midcol (main body) and for My Pages, #communitycol. Each of these columns contains a div-based wrapper; #navcolumn, #bodycol and #rightcol (respectively).
  
'''This will not affect any other tables!''' e.g. IssueZilla will continue to use tables to display issue data.
+
Although most of OpenOffice.org's pages are tableless (i.e., they have no tables within #midcol), the CollabNet template imposes the #main table on all OOo pages. [http://sitening.com/blog/going-tableless-why-css-should-be-used-for-layouts/ This is not good web design practice], and we can accomplish the same thing using just divs while simplifying the layout at the same time and making it more future-proof.
  
== Going Tableless ==
+
'''Please note: This will not affect any tables other than #main!''' If any of your pages contain tables (e.g. [http://projects.openoffice.org/native-lang.html The Native Language Confederation Project page]), they will not be changed at all. For example, IssueZilla will continue to use tables to display issue data.
  
... will probably be done by project leads opting in. More info soon.
+
== The process ==
 +
 
 +
This section will detail how project leads can transition to the tableless layout.  
  
 
== Tableless Projects ==
 
== Tableless Projects ==
Line 13: Line 15:
 
* [http://education.openoffice.org Education]
 
* [http://education.openoffice.org Education]
 
* [http://bizdev.openoffice.org Biz Dev]
 
* [http://bizdev.openoffice.org Biz Dev]
 +
 +
== Structural Changes ==
 +
 +
The images below allow you to compare the existing layout (skeleton) with the proposed layout.
 +
 +
:[[Image:OOo-Website-Skeleton-Table-Based.png|left|thumb|Existing, table-based layout]]
 +
:[[Image:OOo-Website-Skeleton-Tableless.png|left|thumb|Proposed tableless layout]]

Revision as of 03:10, 7 December 2008

The OpenOffice.org website currently uses a table-based layout: the table #main, which contains the columns #navcol (left hand navigation area), #midcol (main body) and for My Pages, #communitycol. Each of these columns contains a div-based wrapper; #navcolumn, #bodycol and #rightcol (respectively).

Although most of OpenOffice.org's pages are tableless (i.e., they have no tables within #midcol), the CollabNet template imposes the #main table on all OOo pages. This is not good web design practice, and we can accomplish the same thing using just divs while simplifying the layout at the same time and making it more future-proof.

Please note: This will not affect any tables other than #main! If any of your pages contain tables (e.g. The Native Language Confederation Project page), they will not be changed at all. For example, IssueZilla will continue to use tables to display issue data.

The process

This section will detail how project leads can transition to the tableless layout.

Tableless Projects

The following projects have moved to a tableless layout.

Structural Changes

The images below allow you to compare the existing layout (skeleton) with the proposed layout.

Existing, table-based layout
Proposed tableless layout
Personal tools