<tableau>
HTML <table> 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 <table>
Définition des balises et instructions d'utilisation
<table> Tableau HTML de définition des balises
Un tableau HTML comprend des éléments <table> , <th> et <td> L'élément
<tr> définit les lignes du tableau, l'élément <th> définit les en-têtes du tableau et l'élément <td>
Les tableaux HTML plus complexes peuvent également inclure des éléments <caption>, <col>, <colgroup>, <thead>, <tfoot> et <tbody>
Différences entre HTML 4.01 et HTML5
En HTML5, seul l'attribut "border" est supporté, et seules les valeurs "1" ou "" sont autorisées.
Attributs
| 属性 | 值 | 描述 |
|---|---|---|
| align | left center right | HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。 |
| border | 1 "" | 规定表格单元是否拥有边框。 |
| cellpadding | pixels | HTML5 不支持。规定单元边沿与其内容之间的空白。 |
| cellspacing | pixels | HTML5 不支持。规定单元格之间的空白。 |
| frame | void above below hsides lhs rhs vsides box border | HTML5 不支持。规定外侧边框的哪个部分是可见的。 |
| rules | none groups rows cols all | HTML5 不支持。规定内侧边框的哪个部分是可见的。 |
| summary | text | HTML5 不支持。规定表格的摘要。 |
| width | pixels % | HTML5 不支持。规定表格的宽度。 |
Attributs globaux
La balise <table> prend en charge les attributs globaux HTML.
Attributs d'événement
La balise <table> prend en charge 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
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 tableau
