Bermula dengan jadual HTML

Borang HTML: Panduan untuk Mewujudkan Borang Responsif dan Mudah Alih

Jadual HTML digunakan untuk memaparkan data jadual di laman web. Mereka hebat untuk memaparkan maklumat dengan cara yang teratur dan boleh digayakan menggunakan CSS untuk memadankan rupa dan gaya laman web. Tutorial ini akan meliputi asas-asas mewujudkan jadual HTML dan menambah gaya untuk menjadikannya responsif dan mesra mudah alih.

mata utama

Jadual HTML adalah alat yang berkuasa untuk memaparkan data jadual di laman web, dan boleh membuat jadual, baris, dan sel menggunakan
• , <table> dan <code><tr> tag. <code><td> sifat CSS seperti sempadan, mengisi, warna latar belakang, dan pertanyaan media untuk saiz skrin yang berbeza boleh dilaksanakan untuk menjadikan jadual HTML responsif dan mesra mudah alih. <li> </li> Kebolehcapaian jadual HTML boleh dipertingkatkan dengan menambah tajuk dengan tag dan ringkasan <li> dengan tag <code><caption></caption> yang memberikan penerangan dan ringkasan untuk pengguna bukan visual. <summary></summary>
Buat Jadual HTML
Untuk membuat jadual HTML, kita perlu menggunakan tag

. Di dalam tag <table>, kita perlu membuat satu atau lebih <code><table> tag yang menentukan setiap baris jadual. Dalam setiap tag <sher>, kita boleh membuat satu atau lebih <code><tr> tag yang menentukan sel -sel jadual. Berikut adalah contoh jadual HTML asas: <code><tr> <code><td> Ini mewujudkan jadual dengan dua baris dan tiga lajur, setiap sel menunjukkan kandungannya. <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;table&gt; &lt;tr&gt; &lt;td&gt;单元格1&lt;/td&gt; &lt;td&gt;单元格2&lt;/td&gt; &lt;td&gt;单元格3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格4&lt;/td&gt; &lt;td&gt;单元格5&lt;/td&gt; &lt;td&gt;单元格6&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;/code&gt;</pre> <p> </p> Lihat Codepen Contoh <p> (ganti dengan pautan codepen sebenar, jika hadir) <a href="https://www.php.cn/link/a382db0a40615cdbe363ae0b4b2eb262"> </a> tambah baris dan lajur </p> <h2> Untuk menambah baris baru ke meja, kita hanya perlu membuat tag </h2> baru. Untuk menambah sel baru ke meja, kita boleh membuat tag <p> baru dalam tag <code><tr> yang sedia ada. Berikut adalah jadual contoh dengan empat baris dan tiga lajur: <code><tr> <code><td> Ini akan membuat jadual dengan empat baris dan tiga lajur. <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;table&gt; &lt;tr&gt; &lt;td&gt;单元格1&lt;/td&gt; &lt;td&gt;单元格2&lt;/td&gt; &lt;td&gt;单元格3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格4&lt;/td&gt; &lt;td&gt;单元格5&lt;/td&gt; &lt;td&gt;单元格6&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格7&lt;/td&gt; &lt;td&gt;单元格8&lt;/td&gt; &lt;td&gt;单元格9&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格10&lt;/td&gt; &lt;td&gt;单元格11&lt;/td&gt; &lt;td&gt;单元格12&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;/code&gt;</pre> <p> Tetapkan gaya jadual html </p> <h2> Anda boleh menggunakan jadual CSS untuk gaya HTML untuk menukar penampilan mereka. Beberapa sifat CSS yang paling biasa digunakan untuk meja gaya termasuk sempadan, mengisi, dan warna latar belakang. Berikut adalah contoh cara gaya meja menggunakan sempadan dan warna latar: </h2> <p> </p> Ini akan membuat meja dengan sempadan hitam dan warna latar kelabu muda, setiap sel yang dipenuhi dengan 8 piksel. <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-css&quot;&gt;table { border: 1px solid black; background-color: #f2f2f2; } td { padding: 8px; }&lt;/code&gt;</pre> <p> </p> Lihat Codepen Contoh <p> (ganti dengan pautan codepen sebenar, jika hadir) <a href="https://www.php.cn/link/a382db0a40615cdbe363ae0b4b2eb262"><h2> Buat bentuk responsif dan mesra mudah alih </h2> <p> Salah satu cabaran menggunakan jadual HTML adalah untuk menjadikannya responsif dan mesra mudah alih. Salah satu cara untuk mencapai matlamat ini ialah menggunakan CSS untuk menyesuaikan susun atur jadual mengikut saiz skrin. Salah satu cara ialah menggunakan atribut <code>display untuk menukar susun atur jadual dari susun atur tetap ke susun atur responsif. Ini boleh menggunakan pertanyaan media untuk mencari saiz skrin tertentu. Berikut adalah contoh cara membuat meja responsif:

<code class="language-html"><table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table></code>

Apabila lebar skrin kurang daripada 600 piksel, ini mengubah susun atur jadual dari susun atur tetap ke susun atur responsif.



Lihat Codepen Contoh (ganti dengan pautan codepen sebenar, jika hadir)

tambah tajuk dan ringkasan
Satu lagi aspek penting menggunakan jadual HTML adalah untuk menjadikannya mudah diakses oleh pengguna bukan visual. Salah satu cara ialah menambah tajuk dan ringkasan ke meja. Tag

boleh digunakan untuk menambah tajuk ke meja yang menggambarkan kandungan jadual. Berikut adalah contoh cara menambah tajuk ke meja: <caption></caption>

<code class="language-html"><table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
  <tr>
    <td>单元格7</td>
    <td>单元格8</td>
    <td>单元格9</td>
  </tr>
  <tr>
    <td>单元格10</td>
    <td>单元格11</td>
    <td>单元格12</td>
  </tr>
</table></code>

Ini akan menambah tajuk ke meja yang menunjukkan jualan mengikut bulan.

Tag boleh digunakan untuk memberikan ringkasan borang untuk pembaca skrin dan teknologi bantuan lain. Berikut adalah contoh cara menambah ringkasan ke meja: <summary></summary>

<code class="language-css">table {
  border: 1px solid black;
  background-color: #f2f2f2;
}
td {
  padding: 8px;
}</code>

Ini akan memberikan ringkasan jadual untuk pembaca skrin dan teknologi bantuan lain, menunjukkan bahawa ia menunjukkan jualan mengikut bulan.
Adakah tidak baik untuk menggunakan borang ini?
tidak! Jadual adalah bahagian penting HTML. Mereka adalah penting untuk memaparkan data tabular dalam cara semantik dan boleh diakses. Pada hari -hari awal World Wide Web, sebelum CSS muncul, jadual menyediakan cara untuk reka bentuk web susun atur, tetapi ini bukan tujuan yang dimaksudkan. Syukurlah, hari -hari telah berlalu lama (baik, kebanyakannya, tetapi untuk beberapa pelanggan e -mel!), Sekarang kita boleh memberi tumpuan kepada bagaimana jadual HTML benar -benar - dan sangat penting dalam memaparkan data - fungsi.
Kesimpulan
Jadual HTML adalah alat yang berkuasa untuk memaparkan data jadual di laman web. Dengan CSS, anda boleh gaya meja untuk memadankan rupa dan gaya laman web dan menjadikannya responsif dan mesra mudah alih kepada pengguna pada peranti yang berbeza. Menambah tajuk dan ringkasan ke meja boleh membantu meningkatkan kebolehcapaian untuk pengguna kurang upaya. Menggunakan teknik ini, kita boleh membuat bentuk yang berkesan yang menarik dan kuat secara visual.
HTML Form FAQ (FAQ)
Bagaimana untuk menggabungkan sel dalam jadual HTML?

Sel -sel dalam jadual HTML boleh digabungkan menggunakan sifat "colspan" dan "rowspan". Harta "Colspan" membolehkan sel -sel untuk merangkumi pelbagai lajur, dan harta "Rowspan" membolehkan sel -sel untuk merangkumi pelbagai baris. Sebagai contoh, jika anda ingin membuat sel jarak dua lajur, anda boleh menggunakan kod berikut:

. Begitu juga, jika anda ingin membuat sel dua baris, anda boleh menggunakan kod berikut:

. <td colspan="2">内容</td>

Bagaimana untuk menambah sempadan ke meja html?

Anda boleh menggunakan harta "sempadan" dalam tag <table> untuk menambah sempadan ke jadual HTML. Sebagai contoh, <code><table border="1"> akan membuat jadual bersempadan. Walau bagaimanapun, harta ini tidak disokong dalam HTML5. Sebaliknya, anda boleh menambah sempadan menggunakan CSS. Sebagai contoh, anda boleh menambah sempadan menggunakan kod berikut: <code>table, th, td {border: 1px solid black;}.

bagaimana gaya jadual HTML menggunakan CSS?

CSS boleh digunakan untuk gaya HTML jadual dengan meletakkan "jadual", "th" dan "td". Sebagai contoh, anda boleh menukar warna latar belakang tajuk jadual (TH) dan data jadual (TD) menggunakan kod berikut: th {background-color: #f2f2f2;} td {background-color: #ffffff;}. Anda juga boleh menambah mengisi, menukar warna teks, dan banyak lagi.

bagaimana membuat jadual HTML responsif?

CSS boleh digunakan untuk membuat jadual HTML responsif. Anda boleh menggunakan harta "Overflow" untuk menambah bar skrol ke meja apabila lebar jadual kurang daripada saiz skrin. Sebagai contoh, anda boleh menggunakan kod berikut untuk membuat jadual responsif: table {width: 100%; overflow: auto;}.

Bagaimana untuk menambah tajuk ke jadual HTML?

Anda boleh menggunakan tag "Caption" untuk menambah tajuk ke jadual HTML. Tag "Kapsyen" mesti dimasukkan selepas tag <table>. Sebagai contoh, <shop>. <code><table><caption>表格标题</caption></table> bagaimana menjajarkan teks dalam jadual html?

Anda boleh menggunakan harta "Teks-Align" dalam CSS untuk menyelaraskan teks dalam jadual HTML. Sebagai contoh, anda boleh menggunakan kod berikut untuk memusatkan teks:

. th, td {text-align: center;}

Bagaimana untuk menambah warna latar belakang ke jadual html?
Anda boleh menambah warna latar belakang ke jadual HTML menggunakan harta "latar belakang warna" dalam CSS. Sebagai contoh, anda boleh menambah warna latar belakang ke meja menggunakan kod berikut:

. table {background-color: #f2f2f2;}

Bagaimana untuk menambah kesan hover ke jadual html?
Anda boleh menggunakan kelas pseudo ": hover" dalam CSS untuk menambah kesan hover ke jadual HTML. Sebagai contoh, anda boleh menggunakan kod berikut untuk menukar warna latar belakang baris jadual apabila penunjuk tetikus melayang di atas baris jadual:

. tr:hover {background-color: #f5f5f5;}

Bagaimana untuk menambah bar scrollar ke meja html?
Anda boleh menggunakan harta "limpahan" dalam CSS untuk menambah bar scrollar ke jadual HTML. Sebagai contoh, anda boleh menambah bar scroll ke meja menggunakan kod berikut:

. table {overflow: auto;}

Bagaimana untuk menambah warna baris bergantian ke jadual HTML?
Anda boleh menambah warna baris bergantian ke jadual HTML menggunakan kelas pseudo ": nth-child" dalam CSS. Sebagai contoh, anda boleh menambah warna garis berganti menggunakan kod berikut:

. tr:nth-child(even) {background-color: #f2f2f2;}

Atas ialah kandungan terperinci Bermula dengan jadual HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!