Articles
Pengenalan kepada CSS
Properti CSS Berkaitan dengan Jadual

Properti CSS Berkaitan dengan Jadual

Artikel ini menerangkan mengenai properti CSS berkaitan dengan jadual.

Anda boleh belajar cara menggunakan dan menulis properti untuk susun atur jadual, sempadan, kedudukan kapsyen, dan lain-lain.

YouTube Video

HTML untuk Pratonton

css-table.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-table.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Table Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Table Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>table-layout</h3>
 23            <section>
 24                <header><h4>table-layout: auto</h4></header>
 25                <section class="sample-view">
 26                    <table class="table-layout-auto">
 27                        <thead>
 28                            <tr>
 29                                <th>Column 1</th>
 30                                <th>Column 2</th>
 31                                <th>Column 3</th>
 32                            </tr>
 33                        </thead>
 34                        <tbody>
 35                            <tr>
 36                                <td>Short</td>
 37                                <td>Some longer content here</td>
 38                                <td>Content</td>
 39                            </tr>
 40                            <tr>
 41                                <td>Another short one</td>
 42                                <td>This is a much longer piece of text to demonstrate the auto layout</td>
 43                                <td>Short</td>
 44                            </tr>
 45                        </tbody>
 46                    </table>
 47                </section>
 48            </section>
 49            <section>
 50                <header><h4>table-layout: fixed</h4></header>
 51                <section class="sample-view">
 52                    <table class="table-layout-fixed">
 53                        <thead>
 54                            <tr>
 55                                <th>Column 1</th>
 56                                <th>Column 2</th>
 57                                <th>Column 3</th>
 58                            </tr>
 59                        </thead>
 60                        <tbody>
 61                            <tr>
 62                                <td>Short</td>
 63                                <td>Some longer content here</td>
 64                                <td>Content</td>
 65                            </tr>
 66                            <tr>
 67                                <td>Another short one</td>
 68                                <td>This is a much longer piece of text to demonstrate the fixed layout</td>
 69                                <td>Short</td>
 70                            </tr>
 71                        </tbody>
 72                    </table>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>border-collapse</h3>
 78            <section>
 79                <header><h4>border-collapse: separate</h4></header>
 80                <section class="sample-view">
 81                    <table class="border-collapse-separate">
 82                        <thead>
 83                            <tr>
 84                                <th>Header 1</th>
 85                                <th>Header 2</th>
 86                                <th>Header 3</th>
 87                            </tr>
 88                        </thead>
 89                        <tbody>
 90                            <tr>
 91                                <td>Cell 1</td>
 92                                <td>Cell 2</td>
 93                                <td>Cell 3</td>
 94                            </tr>
 95                            <tr>
 96                                <td>Cell 4</td>
 97                                <td>Cell 5</td>
 98                                <td>Cell 6</td>
 99                            </tr>
100                        </tbody>
101                    </table>
102                </section>
103            </section>
104            <section>
105                <header><h4>border-collapse: collapse</h4></header>
106                <section class="sample-view">
107                    <table class="border-collapse-collapse">
108                        <thead>
109                            <tr>
110                                <th>Header 1</th>
111                                <th>Header 2</th>
112                                <th>Header 3</th>
113                            </tr>
114                        </thead>
115                        <tbody>
116                            <tr>
117                                <td>Cell 1</td>
118                                <td>Cell 2</td>
119                                <td>Cell 3</td>
120                            </tr>
121                            <tr>
122                                <td>Cell 4</td>
123                                <td>Cell 5</td>
124                                <td>Cell 6</td>
125                            </tr>
126                        </tbody>
127                    </table>
128                </section>
129            </section>
130        </article>
131        <article>
132            <h3>border-spacing</h3>
133            <section>
134                <header><h4>border-spacing: 5px 20px</h4></header>
135                <section class="sample-view">
136                    <table class="border-spacing-example">
137                        <thead>
138                            <tr>
139                                <th>Header 1</th>
140                                <th>Header 2</th>
141                                <th>Header 3</th>
142                            </tr>
143                        </thead>
144                        <tbody>
145                            <tr>
146                                <td>Cell 1</td>
147                                <td>Cell 2</td>
148                                <td>Cell 3</td>
149                            </tr>
150                            <tr>
151                                <td>Cell 4</td>
152                                <td>Cell 5</td>
153                                <td>Cell 6</td>
154                            </tr>
155                        </tbody>
156                    </table>
157                </section>
158            </section>
159        </article>
160        <article>
161            <h3>caption-side</h3>
162            <section>
163                <header><h4>caption-side: top</h4></header>
164                <section class="sample-view">
165                    <table>
166                        <caption class="caption-side-top">
167                            Table Caption on Top
168                        </caption>
169                        <thead>
170                            <tr>
171                                <th>Header 1</th>
172                                <th>Header 2</th>
173                                <th>Header 3</th>
174                            </tr>
175                        </thead>
176                        <tbody>
177                            <tr>
178                                <td>Data 1</td>
179                                <td>Data 2</td>
180                                <td>Data 3</td>
181                            </tr>
182                            <tr>
183                                <td>Data 4</td>
184                                <td>Data 5</td>
185                                <td>Data 6</td>
186                            </tr>
187                        </tbody>
188                    </table>
189                </section>
190            </section>
191            <section>
192                <header><h4>caption-side: bottom</h4></header>
193                <section class="sample-view">
194                    <table>
195                        <caption class="caption-side-bottom">
196                            Table Caption on Bottom
197                        </caption>
198                        <thead>
199                            <tr>
200                                <th>Header 1</th>
201                                <th>Header 2</th>
202                                <th>Header 3</th>
203                            </tr>
204                        </thead>
205                        <tbody>
206                            <tr>
207                                <td>Data 1</td>
208                                <td>Data 2</td>
209                                <td>Data 3</td>
210                            </tr>
211                            <tr>
212                                <td>Data 4</td>
213                                <td>Data 5</td>
214                                <td>Data 6</td>
215                            </tr>
216                        </tbody>
217                    </table>
218                </section>
219            </section>
220        </article>
221        <article>
222            <h3>empty-cells</h3>
223            <section>
224                <header><h4>empty-cells: show</h4></header>
225                <section class="sample-view">
226                    <table class="empty-cells-show">
227                        <tr>
228                            <th>Header 1</th>
229                            <th>Header 2</th>
230                            <th>Header 3</th>
231                        </tr>
232                        <tr>
233                            <td>Data 1</td>
234                            <td></td> <!-- Empty cell -->
235                            <td>Data 3</td>
236                        </tr>
237                        <tr>
238                            <td>Data 4</td>
239                            <td></td> <!-- Empty cell -->
240                            <td>Data 6</td>
241                        </tr>
242                    </table>
243                </section>
244            </section>
245            <section>
246                <header><h4>empty-cells: hide</h4></header>
247                <section class="sample-view">
248                    <table class="empty-cells-hide">
249                        <tr>
250                            <th>Header 1</th>
251                            <th>Header 2</th>
252                            <th>Header 3</th>
253                        </tr>
254                        <tr>
255                            <td>Data 1</td>
256                            <td></td> <!-- Empty cell -->
257                            <td>Data 3</td>
258                        </tr>
259                        <tr>
260                            <td>Data 4</td>
261                            <td></td> <!-- Empty cell -->
262                            <td>Data 6</td>
263                        </tr>
264                    </table>
265                </section>
266            </section>
267        </article>
268    </main>
269</body>
270</html>

Susun Atur Jadual

Properti table-layout 

 1table {
 2    width: 100%;
 3}
 4
 5th, td {
 6    border: 1px solid black;
 7    padding: 10px;
 8}
 9
10table.table-layout-auto {
11    border-collapse: collapse;
12    table-layout: auto;
13}
14
15table.table-layout-fixed {
16    border-collapse: collapse;
17    table-layout: fixed;
18}
19
20table.table-layout-fixed th {
21    width: 33.33%; /* Distribute width equally among 3 columns */
22}

table-layout ialah properti CSS yang mengawal kaedah susun atur jadual HTML. Properti ini membolehkan anda menentukan cara untuk mengira lebar lajur bagi sebuah jadual.

  • Dalam kelas table-layout-auto, lebar lajur ditentukan berdasarkan kandungan dalam setiap sel.

  • Lebar lajur akan berbeza mengikut kandungan, dan sel dengan kandungan yang panjang akan melebarkan lajur.

  • Kelas table-layout-fixed menggunakan table-layout: fixed.

  • Lebar setiap lajur ditetapkan sama, dan lebar tidak akan berubah walaupun kandungannya panjang.

Nilai untuk table-layout 

1table {
2    table-layout: auto;
3}
4
5table {
6    table-layout: fixed;
7}

table-layout terutamanya mempunyai dua nilai: auto dan fixed.

  1. auto (nilai lalai):

    • Menentukan auto secara automatik menyesuaikan lebar lajur jadual berdasarkan kandungan.
    • Pelayar membaca semua kandungan setiap sel dan menentukan lebar setiap lajur berdasarkan kandungan tersebut.
    • Ini mungkin menyebabkan rendering jadual keseluruhannya menjadi lebih perlahan.

  2. fixed:

    • Menentukan fixed bermakna lebar setiap lajur ditentukan oleh lebar sel dalam baris pertama atau melalui atribut width.
    • Keseluruhan jadual dilukis serta-merta dan lebar lajur ditentukan tanpa membaca semua kandungan.
    • Prestasi meningkat walaupun terdapat banyak data dalam jadual.

Perbezaan antara table-layout: auto dan table-layout: fixed

  • Dengan auto, lebar jadual disesuaikan secara automatik mengikut kandungan. Susun atur yang lebih dinamik mungkin, tetapi prestasi mungkin merosot dengan jadual yang kompleks.
  • Dengan fixed, lebar lajur ditetapkan, mengekalkan susun atur yang konsisten tanpa mengira kandungan jadual. Walaupun prestasi bertambah baik, kandungan mungkin dipotong jika ia tidak muat dengan lebar.

Ciri border-collapse 

1table.border-collapse-separate {
2    border-collapse: separate;
3    border-spacing: 10px; /* Set space between cells */
4}
5
6table.border-collapse-collapse {
7    border-collapse: collapse;
8}

border-collapse ialah sifat CSS yang mengawal bagaimana sempadan antara sel jadual dipaparkan. Ia digunakan untuk menentukan bagaimana sempadan antara sel jadual dipaparkan.

  • Apabila menggunakan border-collapse: separate, akan terdapat sempadan dan ruang yang berbeza antara sel. Jarak antara sel disesuaikan dengan sifat border-spacing. Dalam contoh ini, jarak 10px ditetapkan antara setiap sel.

  • Apabila menggunakan border-collapse: collapse, sempadan sel bersebelahan digabungkan dan dipaparkan sebagai sempadan tunggal. Hasilnya, jadual mempunyai reka bentuk yang lebih padu.

Seperti dalam contoh ini, sifat border-collapse terutamanya mempunyai dua nilai: separate dan collapse.

  1. separate (nilai lalai):

    • Apabila menentukan separate, setiap sempadan sel dilukis secara berasingan, dan terdapat ruang antara sel.
    • Ia digunakan apabila anda ingin membezakan sempadan dengan jelas, kerana sempadan sel dipaparkan secara berasingan.
    • Ruang antara sel boleh diselaraskan dengan sifat border-spacing.

  2. collapse:

    • Apabila menentukan collapse, sempadan sel bersebelahan digabungkan dan dipaparkan sebagai sempadan tunggal.
    • Oleh kerana sempadan bertindih, keseluruhan jadual mempunyai penampilan yang bersatu.
    • Baris dan lajur jadual dipaparkan dengan teratur, menjadikannya sesuai untuk reka bentuk yang lebih mudah.

Ciri border-spacing 

1table.border-spacing-example {
2    border-collapse: separate;
3
4    /* Set 5px spacing between columns and 20px spacing between rows */
5    border-spacing: 5px 20px;
6}

Ciri border-spacing ialah sifat CSS untuk menentukan jarak antara sel dalam jadual HTML. Ia membantu menyesuaikan ruang antara sel jadual dan mengawal margin visual. Dalam contoh ini, jarak sel ditambah sebagai 5px secara mendatar dan 20px secara menegak.

Harta border-spacing hanya berkesan pada jadual di mana border-collapse: separate; telah ditentukan. Jika border-collapse: collapse; ditentukan, harta ini tidak berkesan.

Penggunaan

Nilai untuk harta border-spacing ditentukan dalam piksel atau unit panjang lain. Ia boleh ditentukan dalam dua format berikut:.

  1. Nilai tunggal
1table {
2    border-spacing: 10px;
3}
  • Apabila menetapkan nilai tunggal, jarak antara baris (atas dan bawah) dan lajur (kiri dan kanan) ditetapkan kepada nilai yang sama.

Dalam contoh ini, ruang 10px ditambah di antara semua sel.

  1. Dua nilai
1table {
2    border-spacing: 10px 20px;
3}
  • Apabila menetapkan dua nilai, nilai pertama menetapkan jarak mendatar antara lajur, dan nilai kedua menetapkan jarak menegak antara baris.

Dalam contoh ini, jarak antara lajur adalah 10px, dan jarak antara baris adalah 20px.

Harta caption-side 

 1caption.caption-side-top {
 2    caption-side: top; /* Display the caption at the top of the table */
 3    font-weight: bold;
 4    font-size: 1.2em;
 5    margin-bottom: 10px;
 6    background-color: #ccc;
 7}
 8
 9caption.caption-side-bottom {
10    caption-side: bottom; /* Display the caption at the bottom of the table */
11    font-weight: bold;
12    font-size: 1.2em;
13    margin-top: 10px;
14    background-color: #ccc;
15}

Harta caption-side ialah harta CSS yang digunakan untuk menentukan di mana kapsyen (elemen <caption>) jadual HTML dipaparkan.

  • Menetapkan top akan memaparkan kapsyen di bahagian atas jadual.

    • Ini adalah tetapan lalai, dan kapsyen sering digunakan sebagai tajuk atau penerangan jadual.

  • Menetapkan bottom akan memaparkan kapsyen di bahagian bawah jadual.

    • Gunakan ini apabila anda ingin meletakkan penerangan di bawah jadual.

Harta empty-cells 

1table.empty-cells-show {
2    empty-cells: show; /* Display empty cells */
3}
4
5table.empty-cells-hide {
6    empty-cells: hide; /* Display empty cells */
7}

Harta empty-cells ialah harta CSS untuk mengawal sama ada sel kosong dalam jadual HTML dipaparkan atau tidak. Secara lalai, sel kosong dalam jadual juga memaparkan sempadan, tetapi anda boleh menggunakan harta ini untuk mengawalnya.

  • Menetapkan show akan memaparkan sel kosong juga. Ini adalah kelakuan lalai.
  • Menetapkan hide menjadikan sel kosong tidak kelihatan. Sempadan dan latar belakang sel tidak akan dilukis.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Sifat berkaitan senarai CSSHarta CSS Berkaitan Susun Atur