HTML でテーブルを設定する方法の詳細な紹介-フロントエンドQ&A-php.cn

HTML でテーブルを設定する方法の詳細な紹介

PHPz

リリース： 2023-04-13 14:09:05

オリジナル

9105 人が閲覧しました

Web デザインでは、テーブルは一般的に使用される書式設定方法であり、データを整理して表示するために使用できます。 HTML では、テーブルはタグによって定義および設定されます。ここでは、HTMLでテーブルを設定する方法を詳しく紹介します。

1. テーブルを作成する

HTML では、テーブルは <table> タグで定義されます。次のコードを使用して、単純なテーブルを作成できます。

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

ログイン後にコピー

上記のコードでは、<table> タグを使用してテーブルを定義し、<tr> タグを使用してテーブルを定義します。 タグでテーブルの行を定義し、<td> タグでテーブルのセルを定義します。このうち、<td>はセルの内容を表し、<td>の各ラベルはセルを表します。

2. 表の境界線を設定する

HTML では、表の境界線を設定することで表の外観を変更できます。 <table> タグの border 属性を設定することで、テーブルの境界線のサイズを変更できます。コードは次のとおりです。

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

ログイン後にコピー

上記のコードでは、border 属性が 1 に設定されています。これは、テーブルの境界線のサイズが 1 ピクセルであることを意味します。

3. テーブルの幅と配置を設定する

テーブルの幅を変更するには、<table> の width 属性を設定します。＃＃＃鬼ごっこ。コードは次のとおりです。

<table border="1" width="50%">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

ログイン後にコピー

上記のコードでは、

width 属性が 50% に設定されています。これは、テーブルの幅が親要素の 50% を占めることを意味します。

テーブルの配置を変更するには、

<table> タグの align 属性を設定します。コードは次のとおりです。

<table border="1" width="50%" align="center">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

ログイン後にコピー

上記のコードでは、

align 属性が center に設定されています。これは、テーブルが水平方向かつ中央に配置されていることを意味します。

4. テーブルの背景色とフォント色の設定

テーブルの背景を変更するには、

< の bgcolor 属性を設定します。 table> タグの色。コードは次のとおりです。

<table border="1" width="50%" align="center" bgcolor="#E6E6FA">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table></p> 上記のコードでは、<p>bgcolor<code> 属性が </code>#E6E6FA<code> に設定されています。これは、テーブルの背景色がラベンダーであることを意味します。 。 </code></p>
<p><td><code> タグの </code>color<code> 属性を設定することで、フォントの色を変更できます。コードは次のとおりです。 </code></p>
<pre class="brush:php;toolbar:false"><table border="1" width="50%" align="center" bgcolor="#E6E6FA">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

ログイン後にコピー

上記のコードでは、

<td> タグの color 属性は red に設定されています。、これはフォントの色が赤であることを意味します。

概要

Web デザインでは、テーブルはデータの整理と表示に使用できる一般的なレイアウト方法です。 HTML では、テーブルはタグによって定義および設定されます。この記事では、HTMLで表を設定する方法を、表の作成、表の枠線や幅、配置の設定、表の背景色や文字色の設定などの面から紹介します。読者が HTML テーブルの使用方法をよりよく理解するのに役立つことを願っています。

以上がHTML でテーブルを設定する方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。