意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]
コーディングする際に、何気なく重宝するコードがtableです。 そんなtableですが、コーディングしていると乱雑になってしまったり少し凝ったデザインにしようしても、いまいちと感じてしまうことが多々あります。 今回は、オシャレなtableが簡単に実装できるCSS3のサンプルコードをご紹介します。 コピーペーストで簡単に使えますので、ぜひホームページのデザインに取り入れてみてください。 コピペで使えるtableのサンプルコード19選 1.CSS3のセレクターで作るストライプテーブル http://ascii.jp/elem/000/000/462/462099/ 汎用性の高いシンプルなストライプテーブルを作ることができるサンプルコードです。 CSS3のセレクターを使って、行・列ごとに背景色が違う典型的なテーブルをデザインします。 以前のCSS1、2の場合だと背景色を変えるのは結構手間がかかっ
![意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca6debb0b5ba0d5e0ad9cd8ecd16e993b6da81a8/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F2250%2Fog_image%2Fdefault-e58901a600c33a043330366875957445.jpg)
ソート可能なテーブルを作成して設置できるWordPressプラグイン - ミblog : レビューや日常など
2009-05-19 WordPress プラグイン たまに価格などの比較表を作成する場合、テーブルを使う方が簡単で見やすかったりしますが、一から作成するとなるととても面倒です。そんな時は、WP-Table Reloadedというテーブル作成プラグインを使ってみてはいかがでしょう。jQueryプラグインが組み込まれているので、ソートにも対応したテーブルが作成可能です。また、CSVファイルやHTML、XMLをインポートしてテーブルを作成することもできます。 WP-Table Reloadedの導入方法 ダウンロード → WP-Table Reloaded Demo ※WordPress2.7.1で動作確認済 ダウンロード先のページからプラグインをダウンロード 解凍したフォルダごとwp-content/pluginsにアップロード プラグインを有効化 テーブルの作成や設定は、管理画面のツール→
35 Tools, Scripts and Plugins to Build Beautiful HTML Tables
Embed CanIUse Tables Into Your Website with This Tool Every developer should know about CanIUse. It's an amazing resource that catalogs all the latest HTML, CSS, and... Read more Styling Tables A set of tips and tricks that help efficiently style your tables by improving their layout, typography, text alignment, and a lot more. Moreover, it also tells about adding colors and graphics and customizi
折りたたみできるクールなテーブル実装ができるjQueryプラグイン「jExpand plugin」:phpspot開発日誌
Expand table rows with jQuery - jExpand plugin 折りたたみできるクールなテーブル実装ができるjQueryプラグイン「jExpand plugin」 デモページ 右端の▼をクリックでペロンと中身が開けるテーブルをjQueryプラグインで簡単に実装できるようです。 仕組みとコードについても解説されています。 使い方は簡単で、$(#sometable").jExpand(); のように簡単に設定することが出来るようです。 関連エントリ コンピュータに指定フォントが入ってるかチェックできるjQueryプラグイン「jquery-fontavailable」 Youtubeの動画URLやvidからサムネイルを簡単に取得できるjQueryプラグイン「jYouTube」 タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery
[JS]テーブル内のコンテンツをセル間で移動可能にするスクリプト
Drag and drop table content with JavaScript demo デモではテーブル内のコンテンツをドラッグ&ドロップでセル間の移動が可能で、配置したコンテンツの量でセルの高さも変更します。 スクリプトはjQueryなど他のスクリプトに依存せず単体で動作するもので、対応ブラウザはIE6をはじめFx3にも対応しています。
わずか2.5KBでテーブルにソート機能を提供する「TinyTable」:phpspot開発日誌
TinyTable JavaScript Table Sorter - 2.5KB - Web Development Blog わずか2.5KBでテーブルにソート機能を提供する「TinyTable」。 シンプルだけど次のようなかっこいいソート可能テーブルを実現できる軽量ライブラリが公開。 デモページ 各種変数の設定でカスタマイズも可能みたい。 ＣＳＳのクラス名の指定なんかが出来るようです。 var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; //header class name sorter.asc = "asc"; //ascending header class name sorter.desc = "desc"; //descending header class name sorter.even
ユーザの視線に配慮したページ作り：「表」編 (ユーザビリティ実践メモ)
弊社のユーザ行動観察調査では、アイトラッキング（ユーザの視線分析）を利用していますが、ある程度ユーザ理解があれば、「認知的ウォークスルー」（ユーザになりきってそのサイトを検証する）という手法でも、視線の流れを意識したサイト評価・設計ができるようになります。 今回はWebページ内の表のつくり方を例に、「視線を意識したサイト設計」のヒントをご紹介しましょう。 このニュース一覧は、ぱっと見はきれいなのですが、実際にはユーザの情報収集を妨げています。その理由がわかるでしょうか？ この例の場合、ユーザはまず文頭を見て自分に必要な情報を探すのに対し、文章が中央ぞろえになっているため、視線を左右に動かす必要があり、情報収集の効率を下げています。 そこで、文頭を左寄せにすることで視線がスムーズに流れ、表が読みやすくなります。 ただし、左寄せが万能なわけではありません。次の例をご覧ください。 いかがでしょう
「エクセルシートをHTMLテーブルに変換しちゃう君 」がすごく便利
組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 「エクセルシートをHTMLテーブルに変換しちゃう君 」でカンタンテーブル作成 「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」は、エクセルの表を貼り付けるとHTMLのTableタグで表を生成、プレビューも表示してくれる便利ツール。以前紹介したサービスでは日本語を通すのにひと手間必要でしたが、今回はその部分でも問題ありません。 変換しちゃう君の特徴 「Tableizer」との比較にもなっています。 セル内での改行に対応 CSVにも対応 強固なセキュリティ性（サーバーとのやり取りなし） セルの結合が可能 正しいマークアップが可能 行ごとの色替えも設定可能 Class指定も細かく付与可能なので独自デザインも組み込みやすい サンプルテーブル T
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け STEP2. オプションを選択して変換 細かい設定 列目までをTHEADとする。(0でTHEADなし) TBODYの行目までをTHとする。 TBODY THに深度を埋め込んだクラス名を追加する。(1〜) クラス名： " + n" ひとつめのTHに深度クラスを追加しない。(lv1を追加しない) n列ごとにTRにクラス名を追加する。(0〜) クラス名： 列数 ： クラス名に列数を追加する。(nrow0, nrow1,,)
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いテーブル パート2 | バシャログ。
[HTML] <table id="table-01"> <tr> <th>MS 名</th> <th>パイロット</th> <th class="speech">台詞</th> </tr> <tr> <td>ザク II</td> <td>ジーン</td> <td>シャア少佐だって、戦場で勝って出世したんだ！</td> </tr> <tr class="even"> <td>グフ</td> <td>ラル</td> <td>ザクとは違うのだよ、ザクとは！</td> </tr> <tr> <td>アッガイ</td> <td>アカハナ</td> <td>大佐、イワノフのアッガイがやられました</td> </tr> <tr class="even"> <td>ゲルググ</td> <td>シャア</td> <td>ララァ、私を導いてくれ</td> </tr> </table> [CSS] 要所のみ掲
![[使えるCSSテクニックVol.2] CSS を使った見栄えの良いテーブル パート2 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
com.overset.dev» Blog Archive » Animated Sortable Datagrid jQuery plugin - jTPS
jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability. The development version is currently 15KB. DEMO ASSETS As they currently reside on Google Code jTPS.js - LATEST - core jTPS jQuery plugin code jTPS.css - styles required by jTPS jTPS.html - demonstration html instantiating jTPS remaining assets - graphics CHANGELOG
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/09/jquery-table.html
http://blog.e-riverstyle.com/2008/10/zebratablejs.html
TableとCSSいろいろ - DesignWalker
http://www.designwalker.com/2009/01/table.html
[CSS]スタイルシートで実装するテーブルのデザインパターンとそのポイント | コリス