Ul li 表 レスポンシブ

「section」には「節」や「章」という意味があり、見出しを伴う文書の章や節目、区間であることを表現する際に使用します。

今回の方法は、IE9未満では一部の方法でしか対応できないです…
もしレスポンシブじゃなく、スマホのみでいいなら display:box も使用出来るので、もう少しスマートな記述で済んだりする箇所もございます。

navタグの中には、ul、liタグなどを用いてメニューを作ります。

インラインで表示するため、横並びになります。

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。

次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。

基準となるセル要素に、右方向への連結の場合は colspan 属性を、下方向への連結の場合は rowspan 属性を記述します。col は列（column）を、row は行（row）を表し、span が区間を意味します。連結数を属性値に指定します。

最後に引用についても触れておきます。引用とは、他の情報源（書籍やウェブサイト）から文章や図表などを転載することです。ここでは文章の引用を取り上げます。

「tr」は「table row（テーブルロー）」の略で、表なかの行を作成する際に使用します。

まず全体を table 要素で囲い、その下に「行」を表す tr 要素が二つ、そして各 tr 要素の下に「セル」を表す td 要素が三つずつ書かれています。これで 2 行 × 3 列の表となります。
table 要素と tr 要素はただの入れ物（コンテナ）で、実際に文字（コンテント）を記述するのは td 要素の中であることがわかります。

HTML では下図のように テーブルの範囲 ＞ 1 行の範囲 ＞ セル という 3 層構造でこれを表します。先に “行” で区切ってから、そこにセル（列）を入れていきます。

２列のテーブル場合は、スマホ表示時にth要素とtd要素をdisplay:block;にすればほぼ完成です。と説明されることが多いのですが、実際にはそれだけでは、見栄えよくデザインできない場合もあります。その辺りも含めて一緒に見ていきましょう。

最近のウェブサイトでは表を使う機会が減ってきましたが、HTML は文書を共有・閲覧するための仕組みとして生まれたため、テーブル用の HTML 要素や属性がかなり細かく用意されています。ここではその一部のみを取り上げます。

なお、table 要素に border=”1″ という属性が設定されていますが、これは表に罫線を表示するための古い記述方法です（罫線の見た目はブラウザによって変わります）。table 要素は初期状態では罫線が表示されないので、border 属性を記述しないとテーブルに見えません。テーブルの罫線は CSS で指定するのですが、ひとまず border 属性（本来は非推奨です）を付けておくことにします。

このページの目的は、テーブルのレスポンシブ対応を理解していただいて、今、お手元にあるテーブルがうまくスマホ対応できるようになることです。そのため、コードをコピーしたいだけの方にとっては説明が長く感じるページになっていますので予めご了承ください。