How do I change theme for tables rendered with theme_table()?

Question

I'm willing to change look and feel of Drupal tables. I was building my own theme using Zen's STARTERKIT, and the current look and feel is not pretty.

How can I change template for tables? Specifically, I like the table theme being displayed in Administration theme/Admin panel. How do I use that theme for my tables?

Answer 1

These are the styles defined by the Seven theme for tables:

table {
  width: 100%;
  font-size: 0.923em;
  margin: 0 0 10px;
  border: 1px solid #bebfb9;
}
table td,
table th {
  vertical-align: middle;
  padding: 8px 10px;
  border: 0;
  color: #000;
}
tr.even,
tr.odd {
  border-width: 0 1px 0 1px;
  border-style: solid;
  border-color: #bebfb9;
  background: #f3f4ee;
}
tr.odd {
  background: #fff;
}
tr.drag {
  background: #fe7;
}
tr.drag-previous {
  background: #ffb;
}
table th {
  text-transform: uppercase;
  background: #e1e2dc;
  font-weight: normal;
  border-width: 1px;
  border-style: solid;
  border-color: #bebfb9;
  padding: 3px 10px;
}
table th.active {
  background: #bdbeb9;
}
table th a {
  display: block;
  position: relative;
}
table th.active a {
  padding: 0 25px 0 0; /* LTR */
}
table th.active img {
  position: absolute;
  top: 3px;
  right: 3px;
}
table td.active {
  background: #e9e9dd;
}
table tr.odd td.active {
  background: #f3f4ee;
}
table tr.selected td.active,
table tr.selected td {
  background: #ffc;
  border-color: #eeb;
}
table.system-status-report tr {
  border-bottom: 1px solid #ccc;
}
table.system-status-report tr.ok {
  color: #255b1e;
  background-color: #e5ffe2;
}
table.system-status-report tr.info {
  color: #040f37;
  background-color: #bdf;
}
table.system-status-report tr.warning {
  color: #840;
  background-color: #fffce5;
}
table.system-status-report tr.error {
  color: #8c2e0b;
  background-color: #fef5f1;
}
/**
 * Exception for webkit bug with the right border of the last cell
 * in some tables, since it's webkit only, we can use :last-child
 */
tr td:last-child {
  border-right: 1px solid #BEBFB9;
}

Drop that into your theme's CSS file (after removing any existing rules for tables) and your tables should look pretty much identical to those in the Seven theme. Obviously you can edit this 'till your heart's content.

Answer 2

I think that what you need is just to change the CSS styles used for the table, as Clive suggested. That would not change the output produced from theme('table'), but it would change how that output is rendered.

If you really want to change the output, because you want to add HTML tags to what normally output for the tables, you need to override the theme function. If THEMENAME is your theme's name, then you need to write the THEMENAME_table() function in the template.php file for your theme. you can look at the code of theme_table() as example of which code to write. Normally you want to add output, or slightly change the output, and in that case you use most of the code already used in theme_table().

In Drupal 7 there is another alternative, which is possible if what you want to do is alter the value of the variables passed to the theme function: Each theme function, even the ones not using a template, have a preprocess function. In this case, the variables used from the theme function are the following ones:

• $variables['header']
• $variables['rows']
• $variables['attributes']
• $variables['caption']
• $variables['colgroups']
• $variables['sticky']
• $variables['empty']

Writing code in a function called THEMENAME_preprocess_table() (with $variables as parameter), you can alter the value of those variables before they are passed to the theme function.

 

How can I change template for tables?

For the table theme function, there aren't template files involved; it is possible to use a template file in this case too, but you should write more code to gain few. I can report how to do this, but I would not suggest doing it.

 

How do I use that theme for my tables?

You just call the theme function with theme('table', $variables), where $variables is an array containing the values required from the theme function, which are:

• header: An array containing the table headers. Each element of the array can be either a localized string or an associative array with the following keys:
  • "data": The localized title of the table column.
  • "field": The database field represented in the table column (required if user is to be able to sort on this column).
  • "sort": A default sort order for this column ("asc" or "desc").
  • Any HTML attributes, such as "colspan", to apply to the column header cell.
• rows: An array of table rows. Every row is an array of cells, or an associative array with the following keys:
  • "data": an array of cells
  • Any HTML attributes, such as "class", to apply to the table row.
  • "no_striping": a boolean indicating that the row should receive no 'even / odd' styling. Defaults to FALSE.
• Each cell can be either a string or an associative array with the following keys:
  • "data": The string to display in the table cell.
  • "header": Indicates this cell is a header.
  • Any HTML attributes, such as "colspan", to apply to the table cell.

Answer 3

You could use everything the same as in the answer by Serjas, but adding class attribute:

First header

$header = array(
  array('data' => 'Servie Name', 'class' => array('my_class')), // you can add any html attributes or just add class atribute and then change table cell with css.
  array('data' => 'Number of Passengers', 'width' => '10%'),
);

Next rows

$rows = array(
  array('data' => $servie_name),
  array('data' => $pax),
);

Now you will get table

$table = theme('table',$header,$rows);

In the css file you can style table cell like:

.my_class { background-color: red; }

Answer 4

Almost all styling can be done with css, but lots may seems bit difficult to style cell width,cell class etc. Here is the code to do that using theme('table').

First header

$header = array(
  array('data' => 'Servie Name', 'width' => '35%', 'bgcolor' => '#000'), // you can add any html attributes.
  array('data' => 'Number of Passengers', 'width' => '10%'),
);

Next rows

$rows = array(
  array('data' => $servie_name),
  array('data' => $pax),
);

Now you will get table

$table = theme('table',$header,$rows);