<th>
HTML <th> Balises
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>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Prise en charge des navigateurs
Tous les principaux navigateurs prennent en charge la balise <th>
Définition de la balise et instructions d'utilisation
La balise <th> définit la cellule d'en-tête du tableau HTML.
Les tableaux HTML ont deux types de cellules :
- Cellule d'en-tête - contient des informations d'en-tête (créées par l'élément <th>)
- Grille de cellule standard - Contient des données (créé par l'élément <td>) Le texte de l'élément
<th> est généralement rendu en gras et centré. Le texte à l'intérieur de l'élément
<td> est généralement du texte ordinaire aligné à gauche.
Conseils et notes
Astuce : Si vous avez besoin que le contenu s'étende sur plusieurs lignes ou colonnes, utilisez les attributs colspan et rowspan !
Différences entre HTML 4.01 et HTML5
Certains attributs de HTML 4.01 ne sont plus pris en charge dans HTML 5.
Attributs
| 属性 | 值 | 描述 |
|---|---|---|
| abbr | text | HTML5 不支持。 规定表头单元格中内容的缩写版本。 |
| align | left right center justify char | HTML5 不支持。 规定表头单元格内容的水平对齐方式。 |
| axis | category_name | HTML5 不支持。 对表头单元格进行分类。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的背景颜色。 |
| char | character | HTML5 不支持。 规定根据哪个字符来进行内容的对齐。 |
| charoff | number | HTML5 不支持。 规定对齐字符的偏移量。 |
| colspan | number | 规定表头单元格可横跨的列数。 |
| headers | header_id | 规定与表头单元格相关联的一个或多个表头单元格。 |
| height | pixels % | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的高度。 |
| nowrap | nowrap | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格中的内容是否折行。 |
| rowspan | number | 规定表头单元格可横跨的行数。 |
| scope | col colgroup row rowgroup | 规定表头单元格是否是行、列、行组或列组的头部。 |
| valign | top middle bottom baseline | HTML5 不支持。 规定表头单元格内容的垂直排列方式。 |
| width | pixels % | HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的宽度。 |
Attributs globaux
La balise <th> prend en charge les attributs globaux du HTML.
Attributs d'événement
La balise <th> prend en charge tous les attributs d'événement HTML.
Essayez-le - Exemple
Titre dans le tableau
Cet exemple montre comment afficher le titre du tableau.
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>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
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>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
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>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Cellule vide
Cet exemple montre comment utiliser " " pour gérer des cellules sans contenu.
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>如果在上面的空单元格中没有边框，你可以插入一个空格 ： </p> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Tableau avec titre
Cet exemple montre un tableau avec titre.
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>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Étiquette dans le tableau
Cet exemple montre comment afficher des éléments dans d'autres éléments.
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>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Cellules de tableau qui s'étendent sur des lignes ou des colonnes
Cet exemple montre comment définir des cellules de tableau qui s'étendent sur des lignes ou des colonnes.
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>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Articles connexes
Tutoriel HTML : Tableau HTML
Manuel de référence HTML DOM : Objet Th
