表のレイアウト調整方法
- 閱讀對象:
- 管理者・員工
- 適用方案:
- 付費選項
書類テンプレートに挿入した表は、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;""
画像を表示する
画像を表示する
協助改善幫助中心。
這篇文章有幫助到您嗎?