[B! table][css] kistame228のブックマーク

jQuery HTML Table Toolbox - noupe

By Paul Andrew In the 15 years since the HTML table element was first incorporated into HTML 2.0, it has been on a constant roller coaster ride. Upon its introduction it was a revelation, it was a new way for web designers to present detailed data in structured tabular format, it made our life easier and we loved it. But as is the nature of web development, it was pushed further and further to do

kistame228 2010/04/14

リンク

テーブルを見やすく、使いやすくするためのアルティメットガイド

ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクションはじめにテーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単

kistame228 2010/03/01

リンク

CSS で table に斜線を引く方法

CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。斜線（border）を適用する要素の前に   を設定。  がなかったり、要素の後方に  があると、th のスタイルが隠れてしまう。クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t

kistame228 2009/10/27

css
table

リンク

TableとCSSいろいろ - DesignWalker

kistame228 2009/09/09

リンク

Creating a table with dynamically highlighted columns like Crazy Egg's pricing table (Ask the CSS Guy)

Creating a table with dynamically highlighted columns like Crazy Egg's pricing table Update Aug 29, 2007: Examples 9 and 10, and the downloadable zip now accommodate for JavaScript-disabled browsers. Update Aug 28, 2007: links to examples fixed. Again. I like Crazy Egg's pricing table on their Pricing & Signup page. When you click on "Sign Up" for an option, that plan's column highlights, the othe