Pour dessiner un tableau en HTML, utilisez la balise table, tr signifie ligne, td signifie colonne. Ce qui suit vous présentera les connaissances pertinentes des tableaux HTML à travers des exemples de code. Les amis intéressés devraient y jeter un œil ensemble
En html Dessinez des tableaux à l'aide de balises de tableau<html> <head> <title>Table in html</title> </head> <body> <p>水平表头</p> <table border="1"> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> <tr> <td>zdd</td> <td>30</td> <td>male</td> </tr> </table> <p>垂直表头</p> <table border="1"> <tr> <th>Name</th> <td>autumn</td> </tr> <tr> <th>Age</th> <td>30</td> </tr> <tr> <th>Gender</th> <td>famale</td> </tr> </table> </body> </html>
Nom | Âge
| < td valign ="middle" width="48" style="border-top : rgb(192,192,192) 1pt solid ; bordure droite : rgb(192,192,192) 1pt solid ; largeur : 36,5pt ; arrière-plan : rgb(255,255,255) ; bordure- bottom : rgb(192,192,192) 1 pt solide ; remplissage en bas : 1,75 pt ; remplissage en haut : 1,75 pt ; bordure à gauche : #f0f0f0 ; align:center; marge: 3pt auto; hauteur de ligne: 14.5pt">zdd<🎜>30<🎜> | mâle <🎜> |
垂直表头
Name autumn Age 30 Gender famale |
automne<🎜>
Âge<🎜>
30<🎜>
Sexe<🎜>
famale<🎜>
无边框表格
如果在定义表格时,没有指定border属性,那么表格就没有边框
<table> <tr><td>zdd</td><td>30</td></tr> <tr><td>ddz</td><td>27</td></tr> </table>
效果图
zdd | 30 |
ddz | 27 |
空单元格
如果没有为单元格指定内容,那么单元格将是空的,且没有边框,如下,这样很不美观。
zdd | 30 |
27 |
如果解决呢?方法是给空的单元格加上空格,由于html忽略多余的空格,所以我们不能直接加空格,而要加 nbsp表示空格。
<table border="1"> <tr><td>zdd</td><td>30</td></tr> <tr><td> </td>20</tr> </table>
效果图
zdd | 30 |
20 |
带标题的表格
使用caption属性,但是好像标题中不能有空格,否则显示的时候会换行!
<table border="1"> <caption>我的表格</caption> <tr><td>zdd</td><td>30</td></tr> <tr><td> </td><td>20</td></tr> </table>
我的表格
zdd | 30 |
20 |
跨行或者跨列的表格
用colspan跨行
<table border="1"> <tr><th>姓名</th><th colspan="2">电话</th></tr> <tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr> </table>
姓名 | 电话 | |
Bill Gates | 555 77 854 | 555 77 855 |
用rowspan跨列
<table border="1"> <tr><th>姓名</th><td>Bill Gates</td></tr> <tr><th rowspan="2">电话</th><td>555 77 854</td></tr> <tr><td>555 77 855</td></tr> </table>
嵌套的表格
table标签是可以嵌套的,也就是说在tr或者td标签中加入table标签即可创建表格中的表格。
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
相关推荐:
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!