Main Page | Recent changes | View source | Page history

Printable version | Disclaimers | Privacy policy

Not logged in
Log in | Help
 

sl.Wiki:Special CSS Styles for Tables

From sl.Wiki

Please keep thoriwng these posts up they help tons.

Contents


sl.wiki has some special CSS styles for tables, so you don't need to pollute the wiki-code with inline CSS styles.

sl-gray

This styles has headings with gray background, normal table cells have white background - all with black textcolor. For headings with style top the text is always center-aligned, for headings with style left the heading texts are aligned at the top-left. Use the styles top-pre resp. left-pre to prevent line breaks or to add intended line breaks in headings.

Example Result
Headings top side
{|class="sl-gray"
 !class="top"|Heading 1
 !class="top"|Heading 2
 |-
 |Text 1
 |Text 2
 |}
Heading 1 Heading 2
Lorem ipsum sea eu dolore nemore. Vivendum lobortis te nam, vis epicuri praesent conceptam an, ad mei probatus reprehendunt. An qui lucilius adolescens, ex mea kasd brute apeirian, ne qui iudicabit intellegebat. Laudem moderatius ut sed, ea has esse tamquam.

Graeci commune qui eu, mea id dico omittantur. His id nostro repudiandae, mollis cetero regione mei in. Ocurreret definitionem at cum, et his fabulas convenire, no est dicunt referrentur. Eu eos inani facilis, mei simul postea deserunt ut, his graece graecis dissentiunt ne.

Lorem ipsum sea eu dolore nemore. Vivendum lobortis te nam, vis epicuri praesent conceptam an, ad mei probatus reprehendunt. An qui lucilius adolescens, ex mea kasd brute apeirian, ne qui iudicabit intellegebat. Laudem moderatius ut sed, ea has esse tamquam.

Graeci commune qui eu, mea id dico omittantur. His id nostro repudiandae, mollis cetero regione mei in. Ocurreret definitionem at cum, et his fabulas convenire, no est dicunt referrentur. Eu eos inani facilis, mei simul postea deserunt ut, his graece graecis dissentiunt ne.

Headings left side
{|class="sl-gray"
 !class="left"|Heading 1
 |Text 1
 |-
 !class="left"|Heading 2
 |Text 2
 |}
Heading 1 Lorem ipsum sea eu dolore nemore. Vivendum lobortis te nam, vis epicuri praesent conceptam an, ad mei probatus reprehendunt. An qui lucilius adolescens, ex mea kasd brute apeirian, ne qui iudicabit intellegebat. Laudem moderatius ut sed, ea has esse tamquam.

Graeci commune qui eu, mea id dico omittantur. His id nostro repudiandae, mollis cetero regione mei in. Ocurreret definitionem at cum, et his fabulas convenire, no est dicunt referrentur. Eu eos inani facilis, mei simul postea deserunt ut, his graece graecis dissentiunt ne.

Heading 2 Lorem ipsum sea eu dolore nemore. Vivendum lobortis te nam, vis epicuri praesent conceptam an, ad mei probatus reprehendunt. An qui lucilius adolescens, ex mea kasd brute apeirian, ne qui iudicabit intellegebat. Laudem moderatius ut sed, ea has esse tamquam.

Graeci commune qui eu, mea id dico omittantur. His id nostro repudiandae, mollis cetero regione mei in. Ocurreret definitionem at cum, et his fabulas convenire, no est dicunt referrentur. Eu eos inani facilis, mei simul postea deserunt ut, his graece graecis dissentiunt ne.

Headings top and left side
{|class="sl-gray"
 !class="left"|Heading 1
 !class="top"|Heading 2
 |-
 !class="left"|Heading 3
 |Text
 |}
Heading 1 Heading 2
Heading 3 Lorem ipsum sea eu dolore nemore. Vivendum lobortis te nam, vis epicuri praesent conceptam an, ad mei probatus reprehendunt. An qui lucilius adolescens, ex mea kasd brute apeirian, ne qui iudicabit intellegebat. Laudem moderatius ut sed, ea has esse tamquam.

Graeci commune qui eu, mea id dico omittantur. His id nostro repudiandae, mollis cetero regione mei in. Ocurreret definitionem at cum, et his fabulas convenire, no est dicunt referrentur. Eu eos inani facilis, mei simul postea deserunt ut, his graece graecis dissentiunt ne.

You can prevent line breaks resp. add intended line breaks in headings by using the styles top-pre resp. left-pre.
{|class="sl-gray"
 !class="left-pre"|Heading 1
 !class="top-pre"|Heading
2
 |-
 !class="left-pre"|Heading 3
 |Text
 |}
Heading 1 Heading

2

Heading 3 Lorem ipsum sea eu dolore nemore. Vivendum lobortis te nam, vis epicuri praesent conceptam an, ad mei probatus reprehendunt. An qui lucilius adolescens, ex mea kasd brute apeirian, ne qui iudicabit intellegebat. Laudem moderatius ut sed, ea has esse tamquam.

Graeci commune qui eu, mea id dico omittantur. His id nostro repudiandae, mollis cetero regione mei in. Ocurreret definitionem at cum, et his fabulas convenire, no est dicunt referrentur. Eu eos inani facilis, mei simul postea deserunt ut, his graece graecis dissentiunt ne.

Of course the table headings can be combined with any other wiki syntax. See this example with images:
{|class="sl-gray"
 !class="left-pre"|Heading [[Image:SL_Splatty_head.png]]
 !class="top-pre"|[[Image:SL_Splatty_head.png]]
Heading
 |-
 !class="left-pre"|[[Image:SL_Splatty_head.png]] Heading
 |Text
 |}
Heading SL Splatty head.png SL Splatty head.png

Heading

SL Splatty head.png Heading Lorem ipsum sea eu dolore nemore. Vivendum lobortis te nam, vis epicuri praesent conceptam an, ad mei probatus reprehendunt. An qui lucilius adolescens, ex mea kasd brute apeirian, ne qui iudicabit intellegebat. Laudem moderatius ut sed, ea has esse tamquam.

Graeci commune qui eu, mea id dico omittantur. His id nostro repudiandae, mollis cetero regione mei in. Ocurreret definitionem at cum, et his fabulas convenire, no est dicunt referrentur. Eu eos inani facilis, mei simul postea deserunt ut, his graece graecis dissentiunt ne.

You can also combine the table style with additional inline CSS-styles, though this is not recommended and should only be used in rare occasions.
{|class="sl-gray"
 !class="top" style="background:red"|Heading 1
 !class="top"|Heading 2
 |-
 |style="text-align:center"|Text 1
 |Text 2
 |}
Heading 1 Heading 2
Lorem ipsum sea eu dolore nemore. Vivendum lobortis te nam, vis epicuri praesent conceptam an, ad mei probatus reprehendunt. An qui lucilius adolescens, ex mea kasd brute apeirian, ne qui iudicabit intellegebat. Laudem moderatius ut sed, ea has esse tamquam.

Graeci commune qui eu, mea id dico omittantur. His id nostro repudiandae, mollis cetero regione mei in. Ocurreret definitionem at cum, et his fabulas convenire, no est dicunt referrentur. Eu eos inani facilis, mei simul postea deserunt ut, his graece graecis dissentiunt ne.

Lorem ipsum sea eu dolore nemore. Vivendum lobortis te nam, vis epicuri praesent conceptam an, ad mei probatus reprehendunt. An qui lucilius adolescens, ex mea kasd brute apeirian, ne qui iudicabit intellegebat. Laudem moderatius ut sed, ea has esse tamquam.

Graeci commune qui eu, mea id dico omittantur. His id nostro repudiandae, mollis cetero regione mei in. Ocurreret definitionem at cum, et his fabulas convenire, no est dicunt referrentur. Eu eos inani facilis, mei simul postea deserunt ut, his graece graecis dissentiunt ne.


More Examples

Example How does it look like
{|class="sl-gray"
 |-
 |Lorem
 |ipsum
 |dolor
 |-
 |sit
 |amet
 |consectetuer
 |-
 |adipiscing
 |elit
 |Morbi 
 |}
Lorem ipsum dolor
sit amet consectetuer
adipiscing elit Morbi
{|class="sl-gray"
 |-
 !Lorem
 !ipsum
 !dolor
 |-
 !sit
 |amet
 |consectetuer
 |-
 !adipiscing
 |elit
 |Morbi 
 |}
Lorem ipsum dolor
sit amet consectetuer
adipiscing elit Morbi
{|class="sl-gray"
 |-
 !class="top"|Lorem
 !class="top"|ipsum
 !class="top"|dolor
 |-
 !class="left"|sit
 |amet
 |consectetuer
 |-
 !class="left"|adipiscing
 |elit
 |Morbi 
 |}
Lorem ipsum dolor
sit amet consectetuer
adipiscing elit Morbi
{|class="sl-gray"
 |-
 !class="top"|Lorem
 !class="top"|ipsum
 !class="top"|dolor
 |-
 |sit
 |amet
 |consectetuer
 |-
 |adipiscing
 |elit
 |Morbi 
 |}
Lorem ipsum dolor
sit amet consectetuer
adipiscing elit Morbi
{|class="sl-gray"
 |-
 !class="left"|Lorem
 |ipsum
 |dolor
 |-
 !class="left"|sit
 |amet
 |consectetuer
 |-
 !class="left"|adipiscing
 |elit
 |Morbi 
 |}
Lorem ipsum dolor
sit amet consectetuer
adipiscing elit Morbi


Requests for additional styles

We may add new CSS-styles in the future. If you have any suggestions, please leave a message at the talk page.





Retrieved from "http://wiki.splatterladder.com/sl.Wiki:Special_CSS_Styles_for_Tables"

This page has been accessed 3,095 times. This page was last modified on 27 February 2008, at 13:52.


[Main Page]
Main Page
Community portal
Current events
Recent changes
Random page
sitesupport

View source
Discuss this page
Page history
What links here
Related changes

Special pages