Articles
Panimula sa CSS
Mga property ng CSS na may kaugnayan sa talahanayan

Mga property ng CSS na may kaugnayan sa talahanayan

Ipinaliliwanag ng artikulong ito ang mga property ng CSS na may kaugnayan sa talahanayan.

Matututuhan mo kung paano gamitin at isulat ang mga property para sa mga layout ng talahanayan, hangganan, posisyon ng caption, at iba pa.

YouTube Video

HTML para sa Preview

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>

Layout ng talahanayan

Property na 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}

Ang table-layout ay isang property ng CSS na kumokontrol sa paraan ng layout ng mga talahanayan sa HTML. Hinahayaan ka ng property na ito na tukuyin kung paano kakalkulahin ang mga lapad ng column ng isang talahanayan.

  • Sa klase na table-layout-auto, ang mga lapad ng column ay tinutukoy batay sa nilalaman sa bawat cell.

  • Ang mga lapad ng column ay nagbabago ayon sa nilalaman, at ang mga cell na may mahabang nilalaman ay magpapalapad ng column.

  • Ang klase na table-layout-fixed ay gumagamit ng table-layout: fixed.

  • Ang lapad ng bawat column ay pantay na itinakda, at hindi nagbabago ang lapad kahit na mahaba ang nilalaman.

Mga halaga ng table-layout 

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

Ang table-layout ay pangunahing mayroong dalawang halaga: auto at fixed.

  1. auto (default na halaga):

    • Ang pagtukoy ng auto ay awtomatikong inaayos ang mga lapad ng column ng talahanayan batay sa nilalaman.
    • Binabasa ng browser ang lahat ng nilalaman ng bawat cell at tinutukoy ang lapad ng bawat column batay sa nilalaman.
    • Maaari itong magresulta sa mas mabagal na pag-render ng buong talahanayan.

  2. fixed:

    • Ang pagtukoy ng fixed ay nangangahulugan na ang lapad ng bawat column ay tinutukoy ng lapad ng mga cell sa unang hilera o ng attribute na width.
    • Ang buong talahanayan ay agad na iginuhit at ang mga lapad ng column ay tinutukoy nang hindi binabasa ang lahat ng nilalaman.
    • Bumubuti ang performance kahit na may maraming datos sa talahanayan.

Pagkakaiba ng table-layout: auto at table-layout: fixed

  • Sa auto, awtomatikong inaayos ang lapad ng talahanayan ayon sa nilalaman. Ang mas dynamic na layout ay posible, ngunit maaaring bumagal ang pagganap sa mas kumplikadong mga talahanayan.
  • Kapag gumagamit ng fixed, ang lapad ng mga kolum ay naayos, pinapanatili ang pare-parehong layout kahit ano pa ang nilalaman ng talahanayan. Habang gumaganda ang pagganap, maaaring maputol ang nilalaman kung hindi ito magkasya sa lapad.

Ang border-collapse na ari-arian 

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}

Ang border-collapse ay isang ari-arian ng CSS na kumokontrol kung paano ipinapakita ang mga hangganan sa pagitan ng mga cell ng talahanayan. Ginagamit ito upang tukuyin kung paano ipinapakita ang mga hangganan sa pagitan ng mga cell ng talahanayan.

  • Kapag ginamit ang border-collapse: separate, magkakaroon ng magkakaibang hangganan at espasyo sa pagitan ng mga cell. Ang puwang sa pagitan ng mga cell ay inaayos gamit ang border-spacing na ari-arian. Sa halimbawang ito, itinatakda ang 10px na puwang sa pagitan ng bawat cell.

  • Kapag ginamit ang border-collapse: collapse, ang mga hangganan ng magkadikit na mga cell ay pinagsasama at ipinapakita bilang isang solong hangganan. Bilang resulta, ang talahanayan ay nagkakaroon ng mas buo at maayos na disenyo.

Gaya ng halimbawang ito, ang border-collapse na ari-arian ay karaniwang may dalawang halaga: separate at collapse.

  1. separate (karaniwang halaga):

    • Kapag itinakda ang separate, ang bawat hangganan ng cell ay iginuguhit nang hiwalay, at may puwang sa pagitan ng mga cell.
    • Ginagamit ito kapag nais mong malinaw na maihiwalay ang mga hangganan, dahil ang mga hangganan ng cell ay ipinapakita nang magkakahiwalay.
    • Ang puwang sa pagitan ng mga cell ay maaaring ayusin gamit ang border-spacing na ari-arian.

  2. collapse:

    • Kapag itinakda ang collapse, ang mga hangganan ng magkadikit na mga cell ay pinagsasama at ipinapakita bilang isang solong hangganan.
    • Dahil nagsasapawan ang mga hangganan, ang buong talahanayan ay nagkakaroon ng magkakaisang hitsura.
    • Malinis na ipinapakita ang mga hilera at kolum ng talahanayan, na ginagawang angkop ito para sa mas simpleng disenyo.

Ang border-spacing na ari-arian 

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}

Ang border-spacing ay isang ari-arian ng CSS na ginagamit upang tukuyin ang puwang sa pagitan ng mga cell sa isang HTML na talahanayan. Nakakatulong ito upang ayusin ang puwang sa pagitan ng mga cell ng talahanayan at kontrolin ang visual margin. Sa halimbawang ito, ang puwang ng mga cell ay idinagdag bilang 5px nang pahalang at 20px nang patayo.

Ang katangiang border-spacing ay gumagana lamang sa mga talahanayan kung saan tinukoy ang border-collapse: separate;. Kung tinukoy ang border-collapse: collapse;, ang katangiang ito ay hindi gumagana.

Paggamit

Ang mga halaga para sa katangiang border-spacing ay tinutukoy sa pixels o iba pang unit ng haba. Maaari itong tukuyin sa sumusunod na dalawang format:.

  1. Isang Halaga
1table {
2    border-spacing: 10px;
3}
  • Kapag tinukoy ang isang halaga, ang espasyo sa pagitan ng mga hilera (itaas at ibaba) at mga column (kaliwa at kanan) ay itinatakda sa parehong halaga.

Sa halimbawang ito, idinagdag ang espasyong 10px sa pagitan ng lahat ng mga selula.

  1. Dalawang Halaga
1table {
2    border-spacing: 10px 20px;
3}
  • Kapag tinukoy ang dalawang halaga, ang unang halaga ay nagtatakda ng pahalang na espasyo sa pagitan ng mga column, at ang pangalawang halaga ay nagtatakda ng patayong espasyo sa pagitan ng mga hilera.

Sa halimbawang ito, ang espasyo sa pagitan ng mga column ay 10px, at ang espasyo sa pagitan ng mga hilera ay 20px.

Ang katangiang 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}

Ang katangiang caption-side ay isang CSS na katangian na ginagamit upang tukuyin kung saan ipapakita ang caption (<caption> na elemento) ng isang HTML table.

  • Kapag tinukoy ang top, ipapakita ang caption sa itaas ng talahanayan.

    • Ito ang default na setting, at ang mga caption ay madalas gamitin bilang pamagat o paglalarawan ng talahanayan.

  • Kapag tinukoy ang bottom, ang caption ay ipapakita sa ibaba ng talahanayan.

    • Gamitin ito kapag nais mong ilagay ang mga paliwanag sa ibaba ng talahanayan.

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

Ang empty-cells ay isang CSS na katangian upang kontrolin kung ang mga walang lamang selula sa isang HTML table ay ipapakita. Sa default, ang walang lamang selula sa isang table ay nagpapakita rin ng mga border, ngunit maaari mong gamitin ang katangiang ito upang kontrolin ang pagpapakita.

  • Kapag tinukoy ang show, ipapakita rin ang mga walang lamang selula. Ito ang default na kilos.
  • Kapag tinukoy ang hide, gagawin nitong hindi nakikita ang mga walang lamang selula. Ang mga balangkas at background ng mga cell ay hindi iguguhit.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga property ng CSS na may kaugnayan sa listahanLayout-related na mga Katangian ng CSS