ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

表の概要の追加

表に概要を追加してみよう

表に概要を追加してみましょう。
概要を追加するには、summary属性を使います。

summary属性とは

summary属性とは、表のおおまかな概要や内容を説明するための要素です。こちらを追加することにより、作成した表が何について説明されているのかを検索エンジンやブラウザなどに伝えることができます。

<table summary="表の概要">

また、ハンディキャップのある方でも表の内容を把握できるように、音声読み上げや点字に利用されたりもします。

どんな方にでも快適にホームページを見てもらうのは大事なことです。使い勝手の良いホームページにするためにも、ぜひ追加しておきましょう。

summary属性を追加する

それでは、これまでの表にsummary属性を追加してみましょう。
表の概要は、「学校の時間割」とします。

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>表の作成</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<table class="tableborder" summary="学校の時間割">

<caption>時間割</caption>

 <tr>
  <th>時間</th>
  <th>教科</th>
  <th>担任</th>
  <th>場所</th>
 </tr>

 <tr>
  <td>一時間目</td>
  <td>国語</td>
  <td>西田</td>
  <td rowspan="2">第1教室</td>
 </tr>

 <tr>
  <td>二時間目</td>
  <td>数学</td>
  <td>入部</td>
 </tr>

 <tr>
  <td>三時間目</td>
  <td>社会</td>
  <td>野田</td>
  <td>第2教室</td>
 </tr>

 <tr>
  <td colspan="4">昼休み</td>
 </tr>
</table>

summary属性を追加してブラウザで確認しても、なにも表示されません。
しかし、「音声ブラウザ」など、専用ブラウザで見ている場合、特定の操作をすることによりsummary属性が読み上げられます。

ホームページは世界中から、様々な人がアクセスしています。
なるべく、どんな環境でも快適に見ることのできるホームページを作るようにしましょう。

覚えておきたいポイント

使いやすいホームページを目指そう

必ずsummary属性を付ける必要はありませんが、音声ブラウザに対応したりと付けておいた方が親切です。
また、Googleなどの検索エンジンクローラーもsummaryを認識してくれます。

【STEP.5】カラム(段組)の概要
« 前のページへ 表の縦幅・横幅を調整

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。