YUI Library Home

YUI Library Examples: DataTable Control: Skinning Model

DataTable Control: Skinning Model

This example demonstrates the CSS applied to an implementation of the DataTable control that uses the "Sam Skin". You can read more about the general approach to skinning YUI components in this in-depth article. Change any or all of the skin CSS (but not the core CSS) for a more customized look and feel.

Please note that as of version 2.6.0, all state-related CSS classes, such as "yui-dt-resizeable", "yui-dt-sortable", "yui-dt-first", or "yui-dt-odd" are now assigned directly on TH and TD elements, not on liner DIV elements.

Sample Code

DOM Overview:

Core CSS:

Skin CSS:

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

More DataTable Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings