<jadual>


HTML <table> Teg

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
  </tr>
</table>

</body>
</html>

Jalankan Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Sokongan Penyemak Imbas

1000.png

Semua penyemak imbas utama menyokong teg <table>

Teg takrifan dan arahan penggunaan

<jadual> , <th>, dan <td> Elemen

<tr> mentakrifkan baris jadual, elemen <th> mentakrifkan pengepala dan elemen <td>

Jadual HTML yang lebih kompleks juga mungkin termasuk unsur <caption>, <col>, <colgroup>, <thead>, <tfoot> dan <tbody>

Perbezaan antara HTML 4.01 dan HTML5

Dalam HTML5, hanya atribut "sempadan" disokong dan hanya nilai "1" atau "" dibenarkan.

Atribut

属性值描述
alignleft
   center
   right		HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。
bgcolorrgb(x,x,x)
   #xxxxxx
   colorname		HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。
border1
""		规定表格单元是否拥有边框。
cellpaddingpixelsHTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacingpixelsHTML5 不支持。规定单元格之间的空白。
framevoid
     above
     below
     hsides
     lhs
     rhs
     vsides
     box
     border		HTML5 不支持。规定外侧边框的哪个部分是可见的。
rulesnone
     groups
     rows
     cols
     all		HTML5 不支持。规定内侧边框的哪个部分是可见的。
summarytextHTML5 不支持。规定表格的摘要。
widthpixels
     %		HTML5 不支持。规定表格的宽度。

Atribut global

<table> teg menyokong atribut global HTML.

Atribut acara

<table> teg menyokong atribut acara HTML.

Examples

Cubalah - Contoh

Tajuk dalam jadual
Contoh ini menunjukkan cara memaparkan tajuk jadual.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>表格使用水平标题:</h4>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
  </tr>
</table>

<h4>表格使用垂直标题:</h4>
<table border="1">
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th>Telephone:</th>
    <td>555 77 854</td>
  </tr>
</table>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Sel Kosong
Contoh ini menunjukkan cara menggunakan " " untuk mengendalikan sel tanpa kandungan.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
<tr>
  <td>一些文本</td>
  <td>一些文本</td>
</tr>
<tr>
  <td></td>
  <td>一些文本</td>
</tr>
</table>

<p>如果在上面的空单元格中没有边框，你可以插入一个空格 ： &nbsp;</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Jadual dengan tajuk
Contoh ini menunjukkan jadual dengan tajuk.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
  </tr>
</table>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Label dalam jadual
Contoh ini menunjukkan cara untuk memaparkan elemen dalam elemen lain.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Sel jadual yang merentangi baris atau lajur
Contoh ini menunjukkan cara untuk menentukan sel jadual yang merentangi baris atau lajur.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Artikel Berkaitan

Tutorial HTML: Jadual HTML

Manual Rujukan HTML DOM: Objek Jadual