首页学生水果蔬菜小明苹果西兰花小红葡萄胡萝卜这个表格的HTML代码

学生水果蔬菜小明苹果西兰花小红葡萄胡萝卜这个表格的HTML代码

时间: 2024-12-15 09:13:49 浏览: 8

你可以使用HTML table元素来表示这种结构化数据。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover {background-color: #f5f5f5;} </style> </head> <body> <h2>学生、水果和蔬菜对应表</h2> <table> <tr> <th>学生</th> <th>水果</th> <th>蔬菜</th> </tr> <tr> <td>小明</td> <td>苹果</td> <td>西兰花</td> </tr> <tr> <td>小红</td> <td>葡萄</td> <td>胡萝卜</td> </tr> </table> </body> </html> ``` 在这个代码中，`<table>`标签定义了一个表格，`<tr>`标签用于创建表格行，`<th>`标签用于表头，`<td>`标签用于单元格。每行数据都放在一个新的`<tr>`标签内，并且每列数据之间由`<td>`标签分隔。通过CSS样式，我们可以美化表格的外观。

阅读全文