Tableau est l'outil de formatage de données le plus important. Il possède un grand nombre d'applications à la fois en front-end et en back-end.
Vérifions quelques sites Web pour voir quel contenu de la page est créé à l'aide de tableaux.
HTML crée un tableau en utilisant la balise table. Cette balise est une balise composée typique, car il est inutile de simplement l'écrire. Elle doit être combinée avec les sous-balises internes pour avoir un sens.
Le principe de base de la création d'un tableau est le suivant : créez d'abord des lignes, puis divisez les colonnes. Une ligne et une colonne sont appelées une cellule et toutes les données utilisateur doivent être placées dans la cellule.
Créez des lignes à l'aide des balises
Vous constaterez que le tableau nouvellement créé ne ressemble pas du tout à un tableau. Il ne comporte même pas les lignes de tableau les plus élémentaires. C'est pour cette raison que les tableaux ont été utilisés pour la mise en page dans les premiers temps. mais ils ne sont pas utilisés maintenant.
Ajoutons quelques attributs de base à ce tableau, au moins pour le faire ressembler à un tableau.
border : Définissez la largeur de la ligne de bordure du tableau.
Cellpacing : définissez l'espacement entre les cellules, défini sur 0, ce qui équivaut à plier les bords des cellules. À ce stade, il utilise automatiquement la largeur de la bordure du tableau, par exemple 1.
cellpadding : définissez la distance entre les données de la cellule et la bordure afin que le contenu ne soit pas trop encombré.
aligner : définir le mode d'alignement des données dans la cellule. La valeur par défaut est l'alignement à gauche. Vous pouvez définir l'alignement à droite et l'alignement au centre.
width : Définissez la largeur du tableau, qui peut être une valeur absolue ou une valeur relative en pourcentage. Il est recommandé de la définir sur une valeur relative pour s'adapter aux changements de données.
hauteur : Définissez la hauteur du tableau. Il n'y a pas de réglage ici pour s'adapter aux changements du nombre de lignes dans le tableau.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格的基本属性</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" align="center" width="80%"> <caption><h3>岛国明星TOP50排行榜</h3></caption> <!-- bgcolor可以设置行或单元格的背景颜色:skyblue天蓝色 --> <tr bgcolor="skyblue"> <!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 --> <th>ID</th> <th>姓名</th> <th>腰围</th> <th>腰围</th> <th>臀围</th> </tr> <tr> <td align="center">01</td> <td align="center">波多野结衣</td> <td align="center">88</td> <td align="center">59</td> <td align="center">85</td> </tr> <tr> <td align="center">02</td> <td align="center">小泽玛利亚</td> <td align="center">90</td> <td align="center">60</td> <td align="center">85</td> </tr> <tr> <td align="center">03</td> <td align="center">浅川梨奈</td> <td align="center">87</td> <td align="center">61</td> <td align="center">88</td> </tr> <tr> <td align="center">04</td> <td align="center">深田恭子</td> <td align="center">86</td> <td align="center">62</td> <td align="center">88</td> </tr> <tr> <td align="center">05</td> <td align="center">苍老师</td> <td align="center">88</td> <td align="center">68</td> <td align="center">90</td> </tr> </table> <!-- 使用之前学过的<a>标签来制作一个简单的分页,这里的<p>标签只起到一个简单的包装作用 --> <p align="center"> <a href="">首页</a> <a href="">上一页</a> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">...</a> <a href="">下一页</a> <a href="">尾页</a> </p> </body> </html>
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
