東京のWeb制作会社LIGLIGならできるおもしろいこと。殿堂入りシェア地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい!そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。均等割り付けで美しい表デザインを実現するjQueryを作ってみました。※この記事は、2014年5月2日に公開された記事を再編集したものです。table作成時に参考になるサイト本題に入る、その前に。XPの公式サポートも終了し、HTML5+CSS3の普及が進んでいます。この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。table専門参考ページ5選table専門の参考ページを5つほど選んでみました。CSS3を使って美しく装飾されたテーブルの作り方|Webparkhttp://weboook.blog22.fc2.com/blog-entry-329.htmlCSS3でのtableの作り方を、見た目とソースから解説してあります。DesignWalkerhttp://www.designwalker.com/2009/01/table.html日本はもちろん海外のtable専門サイトなども紹介されていて、見応え十分です。Roomhttp://phpjavascriptroom.com/?t=css&p=cssdesign_table使いやすいtableのサンプル画像と設置用のソースがあってとても親切です。気になる備忘録http://peacepopo.net/blog-entry-122.htmlCSSテクニック系・角丸テーブル系・海外系など、カテゴライズされていて便利です。Spicehttp://design-spice.com/2012/11/01/responsive-table/この時代だからこそ、押さえておきたい!タブレットやスマートフォンなどに対応する技が紹介されています。実際のコーディング例さて、ここからは実際に仕事としてコーディングしたtableを、前述した記事で紹介されていたように、HTML5+CSS3でアレンジしてご紹介します。CSSだけで実現できるtable実現にあたって注意が必要なものについては解説を加えます。フラットデザイン向け三角矢印つきtablethの:after擬似要素に、吹き出しでよく使うCSSを使います。FireFox(以下FF)ではtable系のdisplay要素にはabsoluteが使えません。そこで一工夫必要です。IEでは縦の中央に三角が出てこないので、もし上手くできる方法があったらコメント欄などで教えてください。10F</td></tr><tr><th>TEL</th><td>03-6240-1253</td></tr><tr><th>事業内容</th><td>ウェブサイト制作事業<br>(企画、マーケティング、デザイン制作、システム開発)<br>自社メディア運用事業<br>プロモーション・コンテンツ企画制作事業</td></tr></tbody></table>次のページ次はタイル調のtableです。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。