View source
ID Name Email Status Comments
82576 Dolor Sit dolor-sit@nonumy.com SEA takimata accusam...
22208 Eirmod Magna eirmod-magna@nonumy.com SEA et sadipscing...
76871 Eirmod Voluptua eirmod-voluptua@clita.com DOLOR dolores dolores...
14943 Magna Clita magna-clita@Stet.com GUBERGREN kasd et...
52951 Gubergren Diam gubergren-diam@clita.com MAGNA dolor magna...
72823 Kasd No kasd-no@no.com EST Lorem consetetur...
4484 Eos Duo eos-duo@diam.com DIAM erat dolor...
5124 Aliquyam Invidunt aliquyam-invidunt@tempor.com REBUM diam labore...
62766 Elitr Sit elitr-sit@aliquyam.com MAGNA aliquyam At...
37007 Voluptua Justo voluptua-justo@Stet.com ALIQUYAM no aliquyam...

You actually have a lot of flexibility in how the table is displayed, but of course you should probably stay close to the defaults in most cases. You adjust the look of the table via two methods, 1) pass through table and column attributes, and 2) Style sheets which are described below.

Click through the above links to see different style examples of the same basic table. Most of the differences in appearance between the tables below are achieved via only stylesheet changes.

Html attributes

You can assign to the <display:table> tag any standard html attribute (es. cellspacing, cellpadding), and it will be included in the rendered table.

Likewise, you can assign to the <display:column> tag any standard html attribute and it will be included in any <td> tag of the rendered table. You can also specify a class to be used only for the column header (<th>) adding a headerClass attribute.

Note: the attribute styleClass used for the <table> and <column> tag in previous version of the taglibrary is deprecated in favor of the standard html class attribute.

Style Sheets

While attributes might be the most comfortable way to change the appearance of your table, using style sheets is more powerful. We use style sheets to make the header a dark color, make rows an alternate color, and set the fonts within the cells to a smaller version of verdana. As the <display:table> tag is drawing, it assigns the following class names to elements.

You can then create a style sheet and assign attributes such as font size, family, color, etc... to each of those class names and the table will be shown according to your styles.

classassigned to
oddassigned to the tr tag of all odd numbered data rows
evenassigned to the tr tag of all even numbered data rows
sortedassigned to the th tag of the sorted column
order1assigned to the th tag of the sorted column if sort order is ascending
order2assigned to the th tag of the sorted column if sort order is descending