html

tableのこと【xhtml編】

tableタグを利用する際に意外と知られていないのが、列(縦方向)をコントロールする「colgroup」タグ。また、colgroupタグはcaptionタグの次に、tfootタグはtbodyタグの前に記述、という「マークアップ順」。その他もろもろtableタグに関することをまとめておこうと思います。

テーブルを左から右へ情報を提供したいとき

表示例

テーブルの概要
見出し1 データ1-1 データ1-2
見出し2 データ2-2 データ2-3
見出し3 データ3-1 データ3-2
見出し4 データ4-1 データ4-2

サンプルソース

<table cellspacing="0" border="1" summary="テーブルの概要">
<caption>テーブルの概要</caption>
<colgroup><col style="background-color:#ccc; width:140px;" /><col style="background-color:#eee; width:80px;" /><col style="background-color:#ccc; width:80px;" /></colgroup>
<tbody>
<tr>
<th scope="row">見出し1</td>
<td>データ1-1</td>
<td>データ1-2</td>
</tr>
<tr>
<th scope="row">見出し2</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
<tr>
<th scope="row">見出し3</td>
<td>データ3-1</td>
<td>データ3-2</td>
</tr>
<tr>
<th scope="row">見出し4</td>
<td>データ4-1</td>
<td>データ4-2</td>
</tr>
</tbody>
</table>

テーブルを上から下へ情報を提供したいとき

表示例

テーブルの概要
見出し1 見出し2 見出し3
結果1 結果2 結果3
データ1-1 データ2-1 データ3-1
データ1-2 データ2-2 データ3-2

サンプルソース

<table cellspacing="0" border="1" summary="テーブルの概要">
<caption>テーブルの概要</caption>
<colgroup style="background-color:#ccc; width:100px;"></colgroup>
<colgroup style="background-color:#eee; width:100px;"></colgroup>
<colgroup style="background-color:#ccc; width:100px;"></colgroup>
<thead>
<tr>
<th scope="col">見出し1</th>
<th scope="col">見出し2</th>
<th scope="col">見出し3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>結果1</td>
<td>結果2</td>
<td>結果3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>データ1-1</td>
<td>データ2-1</td>
<td>データ3-1</td>
</tr>
<tr>
<td>データ1-2</td>
<td>データ2-2</td>
<td>データ3-2</td>
</tr>
</tbody>
</table>

tableタグの使いどころ

tableタグのマークアップ順

  1. table
  2. caption(任意)
  3. colgroup(任意)
    1. col(任意)
  4. thead(任意)
    1. tr
    2. th(任意)
    3. td
  5. tfoot(任意)
    1. tr
    2. th(任意)
    3. td
  6. tbody(任意)
    1. tr
    2. th(任意)
    3. td
tableタグに「cellspacing="0"」を記述
レイアウト崩れが発生する可能性を排除するため
tableタグに「border="1"」を記述
CSSが効いていない状態でも表として分かりやすくするため。枠線を非表示にしたい場合はCSSを利用
tableタグのsummary属性にtableの概要を記述
tableの概要を記述するcaptionタグとの違いは、captionに書かれた記述はブラウザに表示されるが、summaryで書かれた記述はブラウザに表示されない
scope属性の設置
音声読み上げブラウザに配慮し、横方向に読ませたいときは「scope="row"」を、縦方向に読ませたいときは「scope="col"」を記述(アクセシビリティの向上)
列(縦方向)をコントロールするcolgroupタグ
行(横方向)をコントロールするにはtrタグを使うが、列をコントロールする場合はcolgroupタグを使用する
colgroupの記述の仕方は2通りある(その違いは上記のサンプルソースを参照)
thead,tfoot,tbody
thead,tfoot,tbodyを利用する際は、書き順に注意。ブラウザの表示されるのは、thead,tbody,tfootの順だが、マークアップはthead,tfoot,tbodyの順に記述する

最近の記事

文章のユーザビリティ

この書籍の中で、ライティングのユーザビリティについて触れている項目があり、激しく共感する部分だったので、ここで備忘録としてピックアップする。 ・・・

ライティング

インタフェースデザイン

この書籍は、I部 リサーチ、II部 デザイン、III部 インプリメンテーションと三部構成になっている。この記事では、その中から、I部 リサーチ、・・・

デザイン思考

フルHD映像を4Kにする → スーパースケール

これを知ったときはマジか!と飛び跳ねた。あらためて思い返してみると、確かに公式チュートリアルでも触れていたことをうっすら思い出す。そしてそのときとやり方がなん・・・

DaVinci Resolve

Macで編集時と書き出し後で色味が変わってしまう場合に試してみたいこと

試したことはまだないけど、Macで編集時と書き出し後で色味が変わって困ったときのために備忘録。 プロジェクト設定 > 「カラーマネジメント・・・

DaVinci Resolve

プロジェクト設定と環境設定

プロジェクト設定と環境設定について詳しく解説されている情報がなかなか見つからないので、要所要所で知り得た情報を更新していきます。 プロジェクト設定 ・・・

DaVinci Resolve

項目”Clipy”は開いているため、ゴミ箱に入れることができません。←アンインストールしようとしたときの話し

Clipyが超絶便利そうだったので、macOS Big Sur にインストール&再起動して使ってみた。ところが、command + c を複数の箇所で行い、c・・・

徒然なままに

setTimeout は requestAnimationFrame に変えるべき?

requestAnimationFrame をはじめて見たので調べていたら、setTimeout や setInterval は requestAnimati・・・

JavaScript

書籍「小さなチーム、大きな仕事」からピックアップ

6年ぶりに読み返したが、今なおハッとさせられることが多く見つかる。 この本で忘れないようにしたい項目をピックアップするだけでも役に立ちそ・・・

起業向け情報

書籍「完全網羅 起業成功マニュアル」からピックアップ

この記事では、以前に読んだ際に付箋を付けていたが、その部分だけを備忘録としてピックアップするため、本の要約ではない。実際は、何倍も濃い内容で、練・・・

起業向け情報

書籍「はじめの一歩を踏み出そう」から気になったフレーズをピックアップ

もう一回、全部読み返したいところだが、書籍がありすぎるので、当時付箋紙をつけていたところだけをピックアップ。書籍内ではより具体的な説明があるので・・・

起業向け情報

人気の記事

floatとvertical-align? → display:table-cell; !

上図のように、2カラムレイアウトにおいて、左右のコンテンツ長さが任意で、短い方のカラムの縦位置を長い方のカラムのセンタリングする場合、どうしましょうって話。何・・・

CSS2010年6月28日

レイアウト全体を画面のセンターに設定する

本来であれば #wrapper{ width:○○px; margin:0 auto; } の設定だけで充分なのだが、これだとIE5が対応せず左寄せのままで・・・

CSS2007年12月13日

jQuery Mobileを使ったページ遷移時のトランジション

jQuery Mobileを導入するだけで、同ドメイン内の他ページやページ内リンクを使ってページ遷移するときに右から左へスライドします。デフォルトは「右から左へ・・・

JavaScript2011年2月25日

基本のCSSを学んだ人が次に読む本

タイトル 速習Webテクニック スタイルシート 上級レイアウト 発行日 平成18年4月25日 値段 2,780円+税 CSSをもう・・・

Web本・デザイン本2007年1月6日

Windows/Mac IE version4の排除

@important "test.css"; ポイントは@importantを設定し、1ファイルかますこと。ただし、この設定ではMacI・・・

CSS2006年12月31日

リストとナビゲーション「横」編

xhtmlソース <div> <ul> <li>navi1</li> <li>navi2</・・・

CSS2007年12月13日

html拡張子でありながらphpを動作させる

もっとはやくに気づいていたかった・・・。 環境としては、レンタルサーバーhetemlを使用してMovablTypeをインストールしています。 http://he・・・

php2010年5月29日

Amazon Product Advertising API(署名入り)をアフィリエイトとして使う

AmazonのProduct Advertising APIをアフィリエイトとして使おうと試みて、その概要をつかむまで2,3日かかってしまった。まず、アカウン・・・

php2010年10月28日

ファイル名を拡張子なしで取得するサンプル

変数bnにphpファイルのファイル名を拡張子なしで取得するサンプル $bn = basename($_SERVER['PHP_SELF'], ".php");・・・

php2011年10月27日

Amazon アソシエイト

Amazon アソシエイトに関する情報は、ここに備忘録として追記していこうと思います。 Amazon Product Advertising API(署名入り・・・

豆知識2010年11月23日

コメントありの記事

インタフェースデザイン

「test」

デザイン思考

Instagram API を使ってインスタに投稿した画像データを取得する

「>ころころさん コメントありがとうございます! 確かに、APIドキュメント見ましたが、ライブに関する情報は今のところ取得できないようですね。 インスタライ・・・」

API

Sony Eマウント フルサイズ対応のカメラレンズを収集するページを作ってみた

「SIGMAから超軽量で明るい単焦点レンズが2本発売になりましたので、リストにレンズ情報追加しました!」

お仕事・制作日記

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

「>名無しさん ご指摘、ありがとうございます! 記事冒頭の「まずはサンプル」のサンプルが動いていませんでしたので修正しました。」

JavaScript

えっ!?Yahooの検索結果から遷移しようとしたら全く違うサイトにリダイレクトされてしまった...

「>前田さん コメントありがとうございます。 環境は分かりかねますが、修正したいファイルのパーミッションを604や644に変更すると書き込みできるようになります(・・・」

お仕事・制作日記

記事の投稿IDなどの投稿者(ユーザー)情報を取得する方法 → get_the_author_meta

「アバターを取得する「get_avatar」についても追記しました!」

WordPress

jQueryでformを操る【nameの値を取得する/クリアする】

「「値をクリアする」を追加しました。チェックボックスやラジオボタンの値を何も選択していない状態に戻すときについて触れています。」

JavaScript

iframeの高さを自動調整する

「>匿名さん コメントありがとうございます。 サンプルでは、beforeは何も処理していないので期待する表示にならない、で正解です。 クリックした後が、対応・・・」

JavaScript

MAMPでMySQL Serverが突然起動しなくなった時 → ログファイル削除

「(匿名)さん コメントありがとうございます。何も設定変更していないのに、それまで使用できていたサーバーが突然使えなくなるのは辛いですよね、、。 ここで紹介したや・・・」

MAMP

イラストレーターでレイヤーごとにPNGで書き出す

「コメントありがとうございます! そもそもできるかはわかりませんが、ソースを書き換える必要はあります。 下記記事などが参考になるかもしれません。 illustra・・・」

Illustorator

WEB制作マークアップhtmltableのこと【xhtml編】 | シンプルシンプルデザイン