表なのか？tableなのか？テーブルなのか？
まぁーーーーいろいろな呼び方がありますよね。
どれが正解なのかで言うと・・・・どれも正解。
Googleの検索結果的には
という結果ですので、tableという表記が大正解のようですね。
しかし、現場でのコミュニケーションでは テーブル というカタカナでの利用が多いですかね。これはうちだけなのかもしれませんが・・・・。
まぁ・・・・そんなお酒のつまみにもならない話はおいといて、、、、。
今回は、知っとけば便利！！
でも覚える事はなかなか難しいかな・・・・。
という table のソースをいつでも手軽に使えるようにまとめてみました。
コピペで使用可能です！
ブラウザや環境によっては見え方が変わる可能性があるので調整してください。
ちなみに、、、、
そのような場合のうちでのサポートはサポート対象外ですので、その点をご理解して頂いた上でご利用をお願いします。
そのような場合はホームぺージレスキューサービスをご利用ください！
HTMLだけで組めるバージョン
1行目を見出しにする
| 見出し | ||
|---|---|---|
| 1 | 2 | 3 |
コード例
<table> <thead> <tr> <th colspan="3">見出し</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table>
ポイント
| thead | 表の行（水平方向）をグループ化するタグ（見出し用） |
|---|---|
| tbody | 表の行（水平方向）をグループ化するタグ（コンテンツ用） |
| colspan | 水平方向のセルの結合 ここでは3つのセルを統合しているので、3をいれる |
セルの横幅を調整
| １ | ２ |
| ３ | ４ |
コード例
width属性で指定する場合
<table> <tr> <td width="30%">1</td> <td width="70%">2</td> </tr> <tr> <td width="width: 30%">3</td> <td width="width: 70%">4</td> </tr> </table>
style属性で指定する場合
<table> <tr> <td style="width: 30%;">1</td> <td style="width: 70%;">2</td> </tr> <tr> <td style="width: 30%;">3</td> <td style="width: 70%;">4</td> </tr> </table>
ポイント
style属性・width属性の異なる属性で横幅を設定しても見た目は同じです。
横幅を指定するだけならwidth属性。
他のstyle属性を入れ込むならstyle属性で指定する事でコードがすっきりします。
| width | 横幅の調整 |
|---|
セル内の文字寄せを指定
左寄せ
| 1 | 2 | 3 |
| 4 | 5 | 6 |
右寄せ
| 1 | 2 | 3 |
| 4 | 5 | 6 |
中央寄せ
| 1 | 2 | 3 |
| 4 | 5 | 6 |
コード例
左寄せ
<table style="text-align:left;"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>
右寄せ
<table style="text-align:right;"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>
中央寄せ
<table style="text-align:center;"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>
ポイント
| text-align | 文字や画像を水平方向にそろえる。 一部のセルだけ指定したい場合は、tdタグに指定します 例）<td style=”text-align:center;”></td> |
|---|---|
| text-align:left | 左寄せ |
| text-align:right | 右寄せ |
| text-align:center | 中央寄せ |
セルを横に統合
| 1 | 2 | 3 |
| 4 | 5 | |
| 6 | 7 | 8 |
コード例
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan="2">4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> </tr> </table>
ポイント
| colspan | 水平方向のセルの結合 ここでは2つのセルを統合しているので、2をいれる |
|---|
横スクロール
| Aプラン | Bプラン | Cプラン | |
| 価格 | 33,800円 | 55,000円 | 88,000円 |
| 特徴 | マーケティング相談＆サイト改善提案 | SEO対策課題抽出＆SEO対策外部対策対応 | SEO対策内部対策対応 |
コード例
<div style="overflow: auto; white-space: nowrap;"> <table> <tr> <td></td> <td>Aプラン</td> <td>Bプラン</td> <td>Cプラン</td> </tr> <tr> <td>価格</td> <td>33,800円</td> <td>55,000円</td> <td>88,000円</td> </tr> <tr> <td>特徴</td> <td>マーケティング相談＆サイト改善提案</td> <td>SEO対策課題抽出＆SEO対策外部対策対応</td> <td>SEO対策内部対策対応</td> </tr> </table> </div>
ポイント
| overflow: auto | 子要素がはみ出した場合にスクロールさせる |
|---|---|
| white-space: nowrap | テキストを自動的に改行させない |
縦に積むテーブルレスポンシブ
| 見出し | 1 | 2 | 3 |
|---|---|---|---|
| 見出し | 4 | 5 | 6 |
| 見出し | 7 | 8 | 9 |
コード例
HTML
<table class="responsive01">
<tr>
<th>見出し</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>見出し</th>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr class="last">
<th>見出し</th>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
CSS
p {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 60px auto 40px;
}
table {
margin: 20px auto;
}
.responsive01 th {
background: #27acd9;
border: solid 1px #ccc;
color: #fff;
padding: 10px;
}
.responsive01 td {
border: solid 1px #ccc;
padding: 10px;
}
@media screen and (max-width: 640px) {
.last td:last-child {
border-bottom: solid 1px #ccc;
width: 100%;
}
.responsive01 {
width: 80%;
}
.responsive01 th,
.responsive01 td {
border-bottom: none;
display: block;
width: 100%;
}
}
ポイント
ソース上は上から順番に要素が並んでいるので、それらをblock要素に指定して横幅100%等にすれば、縦積みのレイアウトにすることができます。
| display: block | 要素の表示形式をblockにする block⇒要素が横いっぱに広がり、縦に並ぶ |
|---|
横並びを縦並びにするテーブルレスポンシブ
| 見出し1 | 見出し2 | 見出し3 | 見出し4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
コード例
HTML
<table class="responsive02">
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
<th>見出し4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="last">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
CSS
p {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 60px auto 40px;
}
th {
background: #27acd9;
border: solid 1px #ccc;
color: #fff;
padding: 10px;
}
td {
border: solid 1px #ccc;
padding: 10px;
}
@media screen and (max-width: 640px) {
.responsive02 {
width: 90%;
}
.responsive02 tr {
display: block;
float: left;
}
.responsive02 tr td,
.responsive02 tr th {
border-left: none;
display: block;
height: 50px;
}
.responsive02 thead {
display: block;
float: left;
width: 30%;
}
.responsive02 thead tr {
width: 100%;
}
.responsive02 tbody {
display: block;
float: left;
width: 70%;
}
.responsive02 tbody tr {
width: 50%;
}
.responsive02 tr td + td {
border-left: none;
}
.responsive02 tbody td:last-child {
border-bottom: solid 1px #ccc;
}
}
ポイント
thead（見出し）とtbody（コンテンツ）をそれぞれ設定し、block要素にします。
block要素にしたものをfloatで横並びにすることで、縦並びの表になります。
高さ指定が必要なので、テキストの量に応じて設定しましょう。
| float: left | 横並びにする |
|---|
まとめ
途中で気が付いたと思われますが、ここでは紹介し切れないぐらいテーブルの組み合わせや種類があります。ここでは、あくまで基本的なソースの組み方のご紹介となりますので、ここの内容を参考に編集を挑戦してください。
挑戦して、、、あれ？？自分では無理かな？？
と思われた場合は下記のサービスのご利用をご検討頂ければと思います。
エクセレントではホームページの更新代行サービスも承っております。
メールでのお問い合わせ
お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。
LINEでのお問い合わせ
お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。
