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

最近の記事

cronっぽいことをPHPでjsonとして実装する

外部のAPIを利用する際、リクエスト回数が制限されることがある。また、リクエスト回数が制限され、かつ毎日更新をルールとする外部のAPIもある。 そんなと・・・

php

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

インスタに投稿した画像を自動でホームページでも更新されるようにしたい。もっとも簡単に実現する方法を紹介する。 公式リファレンスInstagram・・・

API

名刺代わりの超絶ミニマムなブランディングページ

このたび、ハンドメイドアクセサリー作家さんのWebサイト制作させていただきました! Sunny Side Accessory(サニーサイド アクセサリー・・・

お仕事・制作日記

案件、承っております

2021年2月現在、案件承っております。とくに短期、週2、3日での外注をお考えでしたら、ぜひご連絡ください。 当方、2015年2月より「シンプルシンプル・・・

お仕事・制作日記

インタラクションデザイン

5年くらい前に購入した書籍「インタラクションデザイン」。この書籍内ではたくさんの事例が紹介されている。残念ながらその多くは現在閲覧することができなくなっていた・・・

デザイン

Advanced Custom Fields 名前を変更して、データも反映させる

WordPressを自作する上でもはや欠かせないプラグインの一つが、「Advanced Custom Fields」。 名前を変更しようと思って、Wor・・・

WordPress

配列の重複を削除する

配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・

JavaScript

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・・・

制作効率化

人気の記事

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

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

WordPress

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

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

JavaScript

iframeの高さを自動調整する

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

JavaScript

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

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

MAMP

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

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

WordPress

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

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

JavaScript

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

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

WordPress

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

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

Illustorator

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

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

WordPress

MAMPの日時(タイムゾーン)を変更する

MAMPを使用していて、日時の情報を制御しようとしたとき、取得している日時が日本時間ではないことに気がついた。 時差を計算してPHPでプログラミングしていたが、・・・

MAMP

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