HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
CSSだけで作るtableデザインテクニックVer.02(おまけ付き)
今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます！ こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです！！予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました！ 気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ！ CSSテーブルデザインテクニック01 HTML テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top
リッチすぎるデータグリッド等を実装できる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」 グリッドアコーディオンで新
jqueryでtableの行をreverseしたり、hide or show したり - end0tknr's kipple - web写経開発
次のように書けば、tableのtrの表示順や、表示/非表示を変更できるみたい。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style> table { border-collapse: collapse;} td { border: 1px solid #000000;} </style> </head> <body> <input type="button" value="表示サイズ変更" id="hide_tv" onClick="change_size('tv')"> <input type="button" value="表
テーブルやリストを使用した価格表のデザイン集
プロダクトやサービスを販売しているサイトにとって非常に重要な価格表のデザイン集を1st Web Designerから紹介します。 40 Fantastic Pricing Tables for Your Inspiration 価格表はその設計を決しておろそかにするものではなく、直観的で使いやすく、ユーザーに最も重要な情報を提供する非常に重要なコンテンツです。 上記サイトでは、シンプルなテーブルからフューチャーリストなど優れた手段で価格表を提供しているサイトが多数紹介されています。 その中から、下記にいくつかピックアップしました。 傾向としては、ページ幅いっぱいに配置し、お勧めを目立つようにしています。
ソート、ページング機能等リッチなテーブルを実装するのに便利な「Sigma Grid」:phpspot開発日誌
MOONGIFT: もうこれで十分。HTML上でテーブルを表示するなら「Sigma Grid」:オープンソースを毎日紹介 ソート、ページング機能等リッチなテーブルを実装するのに便利な「Sigma Grid」。 非常に多数の機能が組み込まれており、このライブラリがあれば、高度なテーブルを実装する際のニーズをすべてカバーできそうです。 こういうＵＩのニーズは結構ありそう and 適切な位置に実装したら喜ばれそうです。 いざという時のために覚えておいて損はないでしょう。 関連エントリ ブラウザ上で動く12のリッチテキストエディター リッチなselectボックスが実装できる「Select Box Factory」 jQueryでリッチなグリッドを実装「jqGrid」 script.aculo.usベースのリッチGUIコンポーネント作成JavaScriptライブラリ「Spinelz」 Extばりのリ
秀逸なテーブルデザインのパターン集:phpspot開発日誌
Ultimate guide to table UI patterns 秀逸なテーブルデザインのパターン集をまとめたエントリのご紹介です。 デザインだけでなく、見やすさや分かりやすさという点にも気を配りたいテーブルデザインは比較的難しいものになりますね。 テーブルデザインの例を知っておくことで、難しいテーブルのデザインをする際にも参考に出来そうです。 Apple のデザインっぽいテーブル 複雑なデータをわかりやすくスタイリッシュにまとめたテーブル 画像なども盛り込みつつ見やすいテーブル シンプルに見やすいテーブル JavaScript の入ったものも入ってきますが色々なテーブルを見てストックしておくと後に役立ちそうです。 関連エントリ CSSでデザインしたクールなテーブルのサンプル集 CSSでデザインされたテーブルレスでクールなフォームサンプル
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
JQueryで表形式のフォーム内を矢印キー上下移動 « システム開発/WEB制作/サイト構築ブログ
東京都渋谷区のメテオリレイによるシステム開発・WEB制作・サイト構築に関する技術情報のニュース、動向紹介、各種作業メモ WEBシステムの表形式のフォームデータにおいて、テーブル内部を矢印キーで上下に移動したい場合があります。これは、JQueryを用いることで簡単に実現できます。例えば、ID属性に”list_table”が設定されたテーブルのTDタグに以下のネーミングルールでname属性を設定し、下記に示すコードを読み込ませることで可能です。 ■ネーミングルール [文字列]_[数値]_[数値] ■JavaScriptコード $("#list_table").keydown(function(e){ if(e.keyCode=="38" || e.keyCode=="40"){ var focused = $(e.target); var ma =focused.attr("name"); v
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
shima111の日記
タスクマネージャから、explorer.exe を終了させてから、「新しいタスクの実行」で explorer.exe を起動させると復活する よくある環境だけど、お客さんとこの開発サーバにアクセスしたいのだが、IP制限がかかっていて特定のIPからしかアクセスできないってことがあると思います。そんな時、お客さんに「このIPアドレスは自社サーバですので、このIPからのアクセスは許可してください」って申請して設定してもらいます。その後、自社サーバにVPN接続してお客さんのサーバにアクセスできるようになる、と。 そこで問題になるのが、VPN接続した際のデフォルトゲートウェイをVPNサーバにする(大抵デフォルトはこうなると思うけど)と、ある特定のサイトに上手くアクセスできないことがあります。一般的に言われてる原因はMTUのサイズが経路の途中で変化するため、パケットが途中でロストしちゃうからみたいです
JavaScript++かも日記 - 1997年からの
前回、Web上でLibraのwalletやclientを作る(6)-残高を見るに追記したのだけど、実は、前回成…
【jQuery】非表示のテーブルを表示する場合は『display:table』とするべき。 - すたら日記
【不都合】『display:none』で非表示にしているブロック要素をJavascriptで 表示させる場合、普通は『display:block』と指定すると思います。 しかし、テーブル(<table>)で『display:block』と指定すると、 Firefoxなど一部のブラウザでは以下のようになってしまいます。 ▲<table>の枠線が、画面いっぱいに広がってる…！ HTML: <table> <tbody> <tr><th>aaa</th><td>1111</td></tr> <tr><th>bbb</th><td>2222</td></tr> <tr><th>ccc</th><td>3333</td></tr> </tbody> </table> CSS: table{ border:2px solid #f00; display:none; } th, td{ border:2
テーブルのヘッダを固定してエクセル風に表示する Super Tables - TsutomuUchimaの日記
大量のデータを使用するテーブルをHTMLで書くと画面をスクロールする事になりますが、その際にヘッダも一緒にスクロールされてしまい現在見ている項目が何なのか確認する事が出来ない時があります。 そんな時は Super Tables を使えばエクセルのようにヘッダを固定して表示する事が出来ます。縦横のヘッダを同時に固定させる事も可能です。サンプルを作ってみました。ついでにデータ入力可能にしてみました。 エクセル風入力可能なテーブル http://www.geocities.jp/uchblog/supertables/mySuperTablesDemo01.html ソースは以下のような感じで。 <div class="fakeContainer"> <table id="demoTable" class="demoTable"> <tr> <th>Account</th> <th>First
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」:phpspot開発日誌
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」 2009年11月18日- Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」。 次のような、ＵＩも美しい高機能なテーブルの実装が出来ます。 普通のテーブルをリッチに スタイルを切ると、次のような単なる<table>タグで定義されたデータなのですが、JavaScript とCSSの力によって大きく形を変えています。 機能紹介 検索機能。大量にデータがあった場合にこの機能はかなり重宝します。 ソート機能。データが一杯でも分かりやすい。全カラムにおいてソート機能が付いてます ページング機能によって縦幅が大きく取られることを防ぎます。view all ボタンで全部を表示することも可能。 縦方向の合計をExcelのsumっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Tableオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
Tableオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
http://www.designwalker.com/2009/09/jquery-table.html
テーブル操作に使えそうなjQueryプラグイン色々:phpspot開発日誌