テーブルの幅を設定するhtml

HTML では、<table> タグを使用してテーブルを作成できます。表を作成するとき、多くの場合、ページ レイアウトや表示コンテンツに合わせて表の幅を設定する必要があります。

HTML でテーブルの幅を設定するには 2 つの方法があります:

方法 1: CSS スタイルを使用する

CSS スタイルを使用してテーブルの幅を設定できます。 。 CSS スタイルを使用する利点は、テーブルの幅を HTML テキスト コンテンツから分離できるため、コードの保守性と読みやすさが向上することです。

これは例です:

<style>
    table {
        width: 50%; /* 设置表格宽度为页面宽度的50% */
        border-collapse: collapse;
    }
    th, td {
        padding: 5px;
        border: 1px solid #ccc;
    }
</style>

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
    </tr>
</table>

上の例では、CSS スタイルを使用して表の幅をページ幅の 50% に設定しました。また、テーブルの境界線を結合してテーブルの美しさを高めるために、border-collapse 属性を設定します。同時に、th セレクターと td セレクターを使用して、テーブルのヘッダーとセルのスタイルを設定できます。

方法 2: HTML 属性を使用する

HTML 属性を使用してテーブルの幅を設定することもできます。この方法は比較的単純ですが、複数の HTML 属性を使用してテーブルの幅を設定する場合、コードが十分に明確ではない場合があります。

次は例です:

<table width="50%" border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
    </tr>
</table>

上の例では、HTML 属性 width と border を使用して幅と幅を設定します。それぞれテーブルのフレーム。 HTML 属性を使用してテーブルの幅を設定する場合、percentage、pixel value、em などの単位を使用できることに注意してください。

まとめると、表の幅を設定するには CSS スタイルまたは HTML 属性を使用することができ、具体的な方法はニーズに応じて選択されます。ただし、コードの保守性と読みやすさを考慮して、CSS スタイルを使用して表の幅を設定することをお勧めします。

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