Tetapkan html lebar jadual

Dalam HTML, kita boleh menggunakan tag f5d188ed2c074f8b944552db028f98a1 untuk membuat jadual. Apabila membuat jadual, anda selalunya perlu menetapkan lebar jadual agar sesuai dengan reka letak halaman atau kandungan paparan.

Terdapat dua cara untuk menetapkan lebar jadual dalam HTML:

Kaedah 1: Gunakan gaya CSS

Kita boleh menggunakan gaya CSS untuk menetapkan lebar jadual . Kelebihan menggunakan gaya CSS ialah anda boleh memisahkan lebar jadual daripada kandungan teks HTML, meningkatkan kebolehselenggaraan dan kebolehbacaan kod.

Berikut ialah contoh:

<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>

Dalam contoh di atas, kami menggunakan gaya CSS untuk menetapkan lebar jadual kepada 50% daripada lebar halaman. Kami juga menetapkan atribut border-collapse untuk menggabungkan sempadan jadual dan meningkatkan keindahan jadual. Pada masa yang sama, kita boleh menggunakan pemilih th dan td untuk menetapkan gaya pengepala jadual dan sel.

Kaedah 2: Gunakan atribut HTML

Kami juga boleh menggunakan atribut HTML untuk menetapkan lebar jadual. Walaupun kaedah ini agak mudah, kod itu mungkin tidak cukup jelas apabila menggunakan berbilang atribut HTML untuk menetapkan lebar jadual.

Berikut ialah contoh:

<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>

Dalam contoh di atas, kami menggunakan atribut HTML width dan border untuk menetapkan lebar dan jidar jadual masing-masing. Perlu diingat bahawa apabila menggunakan atribut HTML untuk menetapkan lebar jadual, anda boleh menggunakan unit seperti 百分比, 像素值 dan em.

Ringkasnya, kita boleh menggunakan gaya CSS atau atribut HTML untuk menetapkan lebar jadual Kaedah khusus dipilih mengikut keperluan. Walau bagaimanapun, untuk kebolehselenggaraan dan kebolehbacaan kod, adalah disyorkan untuk menggunakan gaya CSS untuk menetapkan lebar jadual.

Atas ialah kandungan terperinci Tetapkan html lebar jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!