[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル
IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。 デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、tableタグにのみ使用します。 <table class="bordered"> <thead> <tr> <th>#</th> <th>IMDB Top 10 Movies</th> <th>Year</th> </tr> </thead> <tr
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
リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５:phpspot開発日誌
15 JavaScript Data Grids to Enhance your HTML Tables | Hot Scripts Blog リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５。 WEBページに実装するグリッドを選ぶ際にかなり参考にできそうです。 スタンドアロンで動くものや、JavaScriptやMootoolsプラグインのものがまとまっています dhtmlxGrid SigmaGrid jTPS – Datatable jQuery Plugin DataTables – Data Table jQuery plugin Flexigrid for jQuery MyTableGrid OmniGrid 全部見る 関連エントリ シンプルなグリッドをレイアウトにオーバーレイ表示できるjQueryプラグイン「Griddy」 グリッドアコーディオンで新
[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
テーブルのヘッダとフッタを固定する簡易プラグイン - Cyokodog :: Diary
更新履歴 2010-06-02 jQuery.exTable.js を Ver 0.1.2 に更新 jQuery 1.3 以上のバージョンで正常動作しない不具合を修正しました。 サンプルを含む zip ファイルでダウンロードできるようにしました。 2010-01-21 jQuery.exTable.js を Ver 0.1.1 に更新 セルの内包要素の膨張、table 要素の margin 設定等によるレイアウト崩れ抑止処理を追加しました ヘッダ・ボディ・フッタ内のテーブル要素を取得するゲッターメソッドを追加しました 記事中のソースを修正しました だいぶ前に書いた「tableのヘッダを固定させる簡易scriptをサクっと作ってみた」というエントリに、「サンプルソースを参考にフッタも固定しようとしたけどうまくいかない」というコメントを先日頂きました。今にして見ると、前回、前々回のエントリで書
jquery.tablefix.js
»Download jquery.tablefix.js は、Excel のウィンドウ枠固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための、jQuery プラグインです。 JavaScript 無効時はただのテーブルとして普通にそのまま表示される点と、他の類似品と違ってソート変更などの高度な機能がない代わりに、すでにデザイン済みの任意のテーブルにそのまま適用出来る点が特徴です。 読み込むのはプラグインだけで、追加の css や画像ファイルは必要ありません。 使い方 普通にテーブルをデザインする jQuery とプラグインを読み込む jQuery のセレクタでテーブルを選択して、プラグインを呼び出す これだけで、あとはプラグインがよかれにやってくれます。 プラグインの呼び出し方 $('tableSelector').tablefix({width: 600,
Firefoxでのテーブルボーダー1pxのズレを無くす方法｜web bibo
/* CSS（スタイルシート）に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ： HOME » CSS テーブル・表 » Firefoxでのテーブルボーダー1pxのズレを無くす方法 tableにborderを付ける時、border-collapseを使って隣接するセルのボーダーを重ねると思いますが、この方法だとFirefoxではtableのサイズが1pxはみ出すのです。 border-collapseを使ったテーブル Firefoxで見ると左のボーダーが1pxズレているはず。IE、Safari、Chrome、Operaなどは指定した幅の通りになっています。 <table> <tr> <td>AAAAAAAAAAAAAA</td> <td>BBBBBBBBBBBBBB</td> </tr> <tr> <td>CCCCCCCCCCCCCC</td> <td>DD
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
Zudolab -
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
幅可変な画像ブロックをtable無しで作る | Takazudo Clipping*
画像を右に配置して、左側にはテキストなり何なりを入れたりといったものを作る事が仕事上、よくあります。左画像、右テキストもしかり。仕事ごとに必ずこれは作る。さらに、この画像にはいろんなものが入るため、幅は常に変わる。 これを、divだけで作ることがなんとかできました。 こーいうものを作ろうとする時、CSSでやろうとすると、左右のブロックをfloat:right, leftとかやって配置しますが、これはあまり汎用性のある方法とはいえません。なんでかというと理由は3つ。 1つ目は、imgをfloatさせると、テキストがその下に回りこんでしまうというのが1点。回り込ませたいならいいですが、テキストを回り込ませないでやりたい場合が殆どなので。 2つ目は、回り込ませないでやるとしたら、左右のfloatさせたdivにwidthを指定しなければなりません。そうすると、例えば、画像の幅が200pxであれば、
[JS]テーブル内のコンテンツをセル間で移動可能にするスクリプト
Drag and drop table content with JavaScript demo デモではテーブル内のコンテンツをドラッグ&ドロップでセル間の移動が可能で、配置したコンテンツの量でセルの高さも変更します。 スクリプトはjQueryなど他のスクリプトに依存せず単体で動作するもので、対応ブラウザはIE6をはじめFx3にも対応しています。
tableの行と列を固定してスクロール！！Super Tables | バシャログ。
6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる（?）と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ
JQueryで作る機能拡張したテーブルのまとめ「10 Best jQuery Plugins for working with Tables」
TOP > WebDesign > JQueryで作る機能拡張したテーブルのまとめ「10 Best jQuery Plugins for working with Tables」 レイアウトではあまり使わなくなってきましたが、データの一覧などを見せる時の表作りには非常に力を発揮してくれるテーブルですが、今日紹介するのはそんなテーブルにJQueryを使って機能拡張したテーブルを集めたエントリー「10 Best jQuery Plugins for working with Tables」を紹介したいと思います。 TableSorter ソート可能なテーブルやツリー式のテーブルまで様々なテーブルを使ったサンプルが紹介されています。今日はその中からいくつか気になった物を紹介したいと思います。 詳しくは以下 ■tableRowCheckboxToggle チェックボックスで選択できるテーブ
エクスプローラー風のツリー型テーブルを実現できるjQueryプラグイン「treeTable」:phpspot開発日誌
jQuery treeTable 2.0 - Cubicphuse エクスプローラー風のツリー型テーブルを実現できるjQueryプラグイン「treeTable」。 次のようなツリー型のウィジェットをページ内に簡単に埋め込みできるようです。 限られたスペースに、折りたたみ可能な状態で情報を表示するといった用途にも使えそう。 HTML的には、次のような、tableタグで定義されていて、jQueryを使ってインタラクティブに動作する模様。 <table class="example" id="dnd-example"> <caption>Example 3: Dragging and dropping example.</caption> <thead> <tr> <th>Title</th> <th>Size</th> <th>Kind</th> </tr> </thead> <tbody>
jQuery：tableでマウスのhoverしている行と列の色を同時に変える方法(テーブルを少し美しく見せる方法)
上手く行と列が選択できているのですが、問題はマウスを動かしたとき。 同じ行内を移動すると、なんと選択していたところの文字が変化してしまう。 同じ行内にいるときは、変化しないで欲しいのに… と、それだけじゃなくて、一度変化するとそのままの色が引き継がれてしまう。 なんとか解決する方法はないのだろうか・・・ 同じ列にclassをつけてみる これも、先日書いたエントリーに 「jQueryを使い要素の出てくる順に番号をつける方法（forの代わりにeach()を使う繰り返し）」 で書いたように、同じ列にclassをつけることが可能である。 ということでclassをつけてそのclassに適応してみた $("#test2 tr").each(function () { $(this).children().not('th').each(function (i) { i = i+1; $(this).ad
[JS]ソートだけでなく、検索も可能な多機能なデータテーブルを実装するスクリプト
セルのハイライト表示、データのソート、特定文字列の検索などに対応したデータテーブルを実装するスクリプトを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
overset - Animated Sortable Data Table jQuery plugin - jTPS
[JS]テーブルのデータをアニメーションでソートするスクリプト -Animated table sort
http://www.designwalker.com/2009/09/jquery-table.html
Michael Leigeber