本ページはプロモーションが含まれます。
ブログに挿入する表のHTMLコードをご紹介します。コピペOKです。
基本の表
実物です。
| 見出し |
見出し
|
見出しは強制改行されません。
|
| 見出し |
２列２行
|
３列２行
|
| 見出し |
２列３行
|
３列３行
|
媒体による表示の違い
スマホ／タブレット縦向きでの見え方 ↓
表示しきれない分は右側にはみ出し、横方向にスクロールバーが付いて動きます。
スマホやタブレットのような幅の狭い画面上でも見やすいです。
縦方向には動かないので、スマホの操作もしやすいです。
タブレット横向き／PCでの見え方 ↓
タブレットを横にした場合やPC上ではこのように表の情報が全て表示されます。
長い文章は強制改行されます。
基本の表のHTMLコード（CSS必要なし）
|
<style>
table {
border-collapse: collapse;
}
@media (max-width: 1024px) {table {
white-space: nowrap!important;
}
}
th {
border: solid 1px black!important;
font-size:170%!important;
font-weight:normal!important;
white-space: nowrap!important;
}
td{
border: solid 1px black!important;
}
</style>
<table>
<tbody>
<tr>
<th>見出し</th>
<th><p>見出し</p></th>
<th><p>見出しは強制改行されません。</p></th>
</tr>
<tr>
<th>見出し</th>
<td><p>２列２行</p></td>
<td><p>３列２行</p></td>
</tr>
<tr>
<th>見出し</th>
<td><p>２列３行</p></td>
<td><p>３列３行</p></td>
</tr>
</tbody>
</table>
|
HTML解説
|
<style>表のスタイルを指定
table {↓表の全てに以下を反映
border-collapse: collapse;隣接するセルで境界線を共有する
}↓幅1024px以下の端末の場合、表の全てに以下を反映
@media (max-width: 1024px) {table{
white-space: nowrap表を強制改行しない!important;
}
}
th{見出しに以下を反映
border枠線: solid実線 1px線の太さ black線の色!important;
font-size:170%見出しの文字を大きくする!important;
font-weight:normal文字を太くしない!important;
（指定しないと、デフォルトで太字になる）
white-space: nowrap見出しを強制改行しない!important;
（指定しないと、デフォルトで強制改行される）
}
td{普通のセル
border枠線: solid実線 1px線の太さ black線の色;
}
</style>＿＿＿表のスタイルの指定終了＿＿＿
<table>ここから表
<tbody>表の本体
<tr>ここから１行目
<th>見出し</th>
<th><p>見出し</p></th>
<th><p>見出しは強制改行されません。</p></th>
</tr>＿＿＿１行目終わり＿＿＿
<tr>ここから２行目
<th>見出し</th>
<td><p>２列２行</p></td>
<td><p>３列２行</p></td>
</tr>＿＿＿２行目終わり＿＿＿
<tr>ここから３行目
<th>見出し</th>
<td><p>２列３行</p></td>
<td><p>３列３行</p></td>
</tr>＿＿＿３行目終わり＿＿＿
</tbody>＿＿＿表の本体終わり＿＿＿
</table>＿＿＿表終わり＿＿＿
|
- ・スタイル指定コードは下のコードが優先して反映されます。
- ・スタイル指定で上手く反映されないコードがある場合は、「 ; 」の前に「!important」と入力すると優先して反映されます。
- <tr></tr>は表の１行を表しています。
- <th></th>は見出しのセル、<td></td>は普通のセルを表しています。
- <p></p>はセル内の１行を表しています。
- <>が付けられた全てのタグは、終了を表す</>がセットになっています。
- 大量のデータを扱った表を作る場合は、このサイトでExcelからHTMLの表に変換した後に編集すると良いと思います。↓
- エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
応用１：形式を変える
こんな感じに形式を変えられます。↓
| 見出し |
見出し
|
見出し
|
| 見出し |
２列２行
|
３列２行
|
|
２列３行
|
３列３行
|
| 見出し |
２列４行：枠をまたがることができます。
|
| 見出し |
２列５行：枠を減らせます。
|
セルの一つ一つに「colspan（右枠にまたがる）」と「rowspan（下枠にまたがる）」を指定します。
形式を変えた表のHTMLコード（CSS必要なし）
|
<style>
table {
border-collapse: collapse;
}
@media (max-width: 1024px) {table {
white-space: nowrap!important;
}
}
th {
border: solid 1px black!important;
font-size:170%!important;
font-weight:normal!important;
white-space: nowrap!important;
}
td{
border: solid 1px black!important;
}
</style>
<table>
<tr>
<th>見出し</th>
<th>
<p>見出し</p>
</th>
<th>
<p>見出しは強制改行されません。</p>
</th>
</tr>
<tbody>
<tr>
<th rowspan="2">見出し</th>
<td>
<p>２列２行</p>
</td>
<td>
<p>３列２行</p>
</td>
</tr>
<tr>
<td>
<p>２列３行</p>
</td>
<td>
<p>３列３行</p>
</td>
</tr>
<tr>
<th>見出し</th>
<td colspan="2">
<p>２列４行：枠をまたがることもできます。</p>
</td>
</tr>
<tr>
<th>見出し</th>
<td>２列５行：枠は減らせます。</td>
</tr>
</tbody>
</table>
|
HTML解説
|
<style>
table {
border-collapse: collapse;
}
@media (max-width: 1024px) {table {
white-space: nowrap!important;
}
}
th {
border: solid 1px black!important;
font-size:170%!important;
font-weight:normal!important;
white-space: nowrap!important;
}
td{
border: solid 1px black!important;
}
</style>
<table>
<tbody>
<tr>
<th>見出し</th>
<th><p>見出し</p></th>
<th><p>見出しは強制改行されません。</p></th>
</tr>
<tr>
<th rowspan="2"１行下にまたがる>見出し</th>
<td><p>２列２行</p></td>
<td><p>３列２行</p></td>
</tr>
<tr>
<td><p>２列３行</p></td>
<td><p>３列３行</p></td>
</tr>
<tr>
<th>見出し</th>
<td colspan="2"１列右にまたがる><p>２列４行：枠をまたがることもできます。</p></td>
</tr>
<tr>
<th>見出し</th>
<td>２列５行：枠は減らせます。</td>
</tr>
（colspanとrowspanを指定しないで列を減らすと枠が減る。）
</tbody>
</table>
|
応用２：色や線の太さを変える
・縦軸と横軸で見出しの色を変えたい
・同じ記事内で見出しの色が違う表を貼りたい
・重要なセルにだけ色を付けたい
・線の太さを変えたい
こんな感じ↓
| 角(kado) |
横(yoko)
|
横(yoko)
|
| 縦(tate) |
２列２行
|
３列２行
|
| 縦(tate) |
２列３行
|
３列３行：目立たせたいセルに色を付けられます。
|
見出しの一つ一つに「class指定」をして色を変えます。
色を変えた表のHTMLコード（CSS必要なし）
|
<style>
table {
border-collapse: collapse;
}
@media (max-width: 1024px) {table {
white-space: nowrap!important;
}
}
th{
border: solid 1px black!important;
font-size:170%!important;
font-weight:normal!important;
white-space: nowrap!important;
}
.tate{
background-color:pink!important;
border-right:solid 3px black!important;
}
.kado{
background-color:silver!important;
border-right:solid 3px black!important;
border-bottom:solid 3px black!important;
}
.yoko{
background-color:lightblue!important;
border-bottom:solid 3px black!important;
}
.kyoutyou{
background-color:yellow!important;
}
td{
border: solid 1px black;
}
</style>
<table>
<tr>
<th class="kado">角(kado)</th>
<th class="yoko">
<p>横(yoko)</p>
</th>
<th class="yoko">
<p>横(yoko)</p>
</th>
</tr>
<tbody>
<tr>
<th class="tate">縦(tate)</th>
<td>
<p>２列２行</p>
</td>
<td>
<p>３列２行</p>
</td>
</tr>
<tr>
<th class="tate">縦(tate)</th>
<td>
<p>２列３行</p>
</td>
<td class="kyoutyou">
<p>３列３行：目立たせたいセルに色を付けられます。</p>
</td>
</tr>
</tbody>
</table>
|
HTML解説
|
<style>
table {
border-collapse: collapse;
}
@media (max-width: 1024px) {table{
white-space: nowrap!important;
}
}
th{
border: solid 1px black!important;
font-size:170%!important;
font-weight:normal!important;
white-space: nowrap!important;
}
td{
border: solid 1px black;
}
.tate{クラス名tateに以下を反映
background-color:pink背景色!important;
（見出しの色を指定しないとデフォルトで薄いグレーになる）
border-right枠右側の線:solid 3px black!important;
}
.kado{
background-color:silver!important;
border-right:solid 3px black!important;
border-bottom枠下の線:solid 3px black!important;
}
.yoko{
background-color:lightblue!important;
border-bottom:solid 3px black!important;
}
.kyoutyou{
background-color:yellow!important;
}
</style>
<table>
<tr>
<th class="kado">角(kado)</th>
<th class="yoko"><p>横(yoko)</p></th>
<th class="yoko"><p>横(yoko)</p></th>
</tr>
<tbody>
<tr>
<th class="tate">縦(tate)</th>
<td><p>２列２行</p></td>
<td><p>３列２行</p></td>
</tr>
<tr>
<th class="tate">縦(tate)</th>
<td><p>２列３行</p></td>
<td class="kyoutyou"><p>３列３行：目立たせたいセルに色を付けられます。</p></td>
</tr>
</tbody>
</table>
|
- <>タグの中の文字の後ろに半角スペースを空けて「class="任意のアルファベット"」を入れることによって、そのタグが表す箇所だけに特別な指定ができます。
- ・↓色のコードはこのサイトで調べられます。
- WEB色見本 原色大辞典 - HTMLカラーコード
以上、ご参考になれば幸いです。
リンク
【参考記事】
catnose
【HTML】tableによる表の作り方・コンプリートガイド
