Maison > Article > interface Web > Comment embellir les tableaux HTML avec CSS
Comment utiliser CSS pour embellir le tableau en HTML : Créez d'abord un exemple de fichier HTML ; puis créez le tableau dans le corps et enfin ajoutez des styles CSS au tableau via la balise de style.
L'environnement d'exploitation de cet article : système Windows 7, HTML5&&CSS3, ordinateur Dell G3.
Comment embellir des tableaux HTML avec du CSS ?
Jetons un coup d'œil à l'exemple ci-dessous.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /*表格样式*/ table { width: 90%; background: #ccc; margin: 10px auto; border-collapse: collapse; /*border-collapse:collapse合并内外边距 (去除表格单元格默认的2个像素内外边距*/ } th,td { height: 25px; line-height: 25px; text-align: center; border: 1px solid #ccc; } th { background: #eee; font-weight: normal; } tr { background: #fff; } tr:hover { background: #cc0; } td a { color: #06f; text-decoration: none; } td a:hover { color: #06f; text-decoration: underline; } </style> </head> <body> <table> <tr> <!-- th为表格标题栏--> <th>序号</th> <th>职位名称</th> <th>招聘人数</th> <th>工作地点</th> <th>有效时间</th> <th>职位描述</th> </tr> <tr> <td>1</td> <td>保安人员</td> <td>3至4人</td> <td>洞头</td> <td>2006.12.08</td> <td> <a href="#">查看</a> </td> </tr> <tr> <td>2</td> <td>项目技术人员</td> <td>1人</td> <td>洞头</td> <td>2006.10.08</td> <td> <a href="#">查看</a> </td> </tr> <tr> <td>3</td> <td>总经理助理</td> <td>1人</td> <td>温州</td> <td>2006.07.11</td> <td> <a href="#">查看</a> </td> </tr> </table> </body> </html>
Rendu :
Recommandé : "Tutoriel vidéo CSS"
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!