masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk menyediakan jadual Html

Bagaimana untuk menyediakan jadual Html

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan： 2023-05-21 17:34:41
asal
4915 orang telah melayarinya

Jadual HTML ialah salah satu elemen yang biasa digunakan dalam pembangunan web. Melalui jadual, data boleh dipersembahkan kepada pengguna dalam bentuk yang jelas dan teratur, memudahkan pengguna mendapatkan maklumat.

Dalam artikel ini, kami akan memperkenalkan cara mencipta jadual dalam HTML dan cara menetapkan sifat jadual, termasuk sempadan jadual, penjajaran sel, pengepala jadual, dsb. Jom mula belajar!

1. Buat jadual

Dalam HTML, gunakan teg

Berikut ialah contoh mudah yang menunjukkan cara membuat jadual dengan hanya 3 baris dan 2 lajur: 

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>
Salin selepas log masuk

Dalam blok kod di atas, teg

tag bermakna mencipta Baris jadual, label

2. Tetapkan jidar jadual

Jika anda ingin menambah jidar di sekeliling meja, anda perlu menggunakan gaya CSS untuk menetapkan atribut jidar jadual. Berikut ialah contoh dengan sempadan biru: 



<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>
Salin selepas log masuk

Dalam contoh di atas, teg <table> <tr> <td>行1列1</td> <td>行1列2</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> </tr> <tr> <td>行3列1</td> <td>行3列2</td> </tr> </table>

Salin selepas log masuk

Dalam contoh di atas, sifat penjajaran teks gaya CSS digunakan pada semua sel. Ini bermakna semua kandungan sel dalam jadual akan dipusatkan.

4. Tetapkan pengepala jadual

Dalam jadual, anda boleh menggunakan teg

Dalam jadual, setiap sel mesti diletakkan dalam teg
untuk membalut kandungan baris pertama sel dan menandakannya sebagai pengepala jadual. Pada masa ini, sel akan ditebalkan untuk menunjukkan bahawa ia adalah pengepala. Berikut ialah contoh yang menunjukkan cara menambah pengepala: 

<style>
  th {
    background-color: gray;
    color: white;
    font-weight: bold;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
Salin selepas log masuk

Dalam contoh di atas, teg

digunakan untuk sel pengepala. Gaya CSS digunakan untuk menukar warna, latar belakang, saiz fon dan atribut lain pengepala jadual untuk menjadikannya boleh dibezakan secara visual daripada kandungan sel.

Ringkasan

Melalui pengenalan di atas, saya percaya pembaca telah memahami penggunaan asas jadual HTML dan cara menukar jadual melalui gaya CSS. Akhir sekali, saya ingin mengingatkan semua orang bahawa dalam pembangunan sebenar, jadual sering menggunakan JavaScript atau teknologi lain untuk berinteraksi dengan pelayan, menjadikan jadual sebagai alat yang lebih berguna.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan jadual Html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya：Penukaran format html Artikel seterusnya：tag html terlepas
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2705
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2829
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2386
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
2276
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
2357
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved