Susun baris meja : Untuk skrin kecil, anda boleh mengubah baris jadual ke dalam blok yang disusun menggunakan CSS. Data setiap baris boleh ditunjukkan sebagai blok berasingan, yang lebih mudah dibaca pada peranti mudah alih.

 <code class="css">@media (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { margin-bottom: 15px; } td { border: none; position: relative; padding-left: 50%; } td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; content: attr(data-label); font-weight: bold; } }</code>

Anda perlu menambah atribut data-label kepada setiap elemen <td> untuk melabelkannya dengan sewajarnya.<h3 id="Apakah-amalan-terbaik-untuk-menggayakan-jadual-HTML-untuk-meningkatkan-kebolehbacaan"> Apakah amalan terbaik untuk menggayakan jadual HTML5 untuk meningkatkan kebolehbacaan?</h3> <p> Untuk meningkatkan kebolehbacaan jadual HTML5, pertimbangkan amalan terbaik berikut:</p> <ol><li><p> <strong>Header Clear</strong> : Gunakan <code><th> unsur untuk tajuk lajur dan gaya mereka untuk menonjol, biasanya dengan warna latar belakang yang berbeza atau berat fon.<pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;th { background-color: #f2f2f2; font-weight: bold; }&lt;/code&gt;</pre> <li> <p> <strong>Padding dan sempadan yang konsisten</strong> : Pastikan sel -sel mempunyai padding yang mencukupi dan sempadan yang konsisten untuk memisahkan data dengan jelas.</p> <pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;td, th { padding: 10px; border: 1px solid #ddd; }&lt;/code&gt;</pre> </li> <li> <p> <strong>Warna baris berganti</strong> : Gunakan warna latar belakang untuk baris untuk memudahkan mengikuti data di seluruh jadual.</p> <pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;tr:nth-child(even) { background-color: #f9f9f9; }&lt;/code&gt;</pre> </li> <li> <p> <strong>Penjajaran teks</strong> : Align teks dengan sewajarnya; Nombor biasanya sejajar dengan betul, manakala teks diselaraskan.</p> <pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;td { text-align: left; } td.numeric { text-align: right; }&lt;/code&gt;</pre> </li> <li> <p> <strong>Saiz fon dan ketinggian garis</strong> : Pilih saiz fon yang boleh dibaca dan ketinggian garis yang mencukupi untuk meningkatkan kebolehbacaan.</p> <pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;table { font-size: 16px; line-height: 1.5; }&lt;/code&gt;</pre> </li> <li> <p> <strong>Sorotan</strong> : Gunakan kesan hover untuk menyerlahkan baris atau sel apabila pengguna berinteraksi dengan mereka.</p> <pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;tr:hover { background-color: #e6e6e6; }&lt;/code&gt;</pre> </li> <h3 id="Bolehkah-anda-memberikan-contoh-tag-semantik-HTML-yang-digunakan-dalam-struktur-meja"> Bolehkah anda memberikan contoh tag semantik HTML5 yang digunakan dalam struktur meja?</h3> <p> Tag semantik HTML5 membantu meningkatkan struktur dan kebolehcapaian jadual anda. Berikut adalah contoh cara menggunakan tag semantik dalam struktur meja:</p> <pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;table&gt; &lt;caption&gt;Employee Details&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Age&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Occupation&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;John Doe&lt;/th&gt; &lt;td&gt;30&lt;/td&gt; &lt;td&gt;Engineer&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;Jane Smith&lt;/th&gt; &lt;td&gt;25&lt;/td&gt; &lt;td&gt;Designer&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;td colspan=&quot;3&quot;&gt;Total Employees: 2&lt;/td&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;/table&gt;&lt;/code&gt;</pre> <p> Dalam contoh ini:</p> <ul> <li> <code><caption></caption> Menyediakan tajuk atau keterangan untuk jadual.