<style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f9f9f9; }</style>
假设我们须要创建一个3x3的表格,显示一个小型团队的成员信息。
插入一个3行3列的表格。输入数据:姓名、职位、邮箱。设置第一行为表头,加粗并添补淡蓝色背景。设置所有单元格的文本为居中对齐。为表格添加外边框,并为行添加细边框。HTML实例<!DOCTYPE html><html><head><style> table { width: 50%; border-collapse: collapse; margin: 25px 0; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #4CAF50; color: white; } tr:nth-child(even) { background-color: #f2f2f2; }</style></head><body><table> <tr> <th>Name</th> <th>Position</th> <th>Email</th> </tr> <tr> <td>Alice</td> <td>Manager</td> <td>alice@example.com</td> </tr> <tr> <td>Bob</td> <td>Developer</td> <td>bob@example.com</td> </tr> <tr> <td>Charlie</td> <td>Designer</td> <td>charlie@example.com</td> </tr></table></body></html>
在这个HTML实例中,我们创建了一个带有条纹效果的表格,表头有绿色背景和白色笔墨,每个单元格都有适当的添补和边框。
结论创建和格式化表格是一项基本技能,无论是在文档编辑器还是HTML中。一个良好格式化的表格不仅能有效传达信息,还能提升整体文档或网页的都雅性和专业性。通过实践这些技巧和利用示例作为参考,你可以创建出既实用又吸引人的表格。