[B! Table] kyarawayのブックマーク

Pimp Your Tables with CSS3 | Codrops

Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and […] Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup. We

kyaraway 2012/08/01

cssで実現するとってもきれいなテーブル

table
CSS3

リンク

ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)

ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。同種の情報をユーザは区別できない表1の問題点として、日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくいことが挙げられます。特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消

kyaraway 2010/01/18

table
UI

リンク

テーブルのユーザビリティを飛躍的に向上させる「Chromatable」:phpspot開発日誌

テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。普通のテーブル Chromatableで初期化次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。実装方法実装方法も超簡単で、JSコード自体はたったの１行で実装可能。  <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script>  <script> $(document).ready(functio

kyaraway 2009/12/02

table
ajax

リンク

テーブル周りの素晴らしいjQueryプラグイン30 – creamu

jQuery Wisdomというサイトで、テーブル周りの素晴らしいjQueryプラグインが紹介されています。ざっといくつかご紹介。 graphTable: graph data from HTML table using flot HTMLのテーブルデータからグラフを作ってくれる tableRowCheckboxToggle jQuery Plugin 行をクリックすることでチェックボックスのオンオフを切り替えられるようにするプラグイン UI Table Edit jQuery Plugin セルをクリックすることで編集可能にするプラグイン Colorize – jQuery Table Plugin マウスオーバーした列の背景をカラーリングしてくれる Animated Sorta ble Data Table jQuery plugin – jTPS テーブルにページネーションやソート機

kyaraway 2009/11/09

jQuery
table

リンク

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

kyaraway 2009/10/27

css
Table

リンク

インスパイアされる料金体系ページデザイン77 – creamu

instantShiftで、インスパイアされる料金体系ページデザインがまとまっています。ざっといくつかご紹介。 ↑はSquarespace。 Typepad Zen Wufoo Basecamp フォントサイズが大きくてジャンプ率の高いものが見やすくていいですね。その他のリストは以下からどうぞ。 » 77 Inspirational Example of Pricing Page Designs フランス料理のお店に行ってきた。ばりうまかったぞ。

kyaraway 2009/10/08

リンク