Forms and Table CSS



I recently wrote two YUI Gallery modules to make it easy for developers to style form and table elements.

Even though these live on the YUI Gallery, you don’t have to use YUI to pull these CSS files in. They work on any page and are just triggered off class names.

Tables CSS

Make your tables look pretty with YUI Tables CSS. View the Github repo to view the source and file issues.

Features

  • Default Table
  • Bordered Table
  • Striped Table
  • Plain Table
  • Works in IE6+, Chrome, FF, Safari, iOS and Android
  • 100% CSS pulled from Yahoo CDN

Forms CSS

Similarly, use YUI Forms CSS to make it trivial to style and layout your web forms. Here’s the Github repo.

Features

  • Default Form
  • Multi-column Form
  • Inline Form
  • Grouped Inputs (a la iOS)
  • Input Sizing
  • Invalid, disabled, and rounded inputs
  • Cross browser fixes for selects, and checkboxes
  • Works in IE6+, Chrome, FF, Safari, iOS and Android
  • 100% CSS pulled from Yahoo CDN

Get Started

To make it easy for you, here’s what you need to add to your page:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/gallery-2013.01.09-23-24/build/gallerycss-csstable/gallerycss-csstable.css">

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/gallery-2013.01.09-23-24/build/gallerycss-cssform/gallerycss-cssform.css">

I tried to make the styles neutral enough that they go with any design. The CSS files are really tiny too, so try it out and let me know what you think.