MediaWiki talk:Common.css

Wikitable classes

Could someone add the following CSS? It'll allow the use of the .wikitable (and .prettytable) class:

table.wikitable,
table.prettytable {
  margin: 1em 1em 1em 0;
  background: #f9f9f9;
  border: 1px #aaa solid;
  border-collapse: collapse;
}

table.wikitable th, table.wikitable td,
table.prettytable th, table.prettytable td {
  border: 1px #aaa solid;
  padding: 0.2em;
}

table.wikitable th,
table.prettytable th {
  background: #f2f2f2;
  text-align: center;
}

table.wikitable caption,
table.prettytable caption {
  margin-left: inherit;
  margin-right: inherit;
  font-weight: bold;
}

table.prettytable code,
table.wikitable code {
  background-color: transparent;
}

There is actually an alternative method. Wikia ACG has a Box CSS Class system which is a technique created in css which is meant to allow for styling of tables, messages, and many other types of elements. The key thing about it over use of wikitable being it's ability to be used in many different situations, and easily altered to do something different.

This is the class set which is commonly used which basically duplicates the styling of wikitable.

class="box table colored bordered innerbordered type-basic"

The box in there starts the use of the box class, the table defines the various margins, positioning, and other spacing for the element, the colored signals that the table should be colored, the bordered signals that an external border should be placed around the table, the innerbordered signals that the interior td's should have a border, and the type-basic give it the standard greyscale wikitable type coloring.

It can even be expanded to do more. If you want it to fill the width of the page you can add fill-horiz to it. And if you want to have a master td, with lighter td's then you can give the master td a code="mainheader". For something else pretty useful, if you want to have a table in wikitable style with left oriented headers at the left, then you can add cell-align-left or th-align-left and add class="mainheader" to the th headers up top which in turn will have a darker background than the left oriented th's along the left, and also be center aligned like they normally are.

There are a few dozen other uses for the Box class, including easily switching styles to different color schemes, and various other types of element styling. ~NOTASTAFF Daniel Friesen-local (DanTMan, Nadir Seen Fire) ^(talk) Sep 25, 2007 _@ 00:45 ^(UTC)

Awesome, I didn't know that previously. I'll have to test it out (in case you're curious, I was wanting this added originally so I could remove most of the hardcoded CSS from the templates I was developing for user card lists (see my userpage for what I'm talking about)). --Dinoguy1000 ^What?_{I did it!} 01:05, 25 September 2007 (UTC)