sl.Wiki:Special CSS Styles for Tables

From sl.Wiki

NOTE: This article is part of our sl.Wiki section.

1 sl-gray
2 More Examples
3 Requests for additional styles

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.

Headings left side

{|class="sl-gray"
 !class="left"|Heading 1
 |Text 1
 |-
 !class="left"|Heading 2
 |Text 2
 |}

Heading 1

Heading 2

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

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

Heading 3

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

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

[edit]

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 
 |}