HTMLで表の行間を設定する方法-htmlチュートリアル-php.cn

HTMLで表の行間を設定する方法

WBOY

リリース： 2021-11-11 17:11:08

オリジナル

22351 人が閲覧しました

HTML では、margin-bottom スタイルと margin-top スタイルを table 要素に追加して行間隔を設定できます。構文「

HTMLで表の行間を設定する方法

# このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、デル G3 コンピューター。

HTML で表の行間隔を設定する方法:

1. を設定すると、下の表と表の間の距離を維持できます。テーブルの margin-bottom 属性。 margin-bottom 属性は要素の下マージンを設定します。

コードは次のとおりです:

<table style="margin-bottom:下外边间距值" >

ログイン後にコピー

以下の例を見てみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button</title>
</head>
<body>
<table style="border: 1px solid black;margin-bottom:100px" width="400" height="100" >
<tr>
<td style="border: 1px solid black" >1</td>
<td style="border: 1px solid black" >2</td>
<td style="border: 1px solid black" >3</td>
<td style="border: 1px solid black" >4</td>
</tr>
<table>
<table style="border: 1px solid black" width="400" height="100" >
<tr>
<td style="border: 1px solid black" >1</td>
<td style="border: 1px solid black" >2</td>
<td style="border: 1px solid black" >3</td>
<td style="border: 1px solid black" >4</td>
</tr>
<table>
</body>
</html>

ログイン後にコピー

出力結果:

HTMLで表の行間を設定する方法

2. テーブルの margin-top を設定することで、上のテーブルからの距離を保つことができます。 margin-top 属性は、要素の上マージンを設定します。

コードは次のとおりです:

<table   style="max-width:90%" >

ログイン後にコピー

以下の例を見てみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button</title>
</head>
<body>
<table style="border: 1px solid black;margin-bottom:100px" width="400" height="100" >
<tr>
<td style="border: 1px solid black" >1</td>
<td style="border: 1px solid black" >2</td>
<td style="border: 1px solid black" >3</td>
<td style="border: 1px solid black" >4</td>
</tr>
<table>
<table style="border: 1px solid black;margin-top:100px" width="400" height="100" >
<tr>
<td style="border: 1px solid black" >1</td>
<td style="border: 1px solid black" >2</td>
<td style="border: 1px solid black" >3</td>
<td style="border: 1px solid black" >4</td>
</tr>
<table>
</body>
</html>

ログイン後にコピー

出力結果:

HTMLで表の行間を設定する方法