おまけ:Bootstrapでテーブル作成tableのマークアップの基本テーブルをマークアップするには、基本を抑える必要がありますね。</tbody></table>基本はこんな感じでマークアップしていきます。CSSは何も触っていないので、罫線すら入っていない文字だけの状態になります。CodePen.テーブルのマークアップをする手順としては以下の通りです。テーブルをマークアップする罫線で区切るセル内の余白サイズ,フォントサイズを指定する1列目の横幅を固定する位置揃えを指定する見出しセルの背景色を指定するテーブルをレスポンシブにする順に解説していきます。<thead>罫線で区切るこのままではテキストだけの表になってしまいますので罫線を追加していきます。罫線を追加するにはもちろん「border」を指定します。CodePen.すると、テーブル全体、見出しセル、データセルがそれぞれ罫線で囲んで表示されるため、二重の罫線を引いたように表示されてしまいます。罫線で区切ったように見せるためには、「border-collapseをcollapse」と指定します。すると、罫線が重なって1本の線で区切って表示されます。CodePen.フォントサイズ、セル内の余白、左上寄せに位置調整します。それぞれ、font-sizepaddingtext-align:left;vertical-align:top;を指定することで余白を整えて、上下左右の位置を調整します。1列目の横幅を固定する各セルの幅は、標準ではリキッド(可変)になっていて、セル内のコンテンツの分量に王子で、自動で横幅が決まります。「1列目のコンテンツには改行を入れたくない」という場合は、widthを指定することで幅が固定されます。CodePen.こんな感じで、<tr>のfirst-childに指定してあげれば、1列目のみ幅が固定できます。CodePen.見出し<th>に背景色を設定すれば、完成です。テーブルっぽくなりました。あとは、レスポンシブにしていきます。テーブルをレスポンシブにするスマホでテーブルを見るときは、どうしても読みづらくなってしまいます。列数の多いテーブルは厄介そう、、。CodePen.これは、テーブルの幅を800ピクセルに固定したものです。することで、800ピクセル以下で表示した場合には横スクロールで閲覧できるようになります。}<table>全体を<div>で囲いつつ、<table>にはwidthでテーブルの横幅を800pxに指定します。次に、<div>で全体をマークアップし、「over-flow-x:auto;」を記述します。class=”table-container”>が800ピクセル以下の横幅になると、横スクロールができるようになります。CodePen.Bootstrapだとめちゃくちゃ簡単に作れます。class=”table>とするだけで罫線が引かれて形になるので、簡単な表をサクッと作るならBootstrapでOKですね。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。