Tag jadual tuto...LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

Tag jadual tutorial asas HTML

Tag jadual

Halaman web mempunyai fungsi yang serupa dengan yang terdapat dalam word. Sudah tentu, terdapat juga fungsi yang serupa dengan yang terdapat dalam excel, dan jadual adalah salah satu daripadanya

< /tbody>






<🎜><🎜>
<🎜><🎜><🎜>

Struktur jadual

<jadual>

;</td>

>                                                                                                                                                                                                                                                  td>

                        <td></td>/tr>

<🎜< >

<🎜<

<jadual>Atribut

Lebar: lebar meja, unit boleh menjadi peratusan atau nilai tetap.

Tinggi: Ketinggian meja.

Jajaran: penjajaran mendatar jadual, nilai: kiri, tengah, kanan

Sempadan: ketebalan jidar. Warna sempadan: warna sempadan.

  • bgWarna: warna latar belakang meja.

  • latar belakang: URL imej latar belakang.

  • padding sel: jarak antara tepi sel dan kandungan (jarak padding)

  • cellpacing: jarak antara sel ( spacing)

  • peraturan: gabungkan garis sempadan sel, nilai: semua

  • Nota: keserasian peraturan tidak baik, sila Gunakan CSS untuk menggantikannya.

  • Mari kita lukis meja sebenarnya

    • <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr>
             <td>工号</td>
             <td>姓名</td>
             <td>职位</td>
         </tr>
         <tr>
             <td>001</td>
             <td>小明</td>
             <td>设计师</td>
         </tr>
         <tr>
             <td>002</td>
             <td>小方</td>
             <td>工程师</td>
         </tr>
         <tr>
             <td>003</td>
             <td>小白</td>
             <td>程序员</td>
         </tr>
     </table> 
    </body>
</html>

    • < tr> Atribut - tag baris

bgWarna: warna latar belakang baris

tinggi: Ketinggian baris

jajar: Teks dalam baris dipusatkan secara mendatar, nilai: kiri, tengah, kanan

  • jahat: Berpusat menegak, nilai: atas (atas), tengah (tengah), bawah (bawah)

    • <td> atau <th>< ; ialah sel biasa, <th> ialah sel pengepala, yang dipaparkan dalam huruf tebal dan berpusat.

    lebar: lebar sel

      tinggi: ketinggian sel

      • bgWarna : sel warna latar belakang

      • latar belakang: imej latar belakang sel

      • jajaran: penjajaran mendatar

      • sanggah: Menegak penjajaran

      • jajaran baris: Gabungkan sel atas dan bawah. Atribut gabungan mesti diletakkan dalam sel pertama.

      • colspan: menggabungkan sel kiri dan kanan. Apabila bergabung, mesti ada penambahan dan penolakan, memastikan bilangan sel dalam setiap baris kekal tidak berubah.

      • Contoh: 
    • <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

      Nota: Atribut adalah sensitif huruf besar dan kecil Jika bgColor ditulis sebagai bgcolor, ia tidak akan memberi kesan

    Anda boleh memasukkan setiap atribut dan melihat kesan output

    teg kapsyen

    Tambahkan tajuk dan ringkasan pada jadual

    Ringkasan

    Kandungan ringkasan tidak akan dipaparkan dalam penyemak imbas. Fungsinya adalah untuk meningkatkan kebolehbacaan (semantik) jadual, membolehkan enjin carian memahami kandungan jadual dengan lebih baik, dan juga membolehkan pembaca skrin membantu pengguna khas membaca kandungan jadual dengan lebih baik.

    Sintaks: <table summary="table introduction text">

    Tajuk

    digunakan untuk menerangkan kandungan jadual , kedudukan paparan tajuk: di atas jadual.

    Sintaks: <jadual> <kapsyen>teks tajuk</kapsyen>

    <tr>

    <td>…</td> >                                                 

    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"summary="日历信息">
         <caption>2016.10日历</caption>
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>




    bahagian seterusnya

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"> <tr> <td>工号</td> <td>姓名</td> <td>职位</td> </tr> <tr> <td>001</td> <td>小明</td> <td>设计师</td> </tr> <tr> <td>002</td> <td>小方</td> <td>工程师</td> </tr> <tr> <td>003</td> <td>小白</td> <td>程序员</td> </tr> </table> </body> </html>
    serahkanTetapkan Semula Kod
    babperisian kursus