たまに出てくるWebコーディング欲。

複雑なものを作りたくなってくるけど、沼るので妄想して済ませてます。如月です。

今回は「これ、どうやったの？」って人が居たっぽいので…

表について綴っていこうと思います。

Webで『表』を記すものは、『 table（テーブル）』と言います。

＊以前のブログで使用したものを再利用しています。

上記を表示させると…

上見出し０	上見出し１	上見出し２	上見出し３
左見出し１	内容１－１	内容１－２	内容１－３
左見出し２	内容２－１	内容２－２	内容２－３
左見出し３	内容３－１	内容３－２	内容３－３

こんな状態に。

スクロールバーが無駄についてるように見えるかもしれませんが、スマホの表示幅で横がはみ出してしまった場合にスクロールできるようにしているんです。

以前更新した記事をAmebaアプリで見ると、スクロールバーは消えているようです。

▼右側が切れてますね。

▼横スクロールさせると…

表示されていなかった右側の欄があらわれます。

簡単に説明すると、横方向ではみ出した部分はスクロールするという overflow-x: scroll; を指定し、表そのものにははみ出した部分は自動改行しない（折り返ししない）ようにするという white-space: nowrap; を指定しています。

そうすることで横長の表に仕上がります。

table（テーブル）の仕組みですが…

thead＝table header テーブルの見出し

tbody＝table body テーブルの内容

tr＝table row テーブルの行

th＝table header cell テーブルの見出しにするセル

td＝table data cell テーブルの内容を示すセル

HTMLでは1行ずつ作成していきます。

これが慣れるまでアレ！？となるやつで

左の列から順に記述していくので、手書きでザックリ描いた表をHTMLで再現する時に1行ずつ（1段ずつ）起こしていけばいいんだな！と躍起になっていたのに、見出しの位置がよく分からなくなったりします

1行目は黒、2行目は赤、3行目は緑、4行目は青で表示させていますが、見出しは最初の1行目と左の『1列』です。

そのため <th> を使うのは、黒の太文字の箇所と赤、緑、青それぞれの最初の1つ目になります。

格子状の簡単な表なら上記のコピーで可能です。

慣れるまでは大変かもしれませんが、すっきりした見た目でまとめられるので、如月は結構好きなんです。

【HTML編集】一覧表を作るには？