【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

html&cssを用いて見やすいテーブルを作成する

html&cssを用いて見やすいテーブルを作成する

吉永です。
普段サイトを見ていると、テーブルを使った説明箇所をみることがあると思います。例えばよくテーブルが使用される部分としては、会社概要や料金プランなどがあります。
図1 テーブルの使用例
テーブルの使用例

テーブルはいくつかの要素を比較したり、読者にコンパクトに情報を伝えることができるのでとても重宝されます。今回はサイトでよく見られるテーブルがどのようなHTML&CSSで記述されているのか解説していきます。

htmlのみで、基本的なテーブルを作成する

htmlのtableタグはテーブルを作成する際に使用します。ですが、tableタグのみでテーブルが形成されるのではなく、trタグやtdタグが必要です。まず、htmlタグのみで基本的なテーブルを作成してみました。例1を見てください。

例1 簡単なテーブルを作成する

例1のコード

<table>
        <thead>
            <tr>
                <td></td>
                <th scope="col">生年</th>
<!--「scope="col"」はこの見出しセルは下方向にあるセルと対応していることを示している-->
                <th scope="col">没年</th>
        <th scope="col">出身地(旧国名)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>織田信長</th>
                <td>1534年</td>
                <td>1582年</td>
<td data-label="出身地(旧国名)">尾張国</td>
            </tr>
            <tr>
                <th>真田幸村</th>
                <td>1567年</td>
                <td>1615年</td>
<td data-label="出身地(旧国名)">信濃国</td>
            </tr>
<tr>
                <th>伊達政宗</th>
                <td>1567年</td>
                <td>1636年</td>
<td>出羽国</td>
            </tr>
        </tbody>
    </table>   

見やすいテーブルには程遠いですが、簡単なテーブルを作ることができました。かなりの種類のhtmlタグが出てきたので、図を用いて整理したいと思います。以下の図を見てください。
図2 テーブルを作成する際に使用するhtmlタグ
テーブルにおけるhtmlの適用範囲
thタグとtdタグの違いに関してですが、thタグは見出しを示すのに対し、tdタグは通常の文を示します。また、テーブルの形式は用途によって変わってくるので、この形式が最適解であるとは限りません。ですので、さまざまなサイトのテーブルを研究してみるのも良いかもしれません。

基本的なテーブルはhtmlのみで作ることができますが、これだけでは読者が読みやすいテーブルとは言えません。そこで、ここからはhtmlだけでなくcssも活用しながら、読者が分かりやすいテーブルを作成していきます。

見やすいテーブルの作成例

cssを用いて、見やすいテーブルを作成する

まず、よく見かけるテーブルを作成するために主に以下のcssプロパティを適用します。
  ・セル同士の間にある枠線を引く→cssのborderプロパティ
  ・余白の調整→cssのpadding,marginプロパティ
  ・色を変更する→cssのcolor,background-colorプロパティ

その他のcssプロパティも、実際にテーブルを作成しながら調整しつつ、順次追加していくと良いでしょう。例2を見てください。
例2 cssを使ってテーブルの見栄えをよくする

HTMLは例1と同様

table {
/*ボーダー線を重ねて表示する*/
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width:650px;
}

table tr {
 border: 1px solid #bbb;
}
table th,
table td {
    padding: 5px 10px 5px 5px;
  border-right: 1px solid #bbb;
/*中央寄せ*/
  text-align: center;
}
table thead tr{
  background-color: #333333;
  color:white;
}
}

かなりテーブルらしく、かつ見やすくなったと思います。

擬似クラスを用いて奇数行だけに色をつける

疑似クラスを用いることで、指定要素にcssを適用することができます。この方法を用いれば、テーブルの奇数行のみにcssを適用することができます。例3を見てください。

例3 疑似クラスを用いてテーブルを見やすくする

例3
HTMLは例1と同様

table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width:650px;
}

table tr {
 border: 1px solid #bbb;
}
table th,
table td {
    padding: 5px 10px 5px 5px;
  border-right: 1px solid #bbb;
  text-align: center;
}
table thead tr{
  background-color: #333333;
  color:white;
}
/*以下を追加*/
 table tbody td:nth-of-type(odd) {
       background-color: #EEEEEE;
}

このように疑似クラスを使用することで、セルごとの敷居がはっきりし、読者がよりテーブルを読みやすくなります。さらに行数の多いテーブルを作成する際にも、このように疑似クラスを使用すれば効率的にcssを適用させることができます。

疑似クラスに関して、詳しく知りたい方は以下のページを参考にしてください。
https://www.aiship.jp/knowhow/archives/31361

レスポンシブなテーブルを作る

例3までのテーブルではスマホで表示した際、テーブルの一部が画面から見えなくなってしまいます。多くの人がサイトをスマホで閲覧する現在において、このような状態を放置することは良くありません。

そこで、スマホのような小さい画面にも対応するテーブルを作成する必要があります。例4のページを開いて、PC版とスマホ版の両方で表示させてみてください。

例4 レスポンシブなテーブルを作成する

<!--data-labelを追加-->
<table>
        <thead>
            <tr>
                <td></td>
                <th scope="col">生年</th>
                <th scope="col">没年</th>
        <th scope="col">出身地(旧国名)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>織田信長</th>
                <td data-label="生年">1534年</td>
                <td data-label="没年">1582年</td>
<td data-label="出身地(旧国名)">尾張国</td>
            </tr>
            <tr>
                <th>真田幸村</th>
                <td data-label="生年">1567年</td>
                <td data-label="没年">1615年</td>
<td data-label="出身地(旧国名)">信濃国</td>
            </tr>
<tr>
                <th>伊達政宗</th>
                <td data-label="生年">1567年</td>
                <td data-label="没年">1636年</td>
<td data-label="出身地(旧国名)">出羽国</td>
            </tr>
        </tbody>
    </table>   
table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width:650px;
}
table tr {
 border: 1px solid #bbb;
}
table th,
table td {
    padding: 5px 10px 5px 5px;
  border-right: 1px solid #bbb;
  text-align: center;
}
table thead tr{
  background-color: #333333;
  color:white;
}
 table tbody td:nth-of-type(odd) {
       background-color: #EEEEEE;
}
/*以下を追加*/
@media screen and (max-width: 600px) {
  table {
    border: 0;
/*横幅100%表示させる(重要)*/
    width:100%
  }
  table th{
    background-color: #333333;
    color: white;
    display: block;
/*右の不要なボーダー線を非表示に*/
    border-right: none;
  }
  table thead {
    display:none;
  }
  table tr {
    display: block;
    margin-bottom:20px;
  }
  table td {
    border-bottom: 1px solid #bbb;
    display: block;
    text-align: center;
    position: relative;
    border-right: none;
  }
  table td::after {
    content: attr(data-label);
/*data-labelの値をcontent:attr()で取得し、その値を表示する*/
    font-weight: bold;
    position: absolute;
    left: 10px;
  }
}

重要な点としては、tableタグのwidthを100%にする点です。こうすることで、テーブルが常に横幅いっぱいに表示され、一部が画面から消えるという問題点が解消されます。

テーブルがデバイスによって最適な形に変化していることが分かると思います。このようにcssを適用させることによって、レスポンシブなテーブルを作成することができます。

まとめ

ここまでのことをまとめると、
 ・テーブルを構成しているhtmlタグはtableタグだけでなく、tdタグなど数多く存在する
 
 ・cssを活用することで、さまざまなバリエーションのテーブルを作成できる
 
 ・マルチデバイスに適応できるテーブルを作成する必要がある

このようにテーブルを作成することで、より読者に分かりやすく見やすいサイトを作ることができるので、ぜひ活用してください。
 

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+