Bagaimana untuk Membuat Jadual HTML Menegak dengan CSS?

Membuat Jadual HTML Menegak

Dalam HTML, jadual biasanya dipaparkan dengan baris mendatar dan lajur menegak. Walau bagaimanapun, anda mungkin menghadapi senario di mana anda ingin menyongsangkan orientasi ini, mencipta jadual "menegak" dengan baris menegak dan pengepala jadual di sebelah kiri.

Untuk mencapai ini, penyelesaian CSS mudah boleh digunakan:

<code class="css">tr { display: block; float: left; }
th, td { display: block; }</code>

CSS ini menyusun semula elemen dalam jadual supaya baris individu dipaparkan sebagai blok menegak di sebelah satu sama lain, dengan sel pengepala jadual muncul di sebelah kiri.

Mengakses Baris dalam Jadual Menegak

Walaupun CSS mengubah rupa jadual, ia tidak menjejaskan cara anda mengakses baris dalam kod HTML. Anda masih boleh menggunakan elemen untuk memasukkan data secara dinamik, seperti yang anda lakukan dalam jadual mendatar tradisional.

Pertimbangan Penggayaan Tambahan

Untuk meningkatkan lagi penampilan visual jadual menegak anda, anda mungkin mempertimbangkan :

• Menggunakan border-collapse untuk mengalih keluar sempadan antara sel bersebelahan.
• Tweak sifat lebar dan ketinggian dan / elemen untuk dimensi sel yang optimum.

Kod Contoh

Berikut ialah contoh jadual HTML menegak yang boleh anda sesuaikan:

<code class="css">/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }</code>

<code class="html"><table>
<tr>
    <th>name</th>
    <th>number</th>
</tr>
<tr>
    <td>James Bond</td>
    <td>007</td>
</tr>
<tr>
    <td>Lucipher</td>
    <td>666</td>
</tr>
</table></code>

Dengan melaksanakan gaya CSS ini, anda boleh membuat jadual menegak dengan mudah dalam HTML sambil mengekalkan kefungsian dan kebolehcapaian jadual tradisional.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Jadual HTML Menegak dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!