[Main Page] Main Page | Recent changes | View source | Page history

Printable version | Disclaimers | Privacy policy | Latest revision

Not logged in
Log in | Help
 

sl.Wiki:Special CSS Styles for Tables

(Difference between revisions)

(sl-gray)
(sl-gray)
 
Line 139: Line 139:
 
  |}
 
  |}
  
 +
 +
=== More Examples ===
 +
 +
{|class="sl-gray"
 +
|-
 +
!class="top"|Example
 +
!class="top"|How does it look like
 +
|-
 +
|<pre><nowiki>
 +
{|class="sl-gray"
 +
|-
 +
|Lorem
 +
|ipsum
 +
|dolor
 +
|-
 +
|sit
 +
|amet
 +
|consectetuer
 +
|-
 +
|adipiscing
 +
|elit
 +
|Morbi
 +
|}
 +
</nowiki></pre>
 +
|
 +
{|class="sl-gray"
 +
|-
 +
|Lorem
 +
|ipsum
 +
|dolor
 +
|-
 +
|sit
 +
|amet
 +
|consectetuer
 +
|-
 +
|adipiscing
 +
|elit
 +
|Morbi
 +
|}
 +
|-
 +
|<pre><nowiki>
 +
{|class="sl-gray"
 +
|-
 +
!Lorem
 +
!ipsum
 +
!dolor
 +
|-
 +
!sit
 +
|amet
 +
|consectetuer
 +
|-
 +
!adipiscing
 +
|elit
 +
|Morbi
 +
|}
 +
</nowiki></pre>
 +
|
 +
{|class="sl-gray"
 +
|-
 +
!Lorem
 +
!ipsum
 +
!dolor
 +
|-
 +
!sit
 +
|amet
 +
|consectetuer
 +
|-
 +
!adipiscing
 +
|elit
 +
|Morbi
 +
|}
 +
|-
 +
|<pre><nowiki>
 +
{|class="sl-gray"
 +
|-
 +
!class="top"|Lorem
 +
!class="top"|ipsum
 +
!class="top"|dolor
 +
|-
 +
!class="left"|sit
 +
|amet
 +
|consectetuer
 +
|-
 +
!class="left"|adipiscing
 +
|elit
 +
|Morbi
 +
|}
 +
</nowiki></pre>
 +
|
 +
{|class="sl-gray"
 +
|-
 +
!class="top"|Lorem
 +
!class="top"|ipsum
 +
!class="top"|dolor
 +
|-
 +
!class="left"|sit
 +
|amet
 +
|consectetuer
 +
|-
 +
!class="left"|adipiscing
 +
|elit
 +
|Morbi
 +
|}
 +
|-
 +
|<pre><nowiki>
 +
{|class="sl-gray"
 +
|-
 +
!class="top"|Lorem
 +
!class="top"|ipsum
 +
!class="top"|dolor
 +
|-
 +
|sit
 +
|amet
 +
|consectetuer
 +
|-
 +
|adipiscing
 +
|elit
 +
|Morbi
 +
|}
 +
</nowiki></pre>
 +
|
 +
{|class="sl-gray"
 +
|-
 +
!class="top"|Lorem
 +
!class="top"|ipsum
 +
!class="top"|dolor
 +
|-
 +
|sit
 +
|amet
 +
|consectetuer
 +
|-
 +
|adipiscing
 +
|elit
 +
|Morbi
 +
|}
 +
|-
 +
|<pre><nowiki>
 +
{|class="sl-gray"
 +
|-
 +
!class="left"|Lorem
 +
|ipsum
 +
|dolor
 +
|-
 +
!class="left"|sit
 +
|amet
 +
|consectetuer
 +
|-
 +
!class="left"|adipiscing
 +
|elit
 +
|Morbi
 +
|}
 +
</nowiki></pre>
 +
|
 +
{|class="sl-gray"
 +
|-
 +
!class="left"|Lorem
 +
|ipsum
 +
|dolor
 +
|-
 +
!class="left"|sit
 +
|amet
 +
|consectetuer
 +
|-
 +
!class="left"|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.
  
 
{{Translation|sl.Wiki|n|en|Special CSS Styles for Tables}}
 
{{Translation|sl.Wiki|n|en|Special CSS Styles for Tables}}

Latest revision as of 13:52, 27 February 2008

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.