Berbagi teknologi

[Pengantar HTML] Pelajaran 10 - Tabel, yaitu tag tabel

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Pada bagian ini, kita berbicara tentang tabel dalam HTML. Contohnya kita sering melihat rapor siswa seperti excel sel demi sel. Itu semua berupa tabel.

Nama label tabelnya adalah meja 。

Daftar isi

1 Beberapa sub-tag di tabel

1.1 Area tajuk

1.2 Area isi tabel

1.3 Baris dan kolom

2 Sedikit latihan

2.1 Buatlah transkrip sederhana

2.2 Tambahkan garis batas

2.3 Baris silang

2.4 Persimpangan kolom

1 Beberapa sub-tag di tabel

1.1 Area tajuk

Misalnya pada transkrip, pasti ada judulnya di atasIdentitas Siswa、nama siswa、subjek、skor、Hasil keseluruhanBidang ini, benar.

Bidang ini akan ditempatkan di header tabel, yang memerlukan tag thead.

1.2 Area isi tabel

Maka bagian isi tabel memerlukan data yang lebih detail, misalnya nomor siswa 001, nama Zhang San, mata pelajaran matematika, dan nilai 80. Jika tidak ada mata pelajaran lain, maka nilai totalnya adalah 80. adalah 80. Kalau ada mata pelajaran lain Kalau mata pelajarannya dijumlahkan ya?

Konten ini akan ditempatkan di area konten tabel, yang memerlukan tag tbody.

1.3 Baris dan kolom

Tabel dibagi menjadi baris dan baris, lalu dipotong menjadi kolom dan kolom. Setelah pemotongan selesai, setiap bagian menjadi sel, persegi kecil, dan persegi kecil.

Selain itu, perhatikan:Baris berisi kolom, ini harus diingat。

Nama label barisnya adalah bahasa inggris  。

Label sel di header adalah th , label sel dari area badan tabel adalahtanggal merah 。

2 Sedikit latihan

2.1 Buatlah transkrip sederhana

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table>
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

2.2 Tambahkan garis batas

Tampilan ini agak berantakan, sehingga menambahkan garis pembatas akan membuat tabel terlihat lebih baik.Anda dapat menambahkan satubatas="1" Untuk pengaturan atribut, lihat kode di bawah, lalu segarkan halaman web untuk melihat apakah tampilannya jauh lebih baik.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

2.3 Baris silang

Tentu saja kita juga bisa membuat tampilan baris silang. Misalnya Zhang San dan Li Si dari Kelas 1, letakkan mereka di baris yang sama, lalu siswa dari Kelas 1 menempati 2 baris.

Kemudian tambahkan kelas 2, dengan Wang Wu dan Zhao Liu di kelas tersebut, dan biarkan mereka menempati satu baris besar, sehingga kelas 2 akan memiliki dua baris kecil.

Apa yang perlu diatur di sini rentang baris Atribut.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                 </tr>
  18.             </thead>
  19.             <tbody>
  20.                 <tr>
  21.                     <td>1</td>
  22.                     <td rowspan="2">1班</td>
  23.                     <td>张三</td>
  24.                 </tr>
  25.                 <tr>
  26.                     <td>2</td>
  27.                     <td>李四</td>
  28.                 </tr>
  29.                 <tr>
  30.                     <td>3</td>
  31.                     <td rowspan="2">2班</td>
  32.                     <td>王五</td>
  33.                 </tr>
  34.                 <tr>
  35.                     <td>4</td>
  36.                     <td>赵六</td>
  37.                 </tr>
  38.             </tbody>
  39.         </table>
  40.     </body>
  41. </html>

Melihat kode di atas, kita menyetel atribut rowpan untuk sel td, kemudian juga menjadi sel kedua kelas 1, jadi tidak perlu menambahkan kode td yang sama.

2.4 Persimpangan kolom

Lintas kolom mengacu pada beberapa kolom dengan karakteristik yang sama, sehingga cukup untuk menampilkan informasi satu kolom. Sama seperti persilangan baris tadi, tujuannya bukan agar Zhang San dan Li Si sama-sama berada di Kelas 1, jadi untuk menghindari tampilan yang berlebihan, karena semuanya memiliki atribut informasi yang sama, keduanya berada di Kelas 1, jadi untuk tampilkan Kelas 1, cukup silangkan saja.

Menyilangkan kolom berarti menggabungkan beberapa kolom menjadi satu. Mari kita ambil contoh.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                     <th>成绩</th>
  18.                 </tr>
  19.             </thead>
  20.             <tbody>
  21.                 <tr>
  22.                     <td>1</td>
  23.                     <td rowspan="2">1班</td>
  24.                     <td>张三</td>
  25.                     <td>90</td>
  26.                 </tr>
  27.                 <tr>
  28.                     <td>2</td>
  29.                     <td>李四</td>
  30.                     <td>80</td>
  31.                 </tr>
  32.                 <tr>
  33.                     <td colspan="4">1班总人数：2，总成绩：170</td>
  34.                 </tr>
  35.                 <tr>
  36.                     <td>3</td>
  37.                     <td rowspan="2">2班</td>
  38.                     <td>王五</td>
  39.                     <td>70</td>
  40.                 </tr>
  41.                 <tr>
  42.                     <td>4</td>
  43.                     <td>赵六</td>
  44.                     <td>100</td>
  45.                 </tr>
  46.                 <tr>
  47.                     <td>4</td>
  48.                     <td>冯七</td>
  49.                     <td>75</td>
  50.                 </tr>
  51.                 <tr>
  52.                     <td colspan="4">2班总人数：3，总成绩：245</td>
  53.                 </tr>
  54.             </tbody>
  55.         </table>
  56.     </body>
  57. </html>

Haha, kode di atas,Sebenarnya saya tidak bisa mendapatkan efek dari screenshot ini., jika Anda mendapatkan kodenya dan menemukan ada masalah, ingatlahBeri tahu sayaOh.

Profil pribadi

Ia telah mengabdikan dirinya untuk meneliti teknologi selama lebih dari 30 tahun, dan mahir dalam berbagai bahasa seperti java, linux, javascript, php, css, dll. "Saya telah memberikan banyak kontribusi di bidang dokumentasi pengembang stasiun sumber terbuka untuk berbagi beberapa masalah dalam pengembangan teknologi untuk referensi di masa mendatang. Semua orang memeriksanya

informasi kontak saya

Surat