Saya memiliki masalah dengan rowspan di tabel HTML dan saya masih belum mengonfigurasi cara memperbaiki masalah saya
Gambar berikut menunjukkan apa yang ingin saya miliki: masukkan deskripsi gambar di sini

Tapi itu memberi saya tabel berikut: masukkan deskripsi gambar di sini php html html-table

1
Youness Saadna 1 Oktober 2021, 12:35

2 jawaban

Jawaban Terbaik

<tr> mewakili satu baris, jadi jika Anda ingin 5 baris dengan "Contoh judul 4", Anda memerlukan 5 <tr>. Di setiap <tr>, abaikan saja <td> di mana yang sebelumnya sudah ada karena rentang barisnya. Menentukan rowspan="1" tidak pernah berguna (kecuali jika Anda hanya ingin menyimpannya sebagai pengingat untuk diri sendiri), karena ini adalah default.

<table border="1">
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
            <th>Title 4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td rowspan="5">Title 1 example</td>
            <td rowspan="3">Title 2 example</td>
            <td rowspan="2">Title 3 example</td>
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <!-- Nothing in column 2 -->
            <!-- Nothing in column 3 -->
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <!-- Nothing in column 2 -->
            <td rowspan="2">Title 3 example</td>
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <td rowspan="2">Title 2 example</td>
            <!-- Nothing in column 3 -->
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <!-- Nothing in column 2 -->
            <td>Title 3 example</td>
            <td>Title 4 example</td>
        </tr>
    </tbody>
</table>

Anda dapat melihat hasilnya di sana: https://jsfiddle.net/eskn6fhz/

1
Saphir 1 Oktober 2021, 09:50

Berikut format tabel persis Anda sesuai dengan gambar yang telah Anda tambahkan,

 <table border="1">
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
            <th>Title 4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td rowspan="11">Title 1 example</td>
            <td rowspan="6">Title 2 example</td>
            <td rowspan="3">Title 3 example</td>
            <td rowspan="1">Title 4 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 5 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 6 example</td>
        </tr>
        <tr>
            <td rowspan="3">Title 7 example</td>
            <td rowspan="1">Title 8 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 5 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 6 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 7 example</td>
            <td rowspan="1">Title 8 example</td>
            <td rowspan="1">Title 9 example</td>
        </tr>
        <tr>
            <td rowspan="4">Title 10 example</td>
            <td rowspan="3">Title 11 example</td>
            <td rowspan="1">Title 12 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 13 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 14 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 15 example</td>
            <td rowspan="1">Title 16 example</td>
        </tr>
        <tr>
            <td rowspan="7">Title 17 example</td>
            <td rowspan="6">Title 18 example</td>
            <td rowspan="4">Title 19 example</td>
            <td rowspan="1">Title 20 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 21 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 22 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 23 example</td>
        </tr>
        <tr>
            <td rowspan="2">Title 24 example</td>
            <td rowspan="1">Title 25 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 26 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 27 example</td>
            <td rowspan="1">Title 28 example</td>
            <td rowspan="1">Title 29 example</td>
        </tr>
    </tbody>
</table>
2
groovy_guy 1 Oktober 2021, 10:00