GtkTableExample

The following code creates a table with four cells and three children; one child covers two cells. The children are packed using different parameters:

  GtkWidget* window;
  GtkWidget* button;
  GtkWidget* container;

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

  container = gtk_table_new(2, 2, FALSE);

  gtk_container_add(GTK_CONTAINER(window), container);

  gtk_window_set_title(GTK_WINDOW(window), "Table Attaching");

  gtk_container_set_border_width(GTK_CONTAINER(container), 10);

  /* This would be a bad idea in real code; but it lets us 
   * experiment with window resizing. 
   */
  gtk_window_set_policy(GTK_WINDOW(window), TRUE, TRUE, TRUE);

  gtk_signal_connect(GTK_OBJECT(window),
                     "delete_event",
                     GTK_SIGNAL_FUNC(delete_event_cb),
                     NULL);

  button = gtk_button_new_with_label("1. Doesn't shrink\nor expand");
  gtk_table_attach(GTK_TABLE(container),
                   button,
                   0, 1,
                   0, 1,
                   GTK_FILL,
                   GTK_FILL,
                   0, 
                   0);

  button = gtk_button_new_with_label("2. Expands and shrinks\nvertically");
  gtk_table_attach(GTK_TABLE(container),
                   button,
                   0, 1,
                   1, 2,
                   GTK_FILL,
                   GTK_FILL | GTK_EXPAND | GTK_SHRINK,
                   0, 
                   0);

  button = gtk_button_new_with_label("3. Expands and shrinks\nin both directions");
  gtk_table_attach(GTK_TABLE(container),
                   button,
                   1, 2,
                   0, 2,
                   GTK_FILL | GTK_EXPAND | GTK_SHRINK,
                   GTK_FILL | GTK_EXPAND | GTK_SHRINK,
                   0, 
                   0);

It's instructive to observe the resulting table as the window is resized. First, a quick summary of how the children are attached:

1. The first child will always receive its requested size; it neither expands nor shrinks.

2. The second child can expand and shrink only in the Y direction.

3. The third child can expand and shrink in either direction.

The window's natural size is shown in Figure 13; notice that some cells are given more space than the widgets inside them requested because table cells have to remain aligned. (Recall that a button with a label will request only enough space to display the entire label.) The GTK_FILL flag causes GtkTable to allocate extra space to the widgets themselves, instead of leaving blank padding around them.

Now imagine the user expands the window vertically; notice that extra space is given to the widgets with GTK_EXPAND turned on in the Y direction---namely widgets two and three---while the widget in the top-left corner remains unchanged. Figure 14 shows this state of affairs.

Next, imagine the user expanding the window horizontally; only child widget number three can expand horizontally. Figure 15 shows this.

Figure 16 shows the result if the user shrinks the table vertically, so that there isn't enough vertical space to give all the widgets their size requests. Child number two gets shortchanged, while child number one gets all the vertical space it needs.

Finally, Figure 17 shows the result if the user shrinks the table horizontally. Child number three gets the short end of the stick in this situation.

It's not a bad idea to try resizing your window like this whenever you're designing a layout, just to be sure something sane happens. The definition of "sane" varies with the exact widgets you've placed in the layout.