Morph

The swiss army knife of Joomla template frameworks.

Free Download

Documentation

  • Banner

Using tables for tabular data

Tables are to this day still one of the most abused html tags. For years web designers have used to tables to incorrectly layout their web pages and as a result of this, using tables is often frowned upon in the industry. That said, tables still have their place, yup you guessed it, to display tabular data. Below are some examples of Morph's built in table styling. Use with caution ;)

Default Joomla Table Style

The below table is the default way that tables generated by Joomla or 3rd party components and / or modules will look. Examples of this are on the weblinks page, or newsfeeds page within the default Joomla demo content.

Section Table Header Author Hits
Change is inevitable, except from a vending machine. Administrator 8
Error, no keyboard. Press F1 to continue. Administrator 6
Why do psychics have to ask you for your name? Administrator 6
Why is abbreviation such a long word? Administrator 8
Plan to be spontaneous, tomorrow. Administrator 10

Code:{code}

Section Table Header Author Hits
Change is inevitable, except from a vending machine. Administrator 8
Error, no keyboard. Press F1 to continue. Administrator 6
Why do psychics have to ask you for your name? Administrator 6
Why is abbreviation such a long word? Administrator 8
Plan to be spontaneous, tomorrow. Administrator 10

{/code}

Table with only table headers
Heading 1Heading 2Heading 3Heading 4Heading 5
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data

Code:{code}

Table with only table headers
Heading 1Heading 2Heading 3Heading 4Heading 5
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data

{/code}

Table with only row headers
Row Header1 Table Data Table Data Table Data Table Data Table Data
Row Header2 Table Data Table Data Table Data Table Data Table Data
Row Header3 Table Data Table Data Table Data Table Data Table Data
Row Header4 Table Data Table Data Table Data Table Data Table Data

Code:{code}

Table with only row headers
Row Header1 Table Data Table Data Table Data Table Data Table Data
Row Header2 Table Data Table Data Table Data Table Data Table Data
Row Header3 Table Data Table Data Table Data Table Data Table Data
Row Header4 Table Data Table Data Table Data Table Data Table Data

{/code}

Table with both table and row headers
Heading 1Heading 2Heading 3Heading 4Heading 5
Row Header1 Table Data Table Data Table Data Table Data Table Data
Row Header2 Table Data Table Data Table Data Table Data Table Data
Row Header3 Table Data Table Data Table Data Table Data Table Data
Row Header4 Table Data Table Data Table Data Table Data Table Data

Code:{code}

Table with both table and row headers
Heading 1Heading 2Heading 3Heading 4Heading 5
Row Header1 Table Data Table Data Table Data Table Data Table Data
Row Header2 Table Data Table Data Table Data Table Data Table Data
Row Header3 Table Data Table Data Table Data Table Data Table Data
Row Header4 Table Data Table Data Table Data Table Data Table Data

{/code}

Saturday, 20 August 2011

Introduction to Morph's architecture

Morph's architecture is quite different from most traditional Joomla! templates, so it's important to you understand the role that each of the three key parts play, as it will help you grasp the other key concepts that Morph introduces.

Fork on Github