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

;</td>

> td>

<🎜< >

<🎜<

<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>

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

<!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>

<!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>

Meneruskan pembelajaran

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

Tag jadual tutorial asas HTML

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]