表（テーブル）サンプル

表のテンプレ変更についての提案

今までの「テーブル（表）」ボタン使用

テーブル内見出し的な奴
AAAAA	aaaaa
BBBBB	bbbbb
DDDDD	ddddd

<table class="article_table">
<thead>
<tr>
<th colspan="2">テーブル内見出し的な奴</th>
</tr>
</thead>
<tbody>
<tr>
<th>AAAAA</th>
<td>aaaaa</td>
</tr>
<tr>
<th>BBBBB</th>
<td>bbbbb</td>
</tr>
<tr>
<th>DDDDD</th>
<td><a href="xxxx" class="underline">ddddd</a></td>
</tr>
</tbody>
</table>

　表のタイトル（『テーブル内見出し的な奴』）が、「表の列の見出し」として表内に組み込まれてしまい、googleに「表のタイトル」として認識されづらい？

タイトルをキャプション（表のタイトル）として入力

テーブルのタイトル

AAAAA	aaaaa
BBBBB	bbbbb
DDDDD	ddddd

<table class="article_table">

<caption><strong>テーブルのタイトル</strong></caption>

<tbody>
<tr>
<th>AAAAA</th>
<td>aaaaa</td>
</tr>
<tr>
<th>BBBBB</th>
<td>bbbbb</td>
</tr>
<tr>
<th>DDDDD</th>
<td><a href="xxxx" class="underline">ddddd</a></td>
</tr>
</tbody>
</table>

参照URL

札幌の冬を満喫！おすすめのアクティビティ・観光スポット

表内での「・」は、文字列利用OK！→先に「表」として認識されるので

城南宮

住所	京都府京都市伏見区中島鳥羽離宮町7
2024（令和6）年 2月のイベント	・城南宮七草粥：2月11日（日・祝） ・しだれ梅と椿まつり：2月18日（日）〜3月22日（金）

<table class="article_table">
<caption><strong>城南宮</strong></caption>
<tbody>
<tr>
<th>住所</th>
<td>京都府京都市伏見区中島鳥羽離宮町7</td>
</tr>
<tr>
<th>2024（令和6）年<br>
2月のイベント</th>
<td>
・城南宮七草粥：2月11日（日・祝）<br>
・しだれ梅と椿まつり：2月18日（日）〜3月22日（金）
</td>
</tr>
</tbody>
</table>

列見出しあり →
幅指定含めコード確認の必要あり！

列幅や改行は未指定

	列見出し1	列見出し2
AAAAA	aaaaa	11111
BBBBB	bbbbb	22222
DDDDD	ddddd	33333

<table class="article_table">
<thead>
<tr>
<th>　</th>
<th>列見出し1</th>
<th>列見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<th>AAAAA</th>
<td>aaaaa</td>
<td>11111</td>
</tr>
<tr>
<th>BBBBB</th>
<td>bbbbb</td>
<td>22222</td>
</tr>
<tr>
<th>DDDDD</th>
<td><a href="xxxx" class="underline">ddddd</a></td>
<td>33333</td>
</tr>
</tbody>
</table>

列幅や非改行を指定

地域	平均気温	平均最高気温	平均最低気温
京都	5.4℃	10.0℃	1.6℃
園部	2.1℃	7.0℃	-1.5℃

<table class="article_table">
<thead>
<tr>
<th>地域</th>
<th>平均気温</th>
<th>平均最高気温</th>
<th>平均最低気温</th>
</tr>
</thead>
<tbody>
<tr>
<th nowrap="nowrap">京都</th>
<td width="300">5.4℃</td>
<td width="30">10.0℃</td>
<td width="500">1.6℃</td>
</tr>
<tr>
<th>園部</th>
<td>2.1℃</td>
<td>7.0℃</td>
<td>-1.5℃</td>
</tr>
</tbody>
</table>

KKday商品

<div class="article_panel__color--●色●">
<!-- 画像回り込み 右・左　article_float--right / article_float--left -->
<div class="article_float--right">
<div class="article_float__img">
<a href="●リンク先URL●"></a>
</div>
<p class="article_float__text">
●テキスト●<br>
<div class="margin-b-20"></div>
<strong><a href="●リンク先URL●">●リンク先プラン名など●</a></strong><br>
<small>※KKdayのサイトへ遷移します</small></p>
</div></div>