首页编写一段html代码，要求实现表格形式的网站首页设计，表格内要求设置有背景图片

编写一段html代码，要求实现表格形式的网站首页设计，表格内要求设置有背景图片

时间: 2023-06-25 16:02:48 浏览: 100

html表格设计

5星 · 资源好评率100%

html表格设计，最基础，最基本的，嘻嘻

以下是一段简单的HTML代码，实现了表格形式的网站首页设计，并添加了背景图片： ```html <!DOCTYPE html> <html> <head> <title>网站首页</title> <style> table { margin: auto; background-image: url('background.jpg'); background-size: cover; border-collapse: collapse; width: 80%; } th, td { padding: 15px; text-align: center; border: 1px solid black; color: white; } th { background-color: #4CAF50; } td { background-color: #008CBA; } </style> </head> <body> <table> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>内容4</td> <td>内容5</td> <td>内容6</td> </tr> <tr> <td>内容7</td> <td>内容8</td> <td>内容9</td> </tr> </table> </body> </html> ``` 在上面的代码中，使用了`background-image`属性来设置背景图片。同时，为了使表格居中显示，使用了`margin: auto`属性。`border-collapse: collapse`用于合并表格边框，`background-size: cover`用于将背景图片自适应到浏览器窗口大小。`th`和`td`分别用于设置表格的表头和单元格样式，可以根据需要进行修改。

阅读全文