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

モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。

[coliss]

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

[unknownlabel]

テーブルを角丸にするCSS など

[e10kg]

css

[auient]

テーブルの見た目を整えるのにこれだけの知識がいる

[m_h]

よくわからないけどあとでよむ

[degucho]

レイアウトにtable使うなハゲ！と言われつつ個人が手打ちtableレイアウトで作ってた頃のwebが面白かったなあ

[eartht]

意外と触れるとこ多いのねtable

[Shinwiki]

Tableがテーブルゆえにブラウザ側が気を遣っている全てをリセットできるようにしろ…全てはそれからだ。

[miguchi]

“A Guide to Styling Tables”

[peketamin]

“テーブルの列を分割するCSS” よさそう！

[lifeisadog]

「テーブル（<table>）の仕様が変更されたのはご存じでしょう」←Chromeのバグ解消の話じゃなかったっけ？