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の順に記述する

最近の記事

MAMP を 5.7 から 6.2 にアップデートした

5年以上前と比べると、アップデートが簡単で驚く。とくに記事にするまでもないと思いつつ、一応備忘録。 インストールすると、既存のディレクトリはそのままに別・・・

MAMP

Briefly unavailable for scheduled maintenance. Check back in a minute. → . maintenance を削除

プラグインを更新中に、誤って、違うページにアクセスしまいました。すると、管理画面だけでなく、公開中のすべての画面が「briefly unavailable f・・・

WordPress

GulpでERRが出てテンパった → gyp: No Xcode or CLT version detected! → PostCSS plugin autoprefixer requires PostCSS 8

Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりG・・・

制作効率化

ビジネス前提ワークシート

書籍「LEAN UX リーン思考によるユーザエクスペリエンス・デザイン」から抜粋。 「前提の宣言」「MVPの作成」「実験の実行」「フィードバックとリサー・・・

知識編

リーン思考のUXデザイン

LEAN UX は、コラボレーションと部門/領域横断的な手法によって、製品の本質を素早く明らかにするための実践的手法であり、これによって文書への過度な依存を減・・・

知識編

ES6(ES2015)の主な変更点

オブジェクト指向 クラス定義 JavaScriptは厳密にはクラスがない、プロトタイプベースのオブジェクト指向言語。ES6でclass構文が導入さ・・・

JavaScript

JavaScriptスタイルガイド

書籍「メンテナブルJavaScript」と Google JavaScript Style Guide 和訳 を参考に自分なりのJavaScriptスタイルガ・・・

JavaScript

投稿を公開したときに指定したページにアクセスする

この記事では「管理画面で投稿やカスタム投稿の公開ステータスを更新したときに何かしらの処理をする」方法の備忘録です。 functions.php を修正し・・・

WordPress

ローカルフォントをWebフォント指定する

Google Fonts はとても便利だが、画面に表示するまでの遅延が気になったので、同様の効果をローカルにあるフォントを利用して実現させる。 事前に用・・・

CSS

[ソフト] Web font用のwoff、woff2にフォントを変換する無料サービス

WOFFコンバータ ダウンロードhttps://opentype.jp/woffconv.htm 以下、リンク先の「概要」を抜粋。 フォント・・・

CSS

人気の記事

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

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript

WP_Queryを使って絞り込み検索するのにコレは便利!

めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・

WordPress

http://localhost:8888/ → http://localhost/

http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・

MAMP

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・

JavaScript

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

【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・

Illustorator

Advanced Custom Fields を使った条件分岐(セレクトボックス、チェックボックス、ラジオボタン、真偽)のテンプレート記述方法

前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・

WordPress

管理画面のカスタム投稿一覧で並び順を変更する

WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・

WordPress

アーカイブページでカスタムフィールドやタクソノミーで絞り込みした状態でリスト表示する

<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・

WordPress

カウントアップ、カウントダウンするJavaScript

ポイントを使ったり、増やしたりしたときに、結果のポイント数に差し替えるのではなくて、カウントアップしたり、カウントダウンして動的に動かそうと思って作ってみた。・・・

JavaScript

WordPressのカテゴリー一覧ページでカテゴリー名とスラッグを取得する → get_queried_object()

やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・

WordPress

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