表のレイアウト調整方法

書類テンプレートに挿入した表は、HTMLモードで編集することで、レイアウトを調整できます。

お問い合わせの多い以下のケースについて、調整方法を説明します。

• 表の位置や幅を調整したい
• 余白を詰めたい
• 列数の異なる表同士を結合したい
• 罫線を非表示にしたい

表の位置や幅を調整する

表全体を右寄せに配置する

以下のコードをコピーアンドペーストして編集してください。

<div style="width: 70%; float: right;">
<table style="width: 100%">
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
</tr>
</tbody>
</table>
</div>

表全体を左寄せに配置する

以下のコードをコピーアンドペーストして編集してください。

<div style="width: 70%; float: left;">
<table style="width: 100%">
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
</tr>
</tbody>
</table>
</div>

表全体を中央寄せに配置する

以下のコードをコピーアンドペーストして編集してください。

<div style="width: 70%; margin:0 auto;">
<table style="width: 100%">
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
</tr>
</tbody>
</table>
</div>

表全体の横幅を調整する

表の<div style>タグ内にあるwidth : x%;の数値（x）を変更することで、表全体の幅を調整できます。

行の縦幅を指定する

以下のコードをコピーアンドペーストして編集してください。 行の縦幅は、<tr style>タグ内のheight: 50pxの数値を変えると調整できます。

<table>
<tbody>
<tr style="height: 50px">
<td>データ1-1
</td>
<td>データ1-2</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
</tr>
</tbody>
</table>

余白を詰める

表の下にできた空白を削除する

表の下に意図せず生じた空白を削除したい場合は、表の開始タグ<table>内のstyle=に続けて、以下を追記してください。 <table>タグ内にstyle=がない場合は、style=も追記してください。

"margin-bottom: 0px;"

画像を表示する

表と表の間にある空白を削除する

表と表の間に意図せず生じた空白を削除したい場合は、1つ目の表の開始タグ<table>内にあるstyle=に続けて、以下を追記してください。 <table>タグ内にstyle=がない場合は、style=も追記してください。

"margin-bottom: 0px;" 

画像を表示する

さらに、1つ目の表の終了タグ</table>と2つ目の表の開始タグ<table>の間に<p>タグが入っていた場合は、削除します。

画像を表示する 画像を表示する

列数の異なる表同士を結合する

1つの表でセルの結合を繰り返すと、列の幅が調整しづらくなることがあります。 以下の方法で列数の異なる2つの表を結合することで、1つの表のように表現できます。

まずは同じ列数の項目をまとめた表を、それぞれ追加します。

画像を表示する

それぞれの表の開始タグ<table>内のstyle=に続けて、以下を追記してください。 <table>タグ内にstyle=がない場合は、style=も追記してください。

"margin-bottom: -1px;"

画像を表示する 画像を表示する

罫線を非表示にする

罫線の全体を非表示にする

表の罫線を非表示にしたい場合は、表の開始タグ<table>内または<td>タグ内のstyle=に続けて、以下を追記してください。 タグ内にstyle=がない場合は、style=も追記してください。

"border-style: hidden;" 

画像を表示する 画像を表示する

罫線の一部を非表示にする

表の罫線の一部を非表示にしたい場合は、表の開始タグ<table>内または<td>タグ内のstyle=に続けて、以下を追記してください。 タグ内にstyle=がない場合は、style=も追記してください。

上の罫線を非表示にする

"border-top-style: hidden;"

下の罫線を非表示にする

"border-bottom-style: hidden;"

右の罫線を非表示にする

"border-right-style: hidden;"

左の罫線を非表示にする

"border-left-style: hidden;""

画像を表示する 画像を表示する