モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ

2024/02/08 128 users ポパー 四隅 モダンCSS テーブル アウトライン

モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記... 続きを読む

HTMLメールの最近の実装方法を解説、tableは不要になりました

2023/06/01 314 users レンダリングエンジン modern Outlook Edge

HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern... 続きを読む

manがあるコマンドは偉いし、manを付けるべき - Lambdaカクテル

2022/10/11 143 users Lambdaカクテル Man コマンド crontab TAB

社内で、crontabのtabは実はtableだからクーロンタブじゃなくてクーロンテーブルなんだよね、という話が盛り上がった。 ファクトチェックとして、crontab(5)が紹介されていた(cron tableという言葉が出現している)。 manで事実確認がすぐできてすごいと思う一方、それを可能たらしめているmanもありがたいと思った。 man... 続きを読む

HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG | コリス

2021/07/08 372 users コリス CSS Googleデベロッパー 実装 HTML

GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応して... 続きを読む

HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス

2021/03/22 602 users コリス フレームワーク アクセシブル CSS グラフ

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャート... 続きを読む

本番でTableを1つDeleteしてしまいON DELETE CASCADEでさらに4つTable dataが消えた話 - Qiita

2020/12/02 144 users Qiita Data 本番

Help us understand the problem. What is going on with this article? 続きを読む

ユーザ情報を保存する時のテーブル設計 - そーだいなるらくがき帳

2018/05/01 1053 users そーだい らくがき帳 テーブル設計 今北産業 用法用量

2018 - 05 - 01 ユーザ情報を保存する時のテーブル設計 はじめに ※この発言は個人の見解であり、所属する組織の公式見解ではありません 用法用量を守り、個人の責任で業務に投入してください 要件 User情報を保存するときにどのようなテーブル設計を行うか 今北産業 で頼む テーブルに状態を持たせず状態毎のテーブルを作る 状態が変わればレコードを消して別のtableに作る tableの普遍的... 続きを読む

あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | デザイン | POSTD

2016/08/05 579 users POSTD display プロパ inline Flex

CSSプロパティの1つであるdisplayはCSSレイアウトに用いるプロパティの中でも極めて重要なものです。block、inline、none、さらにtableやinline-blockは今ではかなり一般的になってきました。一方新たに登場したflexやgridはレイアウト用に作られたものです。これらについて紹介します。CSSプロパティの1つである display は、CSSレイアウトに用いるプロパ... 続きを読む

意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]

2015/09/02 288 users Ferret フェレット elem コピペ セレクター

コピペで使えるtableのサンプルコード19選 1.CSS3のセレクターで作るストライプテーブル http://ascii.jp/elem/000/000/462/462099/ 汎用性の高いシンプルなストライプテーブルを作ることができるサンプルコードです。 CSS3のセレクターを使って、行・列ごとに背景色が違う典型的なテーブルをデザインします。 以前のCSS1、2の場合だと背景色を変えるのは結構... 続きを読む

初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB

2015/07/16 105 users 作り方 初心者 jQuery Splatoon ガチバトル

また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、... 続きを読む

CSSで出来るレスポンシブ対応を考えた table レイアウト | ホームページ制作│大阪│株式会社ユニオンネット

2014/08/18 223 users CSS レイアウト レスポンシブ対応 やっかいもの 大阪

スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います... 続きを読む

自宅でもバーベキューでも使える「スキレット」レシピ　アヒージョ、オムレツ、パエリアなど - はてなニュース

2014/07/09 172 users スキレット パエリア アヒージョ オムレツ バーベキュー

鋳鉄製の分厚いフライパン「スキレット」をご存じですか？ スキレットはその厚さから蓄熱性が高く、肉や魚がふんわりおいしく調理できるといわれています。また、「焼く」「蒸す」「燻（いぶ）す」「揚げる」など、用途もさまざま。料理好きやアウトドア好きが愛用する、スキレットのレシピを集めてみました。 ■ 簡単！ 20分でできる「砂肝のアヒージョ」 ▽ À Table !! （ア･ターブル）　　Vol.16　　... 続きを読む

tableをレスポンシブWebデザインに対応させるスクリプト・FooTable - かちびと.net

2012/11/25 167 users レスポンシブWebデザイン net

table要素をレスポンシブに対応 させる、というスクリプトです。 他にも同じようなスクリプトは 存在しますが実用的ではなかった ので紹介してなかったですけど これはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 FooTable ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップ... 続きを読む

レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

2012/11/01 877 users Design Spice レスポンシブWebデザイン 小技

レスポンシブWebデザインで狭いスクリーンサイズの時にテーブルをどう見せるかは悩ましい問題のひとつです。その対応方法を幾つか調べてみました。 tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist... 続きを読む

HTML のタグを一度覚えたら一生忘れないようにするためのコツ | TM Life

2012/10/09 149 users HTML 一生 TM Life コツ タグ

IT の世界は, よく省略名が使われます. そもそも IT ってのが Information Tecnorogy の略ですしねw HTML(HyperText Markup Language) も例外ではありません. HTML で使われるタグは, ほぼ省略形で記述します. 例えばテーブル. テーブル系の要素は table, tr, th, td ってのがありますね. これらの要素を単純にそのまま覚... 続きを読む

CSS3を使って美しく装飾されたテーブルの作り方｜Webpark

2012/07/17 109 users Webpark tbody セレクタ テーブル CSS3

CSS3をたくさん使ってきれいなテーブルを作ってみましたので紹介します。特にセレクタの勉強になると思いますので、ぜひ参考にしてみてください。 まずはHTMLから。無駄に長いので3位から9位は省略しています。 <table> <tbody> <tr> <th>順位</th> <th>国</th> <th>2010年推計人口</th> </tr> <tr> <td>1</td> <td>中華人民共和国... 続きを読む

テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌

2012/05/08 156 users jQueryプラグイン phpspot開発日誌 テーブル

テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、スト... 続きを読む

Googleの中の人が作ったAndroidアプリioschedを参考にしよう！（とりあえずビルドまで） - gabuchanの日記

2011/11/07 385 users gabuchan ビルド ネック Android 手順

Android | 22:08 | Googleの中の人が作ったGoogle I/O用のAndroidアプリ iosched がオープンソースで公開されているのですが、Androidアプリを開発する時に非常に参考になるので（Table対応したバージョンから難解になったのがネックですが）紹介したいのですが、ビルドするまで少し作業が必要なのでダウンロードしてビルドするところまで手順をメモっておきます。... 続きを読む

[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル | コリス

2011/10/17 369 users コリス チュートリアル CSS ユーザフレンドリー テーブル

デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、t... 続きを読む

[CSS]たった二行で、さまざまなカラムを設定するグリッドのフレームワーク | コリス

2010/11/14 271 users コリス margin Row カラム フレームワーク

たった二行のシンプルなスタイルシートで、さまざまなサイズのカラムを設定するグリッドのフレームワークをを紹介します。 .row { display:table; width:960px; margin:0 auto } .cell { display:table-cell; vertical-align:top; padding-left:10px } HTMLもシンプルでdiv要素を使うだけです。... 続きを読む

ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α

2010/07/07 472 users コーダー XHTML 考L モバイルサイト HTML

モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字... 続きを読む

小粋空間: CSS で table に斜線を引く方法

2009/10/25 287 users 斜線 CSS relative position span

CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に... 続きを読む

[CSS]半透明のパネルを使ったドロップダウン型ナビゲーションのスタイルシート | コリス

2009/05/10 194 users コリス CSSplay 半透明 Professional

スクリプト無しで、tableで配置したコンテンツをドロップダウン型のナビゲーションのパネルに表示するスタイルシートをCSSplayから紹介します。 Professional - drop down table menu demo パネルの透過処理は、IE6にも対応しています。 対応ブラウザは、IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Google ... 続きを読む

Tableのデザインまとめ | DesignWalker

2009/01/13 820 users DesignWalker サンプル スペック表 料金表 参考

料金表やスペック表などに使えそうなTableのデザインを探してみるといろいろと見つかりました。 以前にもこのブログで「TableとCSSいろいろ」でもご紹介しましたが、 今回はTableのデザインパート２と言う事で、いろいろとまとめてみました。サンプルやダウンロードページが別に分かれているところは、そちらのリンクも記載しておきましたので、参考にどうぞ。 dhtmlxGrid ダウンロード Unob... 続きを読む

エクセルデータからHTML Tableタグの表を作成してくれる「Tableizer」 - WEBマーケティング ブログ

2008/12/13 232 users エクセルデータ TABLEIZER エクセル HTML 購読

エクセルにまとめておいた資料をHTMLのTableにしたいということ、たまにありますよね。 その際、いちいち CONCATENATE とか使ってHTMLタグを生成するのも面倒、、、そんな時に使えそうなのがこのツールです。 08年12月14日 3・2・1GSX Series III systemご購入者に、専用スピーカースタンドをプレゼント このブログをRSSリーダーで購読 エクセルの表をHTMLの... 続きを読む