Articles
Pengenalan ke CSS
Properti CSS terkait Tabel

Properti CSS terkait Tabel

Artikel ini menjelaskan properti CSS yang terkait dengan tabel.

Anda dapat belajar cara menggunakan dan menulis properti untuk tata letak tabel, border, posisi judul, dan lainnya.

YouTube Video

HTML untuk Pratinjau

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>

Tata letak tabel

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 adalah properti CSS yang mengontrol metode tata letak tabel HTML. Properti ini memungkinkan Anda menentukan cara menghitung lebar kolom pada tabel.

  • Dalam kelas table-layout-auto, lebar kolom ditentukan berdasarkan isi dalam setiap sel.

  • Lebar kolom bervariasi sesuai dengan isi, dan sel dengan konten panjang akan memperlebar kolom.

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

  • Lebar setiap kolom diatur sama rata, dan lebar tidak berubah meskipun kontennya panjang.

Nilai pada table-layout 

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

table-layout memiliki dua nilai utama: auto dan fixed.

  1. auto (nilai default):

    • Menentukan auto secara otomatis menyesuaikan lebar kolom tabel berdasarkan kontennya.
    • Browser membaca semua konten dari setiap sel dan menentukan lebar setiap kolom berdasarkan konten tersebut.
    • Hal ini dapat menghasilkan waktu rendering tabel yang lebih lambat.

  2. fixed:

    • Menentukan fixed berarti lebar setiap kolom ditentukan oleh lebar sel di baris pertama atau oleh atribut width.
    • Seluruh tabel digambar secara langsung dan lebar kolom ditentukan tanpa membaca semua konten.
    • Kinerja meningkat bahkan ketika ada banyak data dalam tabel.

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

  • Dengan auto, lebar tabel secara otomatis menyesuaikan dengan kontennya. Tata letak yang lebih dinamis memungkinkan, tetapi kinerja mungkin menurun dengan tabel yang kompleks.
  • Dengan fixed, lebar kolom diperbaiki, mempertahankan tata letak yang konsisten terlepas dari konten tabel. Meskipun kinerja meningkat, konten mungkin terpotong jika tidak sesuai dengan lebar.

Properti 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 adalah properti CSS yang mengatur bagaimana batas antara sel tabel ditampilkan. Ini digunakan untuk menentukan bagaimana batas antara sel tabel ditampilkan.

  • Saat menggunakan border-collapse: separate, akan ada batas dan ruang yang terpisah antara sel-sel. Jarak antara sel disesuaikan dengan properti border-spacing. Dalam contoh ini, jarak 10px diatur antara setiap sel.

  • Saat menggunakan border-collapse: collapse, batas dari sel yang berdekatan digabungkan dan ditampilkan sebagai satu batas. Akibatnya, tabel memiliki desain yang lebih kohesif.

Seperti dalam contoh ini, properti border-collapse terutama memiliki dua nilai: separate dan collapse.

  1. separate (nilai default):

    • Saat menspesifikasikan separate, setiap batas sel digambar secara terpisah, dan ada ruang di antara sel-sel.
    • Ini digunakan ketika Anda ingin dengan jelas membedakan batas-batas, karena batas sel ditampilkan terpisah.
    • Ruang antara sel dapat disesuaikan dengan properti border-spacing.

  2. collapse:

    • Saat menspesifikasikan collapse, batas dari sel yang berdekatan digabungkan dan ditampilkan sebagai satu batas.
    • Karena batas-batasnya saling tumpang tindih, seluruh tabel memiliki tampilan yang menyatu.
    • Baris dan kolom tabel ditampilkan dengan rapi, membuatnya cocok untuk desain yang lebih sederhana.

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

Properti border-spacing adalah properti CSS untuk menentukan jarak antara sel dalam tabel HTML. Ini membantu menyesuaikan ruang antara sel tabel dan mengontrol margin visual. Dalam contoh ini, jarak sel ditambahkan sebagai 5px secara horizontal dan 20px secara vertikal.

Properti border-spacing hanya berpengaruh pada tabel di mana border-collapse: separate; ditentukan. Jika border-collapse: collapse; ditentukan, properti ini tidak berfungsi.

Penggunaan

Nilai untuk properti border-spacing ditentukan dalam piksel atau unit panjang lainnya. Dapat ditentukan dalam dua format berikut:.

  1. Satu nilai
1table {
2    border-spacing: 10px;
3}
  • Saat menentukan satu nilai, jarak antara baris (atas dan bawah) dan kolom (kiri dan kanan) diatur dengan nilai yang sama.

Dalam contoh ini, jarak sebesar 10px ditambahkan di antara semua sel.

  1. Dua nilai
1table {
2    border-spacing: 10px 20px;
3}
  • Saat menentukan dua nilai, nilai pertama menetapkan jarak horizontal antara kolom, dan nilai kedua menetapkan jarak vertikal antara baris.

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

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

Properti caption-side adalah properti CSS yang digunakan untuk menentukan di mana caption (elemen <caption>) dari tabel HTML ditampilkan.

  • Menentukan top akan menampilkan caption di bagian atas tabel.

    • Ini adalah pengaturan default, dan caption sering digunakan sebagai judul atau deskripsi tabel.

  • Menentukan bottom akan menampilkan caption di bagian bawah tabel.

    • Gunakan ini jika Anda ingin menempatkan penjelasan di bawah tabel.

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

Properti empty-cells adalah properti CSS untuk mengontrol apakah sel kosong dalam tabel HTML ditampilkan atau tidak. Secara default, sel kosong dalam tabel juga menampilkan batas, tetapi Anda dapat menggunakan properti ini untuk mengontrol tampilan.

  • Menentukan show juga akan menampilkan sel kosong. Ini adalah perilaku default.
  • Menentukan hide akan membuat sel kosong menjadi tidak terlihat. Perbatasan dan latar belakang sel tidak akan digambar.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS terkait daftarProperti CSS yang Berhubungan dengan Tata Letak