How to theme table inside vertical tabs? I have a simple test module:

function tabletabs_menu() {
  $items['tabletabs'] = array(
    'title' =&gt; 'Table Tabs',
    'page callback' =&gt; 'drupal_get_form',
    'page arguments' =&gt; array('tabletabs_form'),
    'file' =&gt; 'tabletabs.module',
    'access arguments' =&gt; array('admin'),
  );

  return $items;
}

function tabletabs_form($form, &amp;$form_state) {
  $form['tabs'] = array(
    '#type' =&gt; 'vertical_tabs',
    '1' =&gt; array (
      '#type' =&gt; 'fieldset',
      '#title' =&gt; 'Tab 1',
      'a' =&gt; array(
        'x' =&gt; array (
          '#markup' =&gt; '1-a-x',
        ),
        'y' =&gt; array (
          '#markup' =&gt; '1-a-y',
        ),
      ),
      'b' =&gt; array(
        'x' =&gt; array (
          '#markup' =&gt; '1-b-x',
        ),
        'y' =&gt; array (
          '#markup' =&gt; '1-b-y',
        ),
      ),
    ),
    '2' =&gt; array (
      '#type' =&gt; 'fieldset',
      '#title' =&gt; 'Tab 2',
      'a' =&gt; array(
        'x' =&gt; array (
          '#markup' =&gt; '2-a-x',
        ),
        'y' =&gt; array (
          '#markup' =&gt; '2-a-y',
        ),
      ),
      'b' =&gt; array(
        'x' =&gt; array (
          '#markup' =&gt; '2-b-x',
        ),
        'y' =&gt; array (
          '#markup' =&gt; '2-b-y',
        ),
      ),
    ),
  );
  return $form;
}


It gives me:


This is pretty much expected result. Now, if I add:

function tabletabs_theme() {
  return array(
    'tabletabs_form' =&gt; array(
      'render element' =&gt; 'form',
      'file' =&gt; 'tabletabs.module',
    ),
  );
}

function theme_tabletabs_form($variables) {
  $form = $variables['form'];
  $output = '';
  foreach ( element_children($form['tabs']) as $id_tab ) {
    if(is_int($id_tab)) {
      // Initialize the variable which will store our table rows.
      $rows = array();

      // Iterate over each element in our $form['tabs'] array.
      foreach ( element_children($form['tabs'][$id_tab]) as $id_row ) {
        $classes = array('');

        $rows[] = array(
          'data' =&gt; array(
            drupal_render($form['tabs'][$id_tab][$id_row]['x']),
            drupal_render($form['tabs'][$id_tab][$id_row]['y']),
          ),

          'class' =&gt; $classes,
        );
      }

      $header = array(t('x'), t('y'));

      $table_id = 'tabletabs';

      $output .= theme('table', array(
        'header' =&gt; $header,
        'rows' =&gt; $rows,
        'attributes' =&gt; array('id' =&gt; $table_id),
      ));
    }
  }  
  $output .= drupal_render_children($form);
  return $output;
}


this cannot work. I'm rendering tables before vertical tabs, so of course they appear before, too:


But how do I render them to appear inside vertical tabs instead? I'm sure I'm missing something little and obvious (once you know it).
Not sure if it's the right way to do, but you would create a new form element with the table, instead of adding a table directly.

function theme_tabletabs_form($variables) {

      // ....

      $header = array(t('x'), t('y'));

      // each ID has to be unique
      $table_id = 'tabletabs' . '-' . $id_tab;

      // create a new form element with the table
      $form['tabs'][$id_tab]['table']['#markup'] = theme('table', array(
        'header' =&gt; $header,
        'rows' =&gt; $rows,
        'attributes' =&gt; array('id' =&gt; $table_id),
      ));
    }
  }
  $output .= drupal_render_children($form);
  return $output;
}


Option #2:

function theme_tabletabs_form($variables) {

      // ....

      $header = array(t('x'), t('y'));

      // each ID has to be unique
      $table_id = 'tabletabs' . '-' . $id_tab;

      // set the table as a value of each vertical tab item
      $form['tabs'][$id_tab]['#value'] = theme('table', array(
        'header' =&gt; $header,
        'rows' =&gt; $rows,
        'attributes' =&gt; array('id' =&gt; $table_id),
      ));
    }
  }
  $output .= drupal_render_children($form);
  return $output;
}


This will give following output: