Articles
CSS'e Giriş
Tabloyla ilgili CSS özellikleri

Tabloyla ilgili CSS özellikleri

Bu makale, tabloyla ilgili CSS özelliklerini açıklamaktadır.

Tablo düzenleri, kenarlıklar, başlık pozisyonları ve daha fazlası için özellikleri nasıl kullanacağınızı ve yazacağınızı öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

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>

Tablo düzeni

table-layout özelliği 

 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, HTML tablolarının düzenleme yöntemini kontrol eden bir CSS özelliğidir. Bu özellik, bir tablonun sütun genişliklerinin nasıl hesaplanacağını belirtmenize olanak tanır.

  • table-layout-auto sınıfında, sütun genişlikleri her hücrenin içeriğine göre belirlenir.

  • Sütun genişlikleri içeriğe göre değişir ve uzun içeriğe sahip hücreler sütunu genişletir.

  • table-layout-fixed sınıfı, table-layout: fixed kullanır.

  • Her sütunun genişliği eşit olarak belirlenir ve içerik uzun olsa bile genişlik değişmez.

table-layout değerleri 

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

table-layout esas olarak iki değere sahiptir: auto ve fixed.

  1. auto (varsayılan değer):

    • auto belirtildiğinde, tablonun sütun genişlikleri içeriklere göre otomatik olarak ayarlanır.
    • Tarayıcı, her hücrenin tüm içeriğini okur ve sütun genişliklerini bu içeriğe göre belirler.
    • Bu, tablonun tamamının daha yavaş renderlanmasına neden olabilir.

  2. fixed:

    • fixed belirtildiğinde, her sütunun genişliği birinci satırdaki hücrelerin genişliği veya width özelliği ile belirlenir.
    • Tüm tablo hemen çizilir ve sütun genişlikleri tüm içerik okunmadan belirlenir.
    • Tabloda çok fazla veri olduğunda bile performans iyileşir.

table-layout: auto ve table-layout: fixed arasındaki fark

  • auto ile tablo genişliği içeriğe göre otomatik olarak ayarlanır. Daha dinamik bir düzen mümkün olabilir, ancak karmaşık tablolarla performans düşebilir.
  • fixed ile sütun genişlikleri sabitlenir ve tablo içeriğinden bağımsız olarak düzen tutarlı kalır. Performans iyileşirken, genişliğe sığmayan içerik kesilebilir.

border-collapse özelliği 

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, tablo hücreleri arasındaki kenarların nasıl görüntüleneceğini kontrol eden bir CSS özelliğidir. Tablo hücreleri arasındaki kenarların nasıl görüntüleneceğini tanımlamak için kullanılır.

  • border-collapse: separate kullanıldığında, hücreler arasında belirgin kenarlar ve boşluklar olur. Hücreler arasındaki boşluk border-spacing özelliğiyle ayarlanır. Bu örnekte, her hücre arasında 10px boşluk ayarlanmıştır.

  • border-collapse: collapse kullanıldığında, bitişik hücrelerin kenarları birleştirilir ve tek bir kenar olarak görüntülenir. Sonuç olarak, tablo daha uyumlu bir tasarıma sahip olur.

Bu örnekte olduğu gibi, border-collapse özelliği esas olarak iki değere sahiptir: separate ve collapse.

  1. separate (varsayılan değer):

    • separate belirtildiğinde, her hücre kenarı ayrı olarak çizilir ve hücreler arasında boşluk olur.
    • Hücre kenarlarının ayrı bir şekilde görüntülendiği için kenarları açıkça ayırmak istediğinizde kullanılır.
    • Hücreler arasındaki boşluk border-spacing özelliği ile ayarlanabilir.

  2. collapse:

    • collapse belirtildiğinde, bitişik hücrelerin kenarları birleştirilir ve tek bir kenar olarak görüntülenir.
    • Kenarlar üst üste bindiğinden, tüm tablo birleşik bir görünüme sahip olur.
    • Tablonun satır ve sütunları düzenli bir şekilde görüntülenir, bu da onu daha basit bir tasarım için uygun hale getirir.

border-spacing özelliği 

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}

border-spacing özelliği, bir HTML tablosundaki hücreler arasındaki boşluğu belirlemek için kullanılan bir CSS özelliğidir. Tablo hücreleri arasındaki boşluğu ayarlamaya ve görsel marjı kontrol etmeye yardımcı olur. Bu örnekte, hücre boşluğu yatayda 5px, dikeyde 20px olarak eklenmiştir.

border-spacing özelliği yalnızca border-collapse: separate; özelliğinin belirtildiği tablolarda etkili olur. border-collapse: collapse; belirtildiyse, bu özellik etkisizdir.

Kullanım

border-spacing özelliği için değerler piksel veya diğer uzunluk birimlerinde belirtilir. Aşağıdaki iki formatta belirtilebilir:.

  1. Tek değer
1table {
2    border-spacing: 10px;
3}
  • Tek bir değer belirtildiğinde, satırlar (üst ve alt) ile sütunlar (sol ve sağ) arasındaki boşluk aynı değere ayarlanır.

Bu örnekte, tüm hücreler arasında 10px boşluk eklenmiştir.

  1. İki değer
1table {
2    border-spacing: 10px 20px;
3}
  • İki değer belirtildiğinde, birinci değer sütunlar arasındaki yatay boşluğu, ikinci değer ise satırlar arasındaki dikey boşluğu belirler.

Bu örnekte, sütunlar arasındaki boşluk 10px ve satırlar arasındaki boşluk 20px olarak belirlenmiştir.

caption-side özelliği 

 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}

caption-side özelliği, bir HTML tablosunun başlık (<caption> elementi) kısmının nerede görüntüleneceğini belirlemek için kullanılan bir CSS özelliğidir.

  • top belirtmek, başlığı tablonun üst kısmında görüntüler.

    • Bu, varsayılan bir ayardır ve başlıklar genellikle tablonun başlığı veya açıklaması olarak kullanılır.

  • bottom belirtmek, başlığı tablonun alt kısmında görüntüler.

    • Bunu, açıklamaları tablonun altına yerleştirmek istediğinizde kullanın.

empty-cells özelliği 

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}

empty-cells özelliği, bir HTML tablosundaki boş hücrelerin görüntülenip görüntülenmeyeceğini kontrol eden bir CSS özelliğidir. Varsayılan olarak, tablodaki boş hücreler de kenarlıkları gösterir, ancak bu özelliği kullanarak görüntülemeyi kontrol edebilirsiniz.

  • show belirtmek, boş hücrelerin de görüntülenmesini sağlar. Bu, varsayılan davranıştır.
  • hide belirtmek, boş hücreleri görünmez yapar. Hücrelerin kenarları ve arka planları çizilmeyecek.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Liste ile ilgili CSS özellikleriDüzenle ilgili CSS Özellikleri