<th>


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


Teg takrifan dan arahan penggunaan

<th> mentakrifkan sel pengepala dalam jadual HTML.

Jadual HTML mempunyai dua jenis sel:

  • Sel pengepala - mengandungi maklumat pengepala (dicipta oleh elemen <th>)
  • Grid sel standard - Mengandungi data (dicipta oleh elemen <td>) Teks dalam elemen

<th> biasanya dijadikan tebal dan berpusat. Teks dalam elemen

<td> biasanya teks dijajar kiri biasa.


Petua dan Nota

Petua: Jika anda memerlukan kandungan untuk merentangi berbilang baris atau lajur, gunakan atribut colspan dan rowspan!


Perbezaan antara HTML 4.01 dan HTML5

Sesetengah atribut daripada HTML 4.01 tidak lagi disokong dalam HTML 5.


Atribut

属性描述
abbrtextHTML5 不支持。 规定表头单元格中内容的缩写版本。
alignleft
     right
     center
     justify
     char
HTML5 不支持。 规定表头单元格内容的水平对齐方式。
axiscategory_nameHTML5 不支持。 对表头单元格进行分类。
bgcolorrgb(x,x,x)
   #xxxxxx
   colorname
HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的背景颜色。
charcharacterHTML5 不支持。 规定根据哪个字符来进行内容的对齐。
charoffnumberHTML5 不支持。 规定对齐字符的偏移量。
colspannumber规定表头单元格可横跨的列数。
headersheader_id规定与表头单元格相关联的一个或多个表头单元格。
heightpixels
%
HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的高度。
nowrapnowrapHTML5 不支持。HTML 4.01 已废弃。 规定表头单元格中的内容是否折行。
rowspannumber规定表头单元格可横跨的行数。
scopecol
     colgroup
     row
     rowgroup
规定表头单元格是否是行、列、行组或列组的头部。
valigntop
     middle
     bottom
     baseline
HTML5 不支持。 规定表头单元格内容的垂直排列方式。
widthpixels
   %
HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的宽度。


Atribut global

<th> teg menyokong atribut global HTML.


Atribut acara

<th> teg menyokong semua 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

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

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 instance 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: Th Object